Hoisting of var, let and const in javascript

Do you want to know how the hoisting of var, let and const are happening in javascript, we will see in this blog 🤩🤩🤩

Before going into the context of the blog, we will see some sample codes…

Hoisting in var

In the above code while we are trying to access masterName variable before initialization we are getting undefined .

let’s see what we will get for let and const.

Hoisting in const

Hoisting in let

Oops what is happening, the phenomenon responsible for the above is called Hoisting in javascript.

Javascript execution occurs in 2 phases

• Creation Phase
• Execution Phase

In the cration phase javascript allocates memory for the variable and function to execute in the execution phase .

Hoisting occurs in the creation phase where the variable and function are hoisted in the memory of the execution context, which is made available before the code runs.

so in the hoisting of the var it initializes the variable and assigns undefined to it and in the execution phase then the real value is assigned instead of undefined .

To check this in the real-time, go to the dev tool, keep the break point in the first line of code, where no code is executed, now we will check magic happen below…

Memory Creation Phase _ I

Expand the global tab on the right side of the screen and dig deeper, you will see variable masterName that we declared.

Memory Creation Phase _ II

Now we can see variable name masterName in the right side with the value undefined assigned to it.

This all happens in the memory creation phase where not a single line of code gets executed.

Execution Phase

so in the memory creation phase each variable is hoisted for the purpose of code execution.

Now when we executed the code and check the global tab, the value is assigned to the masterName variable.

Summary

Javascript has two phases while executing code,

• creation and execution phase

where in the creation phase, Hoisting for the variable and function is done, which the code can access during execution phase .

Now then why we are getting error while accessing let and const before initialization.

Are they not hoisted? or They are hoisted in a different manner?

let and const are also hoisted but not same as var , here the hoisting takes place differently, We can’t access let and const until a value is assigned to the variable.

Hoisting of let

In the above picture, we can see agentName is hoisted, but in a different memory space (script), because of the let declaration. This applies to const too.

where we can see variablerole in the Global tab.

This place is called Temporal Death Zone , where we can’t access a variable until a value is assigned to it, otherwise we get Reference error .

In short, Javascript hoist var indifferent manner and let and const indifferent manner.

var :

var is hoisted in a way where undefined is assigned to the variable in the memory creation phase and the value is assigned in the execution phase, where we can access varbefore initialization, without getting any error.

let, const:

whereas letand constare hoisted in the Temporal death zone , where we can’t access the variable until a value is assigned to it in the execution phase.

Like above functions are hoisted is js indifferent, please read how functions are hoisted in js by yourself…

Thank you Happy weekend 🍺

Feel free to follow me in LinkedIn ❤️

https://in.linkedin.com/in/sathithyayogi

If you have any feedback , mail me at sathithyayogi99@gmail.com.