DEV Community

Cover image for Var, Let, and Const
shivamkapasia0
shivamkapasia0

Posted on

Var, Let, and Const

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
Enter fullscreen mode Exit fullscreen mode
 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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"  
Enter fullscreen mode Exit fullscreen mode
 var y = 10;  
 console.log(y); //prints 10  
 var y = "Hello"; //Redeclaring (works without any error)  
 console.log(y) //Prints "Hello"
Enter fullscreen mode Exit fullscreen mode

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"  
Enter fullscreen mode Exit fullscreen mode
let y = 12;  
console.log(y); //prints 12  
let y = "Scaler"; // error: Identifier y has already been declared  
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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.  
Enter fullscreen mode Exit fullscreen mode
const y;  
y = 2; //error  
Enter fullscreen mode Exit fullscreen mode
const z = 12;  
console.log(z) //prints 12  
const z= 13; // error: Identifier 'y' has already been declared
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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  
Enter fullscreen mode Exit fullscreen mode
console.log(y); //Reference error  
let y = 200;  
console.log(y); //prints 200  
Enter fullscreen mode Exit fullscreen mode
console.log(z); //Reference error  
const z = 300;  
console.log(z); //prints 300
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Got any question or additions? Please let me know.

Thank you for reading :)

Discussion (0)