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!