var vs let vs const

In this article, we'll discuss var, let and const with respect to their scope, use, and hoisting.
In javascript, you can create/declare variables using keywords var, let and const.

Lets see the differences between these keywords to have a better understanding of what to use when.

Scope

Scope essentially means where these variables are available for use.

There are two types of scopes in JS:

• Function Scope: Visibility is limited to the function.

 function scopeFn() {  
   var num = 10;   
   console.log(num); //prints 10  
   }   
  console.log(num); // ReferenceError: num is not defined

 function scopeFn() {  
   var num = 20;   
   if (true) {   
     var num = 100;   
     console.log(num); //prints 100  
     }  
   console.log(num); //prints 100  
 }   
   console.log(num);  // ReferenceError: num is not defined

• Block Scope: Visibility is limited to the block of code.

let num = 20;
 if (true) {   
     let num = 10;   
     console.log(num); //prints 10  
 }   
 console.log(num); // prints 20

Now, that we have idea of scope. We can discuss the scope of var, let and const.

• var declarations are function scoped.
• let declarations are block scoped.
• const declarations are block scoped. ## Redefining and Redeclaring feature

A variable declared using ‘var’ can be redefined and even redeclared anywhere throughout its scope.

var x = 30;  
 console.log(x); //prints 30  
 x = "Hi"; //redefining or re-assigning (works without any error)  
 console.log(x); //prints "Hi"  

 var y = 10;  
 console.log(y); //prints 10  
 var y = "Hello"; //Redeclaring (works without any error)  
 console.log(y) //Prints "Hello"

A variable declared using ‘let’ can be redefined within its scope but cannot be re-declared within its scope.

let x = 11;  
console.log(x); //prints 11  
x = "IB"; //works without any error  
console.log(x); //prints "IB"  

let y = 12;  
console.log(y); //prints 12  
let y = "Scaler"; // error: Identifier y has already been declared  

let z = 13;  
if(true){  
 let z = "Fun"; //works without any error as scope is different.  
 console.log(z) //prints "Fun"  
}  
console.log(z) //prints 13

A variable declared using ‘const’ cannot be redefined or re-declared within its scope.

const x = 10;  
console.log(x); //prints 10  
x = 11; // error: Assignment to constant variable.  

const y;  
y = 2; //error  

const z = 12;  
console.log(z) //prints 12  
const z= 13; // error: Identifier 'y' has already been declared

Note : Every const declaration must be initialized at the time of declaration.

Hoisting

Hoisting is a mechanism where variables and function declarations are moved to the top of their scope before code execution.

console.log(x); // prints undefined  
var x = 100;  
console.log(x); //prints 100

• Variables declared using var are hoisted to the top of their scope and initialized with a value of undefined(special type).
• Variables declared using let are hoisted to the top of their scope but are not initialized with any value.
• Variables declared using const are hoisted to the top of their scope but are not initialized with any value.

console.log(x); // prints undefined  
var x = 100;  
console.log(x); //prints 100  

console.log(y); //Reference error  
let y = 200;  
console.log(y); //prints 200  

console.log(z); //Reference error  
const z = 300;  
console.log(z); //prints 300

Summary:

• var declarations are globally scoped or function scoped while let and const are block scoped.
• var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
• They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• While var and let can be declared without being initialized, const must be initialized during declaration.

Now we have understood the main difference between let, var and const.

Let's predict the output for the following code in the comments:

var x = 100;
{
    var x = -100;
}
let y = x;
{
    let y = 200;
}
console.log(y);

Got any question or additions? Please let me know.

Thank you for reading :)