After the arrival of ES6 in 2015, many amendments were made to make JavaScript more powerful like improved syntaxes, introduction to modules, promises & async/await, and many more. New methods were introduced to declare variables which were let and const. JavaScript was running on the 'var' declaration from the beginning. To understand the critical differences between these, follow along.

var, let and const help in declaring variables, to judge the differences between these there are primarily three factors involved.

• Scope of Variables.

• Redeclaration and Reassignment.

• Hoisting.

Let's understand the differences by accounting for these factors one by one.

Variable declarations using var

1. Scope of variables declared using var - Variables declared using var can have both global and local scope. Variables defined within the function tend to have a local scope and outside of the function have a global scope. When a variable is declared in a global scope it is accessible everywhere in the code.

var name = "John";
function greet(){
var msg = `Hi I am ${name}.`;
console.log(msg);
}
console.log(name); //John
greet(); //Hi I am John.

And a locally declared variable is only accessible to that local scope only. Accessing that variable outside the scope will give a reference error.

function greet(){
var name = "John";
var msg = `Hi I am ${name}.`;
console.log(msg);
}
console.log(name); //ReferenceError: name is not defined
greet(); //Hi I am John.

1. Redeclaring and reassignment using var- Using 'var' one can easily redeclare and reassign a variable, which is not a good practice.

    //Redeclaring
    var num = 10;
    console.log(num);//10
    var num = 20;
    console.log(num); //20
   
    //Reassigning
    var num = 10;
    console.log(num);//10
    num = 20;
    console.log(num);//20
   

   1. Hoisting in var - Variables declared using var are always hoisted at the top of their global or local scope respectively which simply means 'var' is accessible way before the code execution reaches the declaration line. After the 'var' is hoisted it is assigned a value undefined by the JavaScript itself (more about the 'undefined' in the first part of the series).

       console.log(name);//undefined
       var name = "John";
       console.log(name);//John
      

Variable declarations using let

1. Scope of variables declared using let - Variables declared using let have the global scope, local scope, or block scope. A block scope comprises in between two curly braces, usually in if-else, loops, and switch statements.

    //Global Scope
    let num = 10;
    function operation(){
    let sum = num+240;
       if(sum>100){
       let num2 = 340;
       console.log(sum);
      }
    console.log(num2);
    }
    console.log(num);
    operation();
    /*
    10
    250
    ReferenceError: num2 is not defined 
    */
   

   The given error occurred due to the inaccessibility of the variables outside of its block scope (created by the if{ } statement). Although we can access the variables declared in the local scope anywhere in that particular local scope such as in the case of the 'sum' variable.

2. Redeclaring and reassignment using let - Variables declared using let cannot be declared but can be assigned a different value for further use.

    ////Redeclaring
    let num = 10;
    console.log(num);//10
    let num = 20;
    console.log(num); //SyntaxError: Identifier 'num' has already been declared
   
    //Reassigning
    let num = 10;
    console.log(num);//10
    num = 20;
    console.log(num);//20
   

   1. Hoisting with let - Variables declared using 'let' are also hoisted at the top of the global or local scope. But unlike var, such variables cannot be accessed as they are not assigned any value. In the case of var, after hoisting the variables were assigned the value of undefined.

       console.log(name); //ReferenceError: Cannot access 'name' before initialization
       let name = 'John';
      
       function greet(){
       let msg = `Hi I am ${name}.`;
       let name = 'John';
       console.log(msg);
       }
       greet(); //ReferenceError: Cannot access 'name' before initialization
      

Variables declarations using const

1. Scope of variables declared using const - const and let share many similarities. Variables declared using const can also have global, local, or block scope like that of 'let'. (Similar examples like that of 'let').

2. Redeclaring and reassignment using const - Redeclarations and reassignment of values both are not possible in the case of variables declared using const.

    //Redeclaring
    const num = 10;
    console.log(num);//10
    const num = 20;
    console.log(num); //SyntaxError: Identifier 'num' has already been declared
   
    //Reassigning
    const num = 10;
    console.log(num);//10
    num = 20;
    console.log(num);//TypeError: Assignment to constant variable.
   

3. Hoisting with const - Similar case as with that of 'let'. Variables declared using const are hoisted to the top of the global, local, or block scope respectively but they cannot be accessed as they are not given any initialization values like in 'var'.

I hope this article will help clear out the fundamental differences between let, const, and var. Whenever a quick recapitulation is needed, refer to the cover image of the article.