Difference between the 'let' and 'var' keywords

If you have read the first blog in this series about hoisting, you would know what hoisting, declaration, and initialization are. Knowing them will help understand this blog, so, if you haven't read the first part, please do read it, it's just a 2-minute read! Now, onto the let and var keywords.

The difference concerning hoisting

Using the var keyword

When variables are declared using the var keyword, the variable will have a default initialization value of undefined. To make more sense of this, let's look at the code below.

var y = 1; //No hoisting
console.log(y + " " + z);
var z = 2; //Only the declaration will be hoisted

//output : 1 undefined

Now, what we understood from the above code is that when we try to log the value of z, we know that because of hoisting, the declaration of variable z will be allocated memory before the execution starts, but even though the initialization is done, remember that javascript only hoists the declaration and not the initialization and because variables declared with var keyword has the default initialization value of undefined, the output will be 1 undefined.

Using the let keyword

let y = 1; 
console.log(y + " " + z); // Trying to access z before initialization
let z = 2; 

//output : error

Now, as we can see in the above code, we are using the let keyword instead of the var keyword. Even though the let keyword is hoisted, if the line in which the variable is initialized is not executed and some code tries to access the variable before the initialization, there will be a reference error saying that z is not defined. This is the difference concerning hoisting. Now, let's look at the difference concerning scopes!

Difference concerning scopes

Using the var keyword

When a variable is declared using the var keyword, it is declared globally or locally in a function, where the scope will be of that entire function regardless of the block scope. Let's look at an example:

{ // global scope
    function useVar(){ // function scope
        var x = 1;
        if(x === 1){ // if block scope
            var x = 4; //original variable is updated to 4
            console.log(x); // 4
        }
        console.log(x); // 4
    }
}

As you can see, by logging both the x's, we get the same values. As the var keyword is not limited to the scope of the block it was declared, when we update the variable x in the if block, the original value of x which was 1 is updated to 4!

Using the let keyword

Now, let's look at the let keyword. When a variable is declared using the let keyword, the scope of this variable will be limited to the scope of the block where it was declared. To understand this, let's look at a similar example as the above.

{ // global scope
    function useLet(){  //function scope
        let x = 2;
        if(x === 2){ // if block scope
            let x = 6; //new variable limited to the scope of if block
            console.log(x); // 6
        }
        console.log(x); // 2
    }
}

As you can see, when we log the values of both x's, we get a different value which means that the variable x defined before if block is not changed as it has its own scope.

This has been the difference between the let and the var keywords! If you learned something new or if you understood something better, let me know in the comments!