Go to the top

Understanding difference between var, let and const in details

Ronit / Javascript / 0 Comments
var-let-const-difference

var, let and const all these are used in variable declarations, but they differ in some or the other way, let's understand the difference between var, let and const in details now.

What is var?

var is a keyword used to declare a variable and optionally define a value to it.

Syntax

var varname [= value];

varname here is any legal identifier to give a name to the variable

value here is the initial value of the variable. If we don't assign any value to a variable then by default it's undefined.

 

Scope

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.

 

  1. Assigning a value to an undeclared variable will make it's scope global
    function test(){
      a = 1;
    }
    test();
    console.log(a);//a = 1 & it's scope is global

    .

  2. Defining a variable inside a function with var keyword will make its scope limited to function only.
    function test(){
      var a = 10;
      console.log(a); // a = 10 & scope is local
    }
    test();
    console.log(a); // Uncaught ReferenceError: a is not defined
  3. With var we suffer Variable Leakage. Which means that, a variable is leaked outside the scope where it was required to. Suppose in the case of a for loop where we create variable for the loop purpose but Variable Leaks and becomes available to its whole Functional Scope.
    function runMe(){
      for(var i = 0; i<10; i++){
        console.log(i); // i: 0 1 2 3 4 5 6 7 8 9
      }
    
      console.log(i);// i: 10 | Variable has leaked out
    }
    
    runMe();
    

 

Hoisting

Hoisting is a JavaSacript's in-built technique where it brings the declaration to the top.

If we talk about the variables declared with var, their declarations also gets hoisted. Let's see an example to understand it better.

console.log(a); // a: Undefined
var a = 10;
var b = 20;
console.log(a);// a: 10
console.log(b);// b: 20

Actually the above-written program after Hoisting looks like as follows:-

var a = undefined;
var b = undefined;
console.log(a); // a: Undefined
a = 10;
b = 20;
console.log(a);// a: 10
console.log(b);// b: 20

What is const?

const is a new keyword introduced in ES6 to declare a READ ONLY Variable and define a value to it mandatory.  The "const" is similar in all aspects as let, but there are few differences between them, which I have mentioned below:-

    1. const cannot be declared without a value. Its declaration always needs a value.
      const a; // Wrong: Syntax Error
      const b = 1; // Correct Way
      
    2. const cannot be re-declared nor re-assigned
      const a = 10;
      a = 11; // Wrong: Re-assignment not allowed
      const a =  11;  // Wrong: Re-declaration not allowed
      
    3. The const declaration although create a read-only reference to a value but it doesn't means that it's immautable. If we save a an array or an object then we can update those. But can't re-declare the variable;
      const a = 10;
      a = 20; // Wrong
      
      const obj = {};
      obj.name = "Ronit"; // Correct
      
      const arr = [10,20];
      arr.push(30); // Correct
      

 

Syntax

const varname [= value];

varname here is any legal identifier to give a name to the variable

value here is the initial value of the variable. If we don't assign any value to a variable then by default it's undefined.

 

Scope

The scope of a variable declared with const is its current block in which it's declared. The variable declared using const is not available outside the block it's declared. It's the same as let;

Hoisting

If we talk about the variables declared with const, their declarations also gets hoisted but their values don't get initialized with undefined even until it's definition is evaluated.  So the variable declared with const remains in "Temporal Dead Zone" from the start of its block scope until its definition is evaluated. It's the same as "let".

What is let?

let is a new keyword in ES6 used to declare a variable and optionally define a value to it. let keyword is introduced into the ES6 being inspired from "let" in Maths, where we assume a condition or a value for a limited period of time. The let keyword in ES6 is also brought with a thought that if you need a variable with limited use and for a limited time then use it. The best example of limited time and scope is for where we need a variable for looping purpose.

Syntax

let varname [= value];

varname here is any legal identifier to give a name to the variable

value here is the initial value of the variable. If we don't assign any value to a variable then by default it's undefined.

 

Scope

The scope of a variable declared with let is its current block in which it's declared. The variable declared using let is not available outside the block it's declared. For more clarity let's see some examples:-

 

  1. Assigning a value to an undeclared variable will make it's scope global
    function test(){
      let a = 1;
    }
    test();
    console.log(a); // a: a is NotDefined

    .

  2. Declaring a variable inside a for loop definition will keep its scope limited to for-loop only. Which means let prevents Variable Leakage.
    function test(){
      for(let i=0;i<10;i++){
        console.log(i); // i: [0-9]
      }
      
      console.log(i); // i: ReferenceError, a is not defined
    }
    test();
    console.log(a); // Uncaught ReferenceError: a is not defined
  3. The variable declared using let keyword are not allowed to be redeclared within the same scope(functional/block). It gives syntax error on redeclaration.
    function redeclareMe(){
      let newVar = 1;
      let newVar = 2; // Syntax Error
    }
    

 

Hoisting

If we talk about the variables declared with let, their declarations also gets hoisted but their values don't get initialized with undefined even until it's definition is evaluated.  So the variable declared with let remains in "Temporal Dead Zone" from the start of its block scope until its definition is evaluated. Let's see an example to understand it better.

if(true){
  console.log(b); //b: Undefined
  console.log(a); // a: ReferenceError due to Temporal Dead Zone

  var b = 10;
  let a = 20;

  console.log(a);
  console.log(b);
}

If you understand the Hindi Language then you can watch my video also on the difference between var, let and const.