Hoisting and Temporal Dead Zone in Javascript
Tags: javascript, hoisting, webdev, beginners
Published: 2022-06-06 08:48:06

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

```javascript
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.

```javascript
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.
```javascript
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.

```javascript
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.
```javascript
//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

<div class="hn-table">
<table >
<thead>
<tr>
<td></td>
<td>Hoisted </td>
<td>Initial value</td>
</tr>
</thead>
<tbody>
<tr>
<td>function declarations</td>
<td>yes </td>
<td>actually function</td>
</tr>
<tr>
<td>var variables</td>
<td>yes </td>
<td>undefined</td>
</tr>
<tr>
<td>let and const variables</td>
<td>yes </td>
<td>TDZ (temporal dead zone)</td>
</tr>
<tr>
<td>function expression and arrow functions</td>
<td colspan="2" >Based on variables it assigned to var/let,const</td>
</tr>
</tbody>
</table>
</div>

### Resourses

- [MDN Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)