Hoisting and Temporal Dead Zone in Javascript

Before getting into the details of hoisting and temporal dead zone, Let's see a code snippet to see the pitfalls of hoisting. So that we can handle it in a better way. In the below code snippet we trying to clear the cart when the noOfProducts is empty

if(!noOfProducts) clearCart()
var noOfProducts = 5;
function clearCart(){
    console.log("All products are deleted")
}
//Output is: All products are deleted

But when you run this code you will see the clearCart function will be executed and the console log will be printed All products are deleted. This happens because of hoisting. Now let's see about hoisting and the temporal dead zone in this blog.

What is Hoisting?

Hoisting is nothing but making some types of variables accessible/usable in the code before they are
actually declared. Let's see in a detailed way.

In javascript, the execution takes place in two phases,

• Memory creation phase
• Code execution phase

In the memory execution phase, every variable and function is assigned to memory with some values for it. This phenomenon is called hoisting. Let's dig deep and see what is that some value for each in the case of variables and functions.

Hoisting in Var

When you declare a variable with var,

• In the memory creation phase the special keyword called undefined will be assigned to the variable.
• so when you try to access the variable before the declaration undefined will be printed and after the initialization, the value is printed
• If we fail to initialize the variable in the whole program, then the variable will have the value as undefined till the end of the program.

Let's see with an example code.

console.log(a) // undefined
console.log(b) //undefined
var a=10;
var b;
console.log(a) // 10
console.log(b) //undefined

Hoisting with function declaration

In the case of function declaration,

• In the memory creation phase, the memory for the function is allocated with the whole code in the function.
• This makes the ability to call the function before its declaration in javascript.

Let's see with an example code.

console.log(printName) 
//function printName {
//   console.log("Manikandan");
//}
console.log(printName()) //Manikandan
function printName(){
   console.log("Manikandan");
}

Temporal dead zone

In the case of a variable declared with const and let,

• These variables are hoisted but can't be accessed by us until the declaration happens.
• When we try to access these variables we will get the error ReferenceError: Cannot access 'variableName' before initialization
• The place in between where we try to access the variable before its declaration and till the line of declaration is said to be that the variable is in a temporal dead zone.

Let's see with an example code.

1. console.log(a) //ReferenceError: Cannot access 'a' before initialization
2. console.log(b) //ReferenceError: Cannot access 'b' before initialization
3. let a =10;
4. const b=20;
5. console.log(a) //10
6. console.log(b) //20

• The place in between line 1 and line 3 is said as a temporal dead zone of the variable a
• The place in between line 2 and line 4 is said as a temporal dead zone of the variable b

Hoisting with a function expression and arrow functions

Hoisting with a function expression and arrow function happens based on the variable type it is assigned to,

• If functions are assigned to var and if we try to access the function before declaration we get undefined
• If functions are assigned to let and const and if we try to access the function before declaration we get an error and it will be in the Temporal dead zone.

Let's see with an example code.

//Function expression
console.log(printFirstName) //undefined
printFirstName() //TypeError : printFirstName is not a function
var printFirstName = function (){
console.log("Manikandan")
}
printFirstName() //Manikandan

//Arrow function
console.log(printLastName) //ReferenceError: Cannot access 'printLastName' before initialization
const printLastName= ()=>{
console.log("Subramaniam")
}
printLastName() //Subramaniam

Practice to be followed to avoid hoisting pitfalls

As we saw initially hoisting can cause some serious issues if not handled properly to avoid that,

• Access variables only after their initialization
• Call the function only after its declaration
• If Both function and variable need to be accessed before then handle with caution

Conclusion

Summary

• Hoisting is nothing but making some types of variables accessible/usable in the code before they are actually declared
• Hoisting Summary table

Resourses

• MDN Hoisting