Hoisting And Temporal Dead Zone

Hoisting and temporal dead zone are two important terms in javascript but many people are confused about how they work. So don’t worry we are going to discuss everything about hoisting and TDZ in this blog. So, grab your coffee and snacks, and let’s get started with hoisting.

Hoisting

As we know that when the javascript engine executes the javascript code, the global execution context is created and, the global execution context has two phases, 1. Creation 2. Execution

During the creation phase, the javascript engine allocates the memory to a variable and function. if we are not defining a variable at top of the code, it gives an error for block scope, and for var it gives undefined.

Let’s take an example

console.log(counter);
var counter=0;

javascript engine executes code line by line and we referenced the variable before initialization that’s why it gives the undefined as result.

For let and const you can not reference a variable before initialization. If you referenced a variable it gives an error.

Example

console.log(counter);
let counter=1; // Uncaught ReferenceError: counter is not defined

function hello()
{
console.log(counter);
let counter=1;
}
hello();

output:

Uncaught ReferenceError: Cannot access 'counter' before initialization

Here counter is a block scope, in block scope if we are trying to access a variable it gives an error that’s why the javascript engine moves the variable declaration to the top of the script. Declaring all the variables to the top of the script code. This feature is known as hoisting in javascript.

Temporal Dead Zone

A temporal dead zone is the area of block scope where you can not access the variable until the computer initializes it with a value. Block scope is a pair of curly braces ({…}) used to write multiple statements.

Initialization means when you assign some value to a variable.

We can see the above example when we got some reference error. We got that error because we are trying to access a variable from outside the temporal dead zone. But where does the TDZ begin and ends? Let’s find out together.

A block’s(let and const) temporal dead zone starts at the beginning of the block scope. It ends when the computer initializes the value to a variable.

Here’s the example

{  //TDZ starts
 // TDZ continues

 console.log(counter); // returns reference error because it is still in TDZ

let counter=1; // computer initializa the value, TDZ ends here

//TDZ does not exist here
}

Javascript will return a reference error because we trying to console.log() to access the counter before its complete initialization. In other words, we invoked counter within TDZ.

Here is how you can access the variable successfully

{
//TDZ starts
 // TDZ continues

let counter=1; // computer initialize the value, TDZ ends here

console.log(counter);  // returns a value 1

//TDZ does not exist here
}

Here is the another example

{
//TDZ starts
 // TDZ continues
let counter ;  //TDZ ends here

console.log(counter);  // returns undefined  because it doesn’t assign a value

counter=1;

console.log(counter);  

//TDZ does not exist here
}

HOW does var’s TDZ differ from let and const? in other words, when we computer hoists a variable using var, it automatically initializes the variable with the value undefined.

Can you guess the output of the below code snippet?

console.log(b);
var b=10;
function hello(){
console.log(b);
console.log(a);
let a=20;
}

Output:

Undefined
10
ReferenceError: Cannot access 'a' before initialization

I hope this blog is useful for you to understand the hoisting and TDZ, where TDZ starts and end. Thank you for reading. Share your valuable feedback in the comment section.