Hoisting and Temporal dead zone(TDZ) in Javascript.

Hoisting and Temporal dead zone(TDZ) in Javascript.

Table of contents

No heading

No headings in the article.

When we write javascript code and run it than the first thing would happen is It creates global execution content. Global execution has two phases 1. Variable environment or Memory creation and 2. Code Execution or Thread of Execution

So in the variable environment phase javascript allocates memory to all the variable and function of program and variable is initialized with initial value undefined by default and function is initialized with it's code itself. Than after in the code execution part javascript execute all the code synchronously line by line. That's how javascript run the program.

So Now what actually hoisting is in javascript ??

Hoisting

So when javascript runs the program firstly it allocates memory to variable and function so we can use that in program before it's declaration. So javascript moves all the function and variable declaration to the top of the program that's called hoisting.

console.log(x); // It prints undefined
var x = 7;

So above you can see that we are accessing variable X before it's declaration and still javascript does not gives us any error just because of hoisting. So the variable X print undefined that means variable X is present in the memory location but it has not any value yet so javascript set it's initial value to undefined by default

Same like above we can the call the function in javascript before function declaration and it works perfectly

square(2); // It prints 4

function square(a){
    console.log(a*a)
}

So variable with var keyword hoisted globally and stored into global object so we can access it anywhere in the program without any error but variable with let and const keyword works differently than the variable with var keyword. They are also hoisted but they goes into Temporal dead zone

Now what exactly Temporal dead zone is ??

Temporal Dead Zone (TDZ)

Temporal dead zone is area of program where the variable is not initialized with any initial value like variable declared with var initialized with undefined. So we can not access it before it's declaration and if we try to access it gives us reference error

so the let and const are also hoisted in javascript but they are in temporal dead zone. In the start of program javascript also allocates memory to let and const but in separate object not in the global object and javascript does't sets any initial value to them.

so if we try to access value of let and const it gives us reference error says that variable is not defined. you can see below that.

console.log(x) // Its gives reference error because of TDZ
let x = 7;

console.log(y); // Its gives reference error
const y = 8;

so the the let and const are in Temporal dead zone until code reaches to the declaration part of them after that they come out from TDZ and works like other variable

console.log(x) 
let x = 7; // End of TDZ

console.log(y); 
const y = 8; // End of TDZ

Thank you for reading it to the very end.