Difference between “Var, Let & Const” with the concept of “Temporal Dead Zone & Hoisting”
Hi, Let’s discuss the most common js question and the answer.. you all already know that Var is Global scoped, and Let and const are only block scoped.
But……..?
is that the only answer to the question? What about if that variables are inside the function or in setTimeout or can we use them before declaring or why we even need var then if let is the doing everything?????.
Let’s discuss that in-depth. Just to understand the difference between Var, let & const we need to know that how javascript compiles the code.
Let’s understand that by a simple code.
Js engine read the whole code and take all variables and assign memory for them and give them a value that is undefined and host all of them at the top of the environment. This is know as Hoisting. (Js also host functions)
Let’s move both console logs at top of the declaration…..
Now a is still undefined but for b it’s giving an error which simply says that we can’t access b before initialization but it’s declared somewhere but we can access that until we give that any value.
So when js hosts the variables at the time of hoisting, JS only host Variables declared with var keyword in global context or scope but the variable declared with let or const is hosted in another private scope which is not accessible to the global scope and only becomes accessible when we assign a value to it.
So let’s assign some value to both variables
a will be undefined and for line number 2 and 4 we’ll get the same error that we can’t use that before its initialization. But in line number 6 we can see the value of b will be 0. so till line number 4 we can’t access b but after that, we can access it.
The time from line 1 to line 4 where the variable declared with let keyword is not available is known as the temporal dead zone. The time till let doesn’t get initialized and declared in a separate scope is known as TDZ (Temporal dead zone).
========================================
That was the one point of view for Let and Var. Let see what happens when we use both inside a function how the most common definition of block scope works.
When we use var and let inside any block (block means between {. ..code…}) they both work differently depends on the factor where we are declaring it.
When we declare a variable using the var keyword, the scope is as follows:
- If the variable is declared outside of any functions, the variable is available in the global scope.
- If the variable is declared within a function, the variable is available from its point of declaration until the end of the function definition.
When we declare a variable using the let keyword it will follow the scope where it’s declared where we are declaring it.
In both examples, we can’t access any variable which is declared inside a function outside of the function. Which explains that there is no difference when we use both inside function even if we declare both outside the function and use we can use both inside functions.
Then what is the real concept behind block scope ?? Why everyone says that var is globally scoped but let’s is not?
Let’s try to figure out that using one more example
Both are simple functions to print values from 0 to 4 using for loop but with a simple difference of declaring a variable ‘i’ using var and let. but the output of both will be different due to the concept of block scope. Let’s first check the output.
As we can see in the ‘let’ declaration we can’t use that outside the for loop but in var, we can use that after for loop but not outside the function. So that means that…. but first, let’s see one more example before coming to any conclusion.
If we declare variables outside the for loop statement then both will work the same as earlier. So what’s the difference ???? 🤔🤔🤔🤔
The real difference is that when we declare any variable using let it will not available to its parent’s scope (which is {….} ) but for var, it goes to global or parent scope and when we are inside the function global scope for the function is same as function scope which is from the start of the function to end of the function (Execution context of function).
Let’s see some more examples to understand it better.
we only change from for loop to {} and we can see the same behavior. So it’s not about the for loop and any other statement. It’s about the scope which is defined by {} and yes for var it takes parent scope not only just parent it takes the whole function scope and declares variable at the top to the function scope and for let it consist only of its own scope.
Let’s see an example to explain the above lines
========================================
Now come to 3rd point between let and var is redeclaration. we can declare a variable many times in same scope if we use var keyword but we can’t do the same with let.
Const works the same as let but just the difference is that we can’t reinitialize it.
In summary, let is block scoped of its own scope and we can’t use this before declaring it and we can’t redeclare it in the same scope.
var is globally scoped of its parent or parent’s parent scope and we can use this before declaring it with an undefined placeholder and we can redeclare it in the same scope.
There are so many things related to hoisting and declaration of keyword-based on many different situations like inside setTimeout, IIFE, and many more but the base concept of all will remain the same base on all above 3 concepts with their own concepts like event loop, encapsulation and many more but the concept of var and let will remain same. Let’s discuss that in some other post.
If you have any questions, as always, reach out via Linkedin ❤
Further Read:- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
Thanks
