Have you come across the word Hoisiting while learning javascript, or from the interviewer while giving the interview.

When I first read the word Hoisting, then I thought that they may be talking about hosting and have made a spelling mistake.

But then I came to know that Hoisting is actually a concept in javascript that moves the variable and function declaration at the top of our code. One thing which is important to note here is that it moves only the declaration and not the assignments.

var num=10;

so here only "num" will be hoisted, not the value of num. If you will try to access num before initialization then it will return undefined.

Have you ever thought about why you are able to call functions in your code before their declaration? That is because of hoisting.

Now let's dig into understanding what is variable hoisting.

Hoisting in Let, const, and var.

Hoisting in Var - Var is hoisted with the value as undefined till the time it has been assigned a value. let's try to understand this with the help of an example.

you can see that our variable is initialized on line number 3 with the value of 12, but when we are consoling its value on line number 1 then it is giving undefined.

This has been done because of hoisting. As the declaration of our variable is moved to the top, but not the initialization. So whenever any var variable is hoisted then it has been given the value of undefined by the javascript.

if you will try to console variable num after line 3. Then it will return 12 because, on line number 3, the value of our variable has been changed to 12.

Hoisting in Let and Const - Let is also hoisted in javascript that means that all the declarations of let are also moved to the top of the code. But it has not been initialized with any value. let's try to understand it with the help of an example.

Here you can see that when we are trying to console the num on line number 1, it is showing the reference error. This is because let and const are also hoisted but they have not assigned any value, which leads to this error.

From line 1 to line 3 our code is in a temporal dead zone which means that our variables are in scope but they are unreachable.

Function and function expression hoisting.

Function hoisting - All the function declarations are hoisted in the javascript. As soon as functions are declared in javascript they are moved to the top, this is why we are able to access them before declaration also.

Function expression hoisting - Function expressions are not hoisted. But the variable in which they are stored is hoisted. This means that whenever you will declare a function expression then javascript will treat function declaration in expression as initialization, so it will hoist the variable only.

So this was from my side. I hope that you found this article meaningful. If you want to give any feedback. then please let me know through the comment section. Feedbacks will be appreciated.

Thank you.