Variable environment

Everything in Javascript happens in an execution context before moving toward hoisting and TZD lets understand what is execution context and how it works behind the scenes. So whenever a JS file runs a global execution context is created and it consists of two components first one is the "variable environment" and the second one is the "Thread of execution".

In a variable environment, all of your functions and variables are stored in key and value pair, and this process of storing all variables in key and value pair is done even before a single line of code gets executed and the second component is a thread of execution where all our code gets executed line by line.

Hoisting in Javascript

Hoisting is a phenomenon where you can access variables even before initialization and as you now know that global execution context is created even before a single line code gets executed and all code in the file gets scanned for variable declaration and each variable assigned value "undefined" in the initial stage and in the thread of execution all our code gets executed line by line.

var n = 2
function square(num){
       var ans = num * num
       return ans
}
var square2 = square(n)
var square4 = square(4)

This is how the above code is assigned a key and value in the variable environment of the global execution context, think of this huge box as the execution context and memory component is our variable environment, and the code component is our thread of execution. This is what happens in a variable environment even before a single line of code gets executed.

This variable environment is nothing but your global memory or your window object from there you can access this variable anywhere in your code and that's the reason when you try to console a variable before its initialization it gives a special keyword undefined and that is what Hoisting is or this is called as hoisting.

let's understand hoisting with an example

console.log(a) // undefined
var a = 2

If you run the above code you will get undefined in the console and this is because this var variable is hoisted as undefined in the variable environment even before the thread of execution starts its scanned all JS file code and did a variable declaration and assigned all variables a value which is undefined in the initial stage and when line number one gets executed which is console.log(a), we get undefined as in global memory it is assigned a value undefined.

Temporal Dead Zone in Javascript

When you declare any let and const variable with a value and try to console log it before initialization you will get a error (ReferenceError: Cannot access 'a' before initialization) and this happens because of TZD. When global execution context is created and scanned all your JS code it assigned an undefined value to the let and const variable but in different scope which is only accessible if it has any value in it let's understand better with an example.

console.log(a) // ReferenceError: Cannot access 'a' before initialization
let a = 10

Here if you try to run the above code first Global execution context will be created and then all code of that particular JS file gets scanned and let and const variable get hoisted.

Yes, let and const variables are also hoisted but in a different scope than global which has a script scope name you can see this if you run this code by using the debugger and you can find a script keyword in the scope and you will see all let and const variable is hoisted there with a value undefined and this is why if you try to access this let and const variable before initialization it will give you an error that variable is not defined because it's stored in different scope and you can only access this scope when let and const variable has initialized with some value.

In short, TZD is the time since these let and const variables are hoisted till the time when this variable gets some value in it the time between that is Temporal Dead Zone.

This is how it will look when you run the above code with a debugger. The script in scope is the plays where all your let and const variables are stored and only accessible until it has some value in it.

That's the reason if you run the above code it will give you ReferenceError: Cannot access 'a' before initialization in the console and that's beacuse of TDZ.

Conclution

Hoisting and TDZ may sound complicated. It is not. If you know variables, scope and variable declaration, and initialization work it will be easy for you to understand this and you just need to know how JS works behind the scene what is the global context, and what are their components all this I covered in this blog but if you still have any confusion I will suggest you watch Namaste JS I am providing some links of Namaste JS videos from where I learn all this stuff.

References

• How JavaScript Code is executed? How js works?
• Hoisting in JS Hoisting in JS
• TDZ in JS TDZ in JS