Hoisting in JavaScript.
Tags: webdev, javascript, beginners, programming
Published: 2021-07-16 22:04:01

**Interviewer** : Can you explain me the concept of *Hoisting?*
**Dev** : Sure. Hoisting is a phenomenon in which JavaScript magically🤺 moves the code to the top.
**Interviewer** :   ![confused](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ynlxt7fwl6ebkxengme.jpg)
Can you dive a little bit more deep?

**Dev** : Sure. Gives an example where we can call a function on a line which is before the function initialization.

**Interviewer** : *Hmm.*

*In the end you wont get the Job.*

I too have seen many *tutorials, blogs and sites* where they mentioned the same. But programming is not magic. There lies a logic. So, lets actually see how actually *HOISTING* works.


We know that when we run a script, a Global Execution Context (GEC) is created which consists of two phases. *Memory creation phase* and *Execution phases* i.e. run phase.
During this *memory creation phase* all the magic happens.

As soon as we run a script all the *variables* and *functions* are allocated space in the memory. This happens even before the first line of code is executed. This is the reason we are able to call/access *functions or variables*  on a line which is before their *initialization* and not face any errors. 

Don't believe me? Let's see with an example.


Lets run the following code.
![first](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8b7i2dbcdgsepngri37v.png)

Nothing weird right? Now, lets make some changes.

![two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df7jzru57tlpfyheamsb.png)

Noticed the change? We called the function before its initialization and we still see the same output.

To see what exactly happened lets put a *debugger* on *line 1*.
![Three](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skh9dfbueyv8ex3ulw3n.png)


So, we are at *line 1* and we haven't executed anything yet.
But as we discussed, memory is allocated to functions and variables before the *execution phase*.

So, if what I said is true then the memory should show the function and variable now right? Correct.

![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deamutwt4pa9ggif2ga3.png)

![5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ng93kq997b3as6n05ivv.png)

Observe the above two images, under *Global*(which is on bottom right) and you'll see *a : undefined and one : f one();* and remember we are still at *line 1*

So, if they are in the memory we should be able to *log* them as well right? Yes.

Making a few changes and the code now looks like this.

![6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqbhak1eh010u7zkg71a.png)

Now, lets log them.
![7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jr4ado9tyehlaorlkan.png)

See that? By default *variables* are given 'undefined' and *functions* are stored along with their code in memory before script execution phase. That's the reason we see undefined and inner function data in console and that is the reason we are able to access them at lines on code which are before *variable initialization* or *function initialization*.

For now, lets concentrate on functions and it's *hoisting*.
So, if a function is saved in memory along with the whole code before the run, we will also be able to use them on a line in code before their initialization or anywhere right? Correct.

Lets make the code cleaner and see an example and the *HTML* code as well.
![8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y9oiijgr1b3wbzz51oe.png)
![9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0z656mdqdfxar5knai1.png)
Notice the above data very carefully. 

Notice the *console*, the *DOM*, the *storage* and where the *debugger* is placed and until what line the code has been executed.
So, we have run till *line 5* and the storage holds var *a:100* and we have it on the console as well. A *debugger* is before the function **one()** and the DOM page one the browser has only the initial data.

Now lets call the function **one()** and see the changes.
![10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8yynt1qhvh021cxi0u8.png)

Noticed? The DOM? Console? and the fact that we are yet to run *line 8*. We have successfully called/accessed  function *one()* before its initialization.

This is what **Hoisting** is. This is how powerful💥 *hoisting* is and how things run behind the scenes.

So, next time when an Interviewer asks what *hoisting* is, you should not be like *magic happens and code moves to the top*.


Also I would like to thank Akshay Saini (@akshaymarch7) for the way he explained this topic and many more in such an accurate manner.

Any feedback would be highly appreciated. 🖤