Hoisting & temporal dead zone In JavaScript
Tags: javascript, webdev, javascripttips, hoisting
Published: 2022-04-16 13:32:57

In JS hoisting refers to the process in which interpreter moves the variable, function or classes deceleration to the top of their scope(to know more about scope refer to the video ) prior to the execution of the code.

{% youtube HFOXWsNLCLA %}

First let’s see some examples to understand the concept of hoisting

```jsx
var name;
console.log(name); //Returns 'undefined' from hoisted var declaration
name="mayank"
```

```jsx
console.log(num); // Returns 'undefined' from hoisted var declaration (not 10)
var num = 10; // Initialization and declaration.
console.log(num); // Returns 10 after the line with initialization is executed.
```

```jsx
fun();

function fun(){
  console.log("Hello from the fun");  // Returns Hello from the fun
}
```

Now we have seen the few examples and on the basis of those examples let’s understand the concept of hoisting. but first what actually hoisting means.

In JS hoisting refers to the process in which interpreter moves the variable, function or classes deceleration to the top of their scope(to know more about scope refer to the video in eye button) prior to the execution of the code.

Moving to the top doesn’t mean it literally move the variables/functions to the top of the scope it’s just the basic understanding but it’s not actually right

actually the execution context plays the role in here, when execution context begins it has two phases **creation phase & execution phase.** 

 In creation phase memory allocation takes place for the variables and if the variable is declared with var keywork then a special value undefined is assigned to it.

and then execution happens in execution phase and it just simply print the value.

 

<aside>
💡 JavaScript only hoists declarations, not initializations!

</aside>

now let’s go back to examples and try to understand the hoisting in case of  variable declarations.

```jsx
console.log(num); // Returns 'undefined' from hoisted var declaration (not 10)
var num = 10; // Initialization and declaration.
console.log(num); // Returns 10 after the line with initialization is executed.
```

in this case as soon as the execution context got created first the variable num get allocated in memory and initialized with special value undefined.

and then begins the execution when first line got executed the value is undefined then num got initialized with value 10 in second line and in 3rd line it prints value 10. so now you got how it’s working in case of variables declared with var keyword one thing to keep in  mind, it doesn’t work in same way for let and const that we will see in later part of this video.

Now let’s understand function hoisting. It’s kind of same as in case of variables.

as the execution context start the creation phase put the function declaration into the memory and the execution phase do its work of executing the function.

Let’s see this with the help of an example as well

```jsx
fun();
function fun(){
  console.log("Hello from the fun");  // Returns Hello from the fun
}
```

so in this example The execution context creates the memory for the function and puts the entire function declaration of `fun` in it.

 and the execution phase executes the function

Putting the entire function declaration ahead into the memory at the creation phase is called `Function Hoisting`.

```jsx
fun();

var fun = function() {
  console.log("Hello from the fun");  
}

//returns error: Uncaught TypeError: fun is not a function
```

But why we are getting error in this code🤷‍♂️ for this the reason is the here the function is not being hoisted instead it is assigned to a variable and that variable is being hoisted and when a variable got hoisted, in that case variable name moves to the top of the current scope — not the assignment, which is totally different in case of function hoisting as When a function declaration is hoisted, the whole function body is moved to the top of the current scope,  so in this case fun is being treated as variable declared with var and before execution of line 2 & 3 fun is equal to undefined that’s why we are getting this error  fun is not a function  as we are trying to invoke a variable which is not a function

there is a reason for this and that is JavaScript only hoists declarations, not initializations!

before ending this video let’s see how variable hoisting with let and const differs from variable declared with var keyword. let and const variables are also get hoisted but unlike var there is no default initialization value.

a reference error will be thrown if the variable declared with let and const is read before it’s initialization.

let’s see this with an example.

 

```jsx
console.log(num); // error: Uncaught ReferenceError: Cannot access 'num' before initialization
let num = 10; // Initialization and declaration.
```

```jsx
console.log(num); // error: Uncaught ReferenceError: Cannot access 'num' before initialization
const num = 10; // Initialization and declaration.
```
{% youtube 9KutOinEc70 %}

there is one small concept known as **Temporal Dead Zone** let’s understand that as well here only

The Temporal Dead Zone is a behavior in JavaScript that occurs when declaring a variable with the let and const keywords, but not with var. In ECMAScript 6, accessing a let or const variable before its declaration (within its scope) causes a ReferenceError. The time span when that happens, between the creation of a variable’s binding and its declaration, is called the temporal dead zone.


Thanks for reading.

"Don't miss out" Follow my Social handles👉
[Subscribe my YouTube channel😊](https://www.youtube.com/mayanktyagi)
[Instagram😊](https://www.instagram.com/the_cs_guy_/) **||** [Twitter😊](https://twitter.com/tmayank860)

If you find this helpful and want to support💲 [Buy Me Coffee☕](https://www.buymeacoffee.com/mayanktyagi)