Hoisting in JavaScript and why we need

Photo by Bharat Patil on Unsplash

In my last post, we have discussed all about scope. When we started looking in-depth we thought like how come var doesn’t through error even if its undeclared. So we are going to discuss about hoisting and what actually it is happening.

Hoisting variables

So let’s take a simple example (here compilation phase means after hoisting)

In image 1 what it happens is first it will do a run through the code and defines a and b. Meant first the compilation of variables and function expressions will happen from lines 1–6 before execution. After that we can see from image 2(compilation phase), variable declaration of a and b has moved to the top of the scope. This is called hoisting or hoisting the variables and functions to the top of the scope. What happened is it declared the variables in the compilation phase and left the assigning part.

Hoisting functions

Let's take an example of hoisting the functions (here compilation phase means after hoisting)

In the above code, in the normal phase on line 2, it throws d is not a function error. In the compilation phase, we can see that, why it throws error. b()is function declaration so it will be hoisted to the top of the scope but d()is function expression. Function expression doesn’t hoist the function so we can see that as it’s assignment.

Hoisting problem

Let's consider below example

So here we have declared fun() twice. So after the hoisting of variables and function, only the last fun()will be there. Because the first function will be overridden by the second fun(). What we can take away from this is there is no need to declare multiple times and also don’t share the same name.

Why javascript does hoisting?

Why has to compiler take the declarations ahead of time?

Because it helps to solve the Mutual Recursion problem. So then what is mutual recursion? It refers to two or more functions calling each other let say a would call b, b would call c, c calls a till some terminating point. So mutual recursion problems wouldn’t be impossible to solve in programming languages without the concept of hoisting. Let's take a programming example so we would get a better idea.

Here a, b and c calling in mutually recursive way so one of them will always late. In an interpreter language a calls b then b should be above a. Then b calls c and c calls a for that c should be in top. So to solve this there should be a concept of declaring the variables and function at the top. So that is hoisting.

Does let hoist?

In the whole discussion about hoisting in every example, we have declared as var and not as let. So what we meant is let does not hoist the variables. Let’s take an example

So this is called as temporal dead zone where you cannot access a variable before it is defined.

Originally published at https://www.allaboutjavascriptworld.com on June 27, 2020.