Summarizing Namaste 🙏 JavaScript EP03 (Hoisting)
Tags: javascript, help, hoisting, namastejavascript
Published: 2021-03-20 04:56:11

Thank you Akshay Saini for this beautiful series. Just summarizing your lessons for whenever I need a quick recap. Same for others. Hope it helps.

## What is Hoisting ?

It is JS interpreter’s default behaviour of moving all declarations to the top of the current scope before code execution.

####Hoisiting rules
1->Variable declarations are hoisted, while variable definitions are not.
**Variables with var are hoisted, initialized, and assigned value of undefined**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t8mnryxa3ncu9i9rjqy.png)

2->Function declarations are hoisted, while function expressions are not.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac6sje2iq4c0iumm5xuu.png)
 
**The above piece I read last year but still it was not that much clear until I watched Akshay's execution context video :)
Now, lets summarize the hoisting video which I completed yesterday.**

###Hoisting is a phenomenon in which we can access variable and functions even before they are initialised or assigned some value.

The first image is executing as usual.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37sugx7zot1cchvdhzog.png)

In second one, when the getName() and console.log is moved upwards.
Result is x-> undefined
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcyll8756we2c0kyupt9.png)

If line 5 is removed from code, reference error is shown in console.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k72tu1xviet59cv7nke5.png)

console.log(getName) is added.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gj778c80lrp7x9lmp2j.png)

####What is happening ???

Lets start with first image.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37sugx7zot1cchvdhzog.png)

**Since we know that even before Js starts executing code, it assigns or memory is allocated to each and every variables and functions**

See below 2 images.

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

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

Now, what about third image ?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k72tu1xviet59cv7nke5.png)

During memory allocation phase, x is not present in memory. That is the reason why it results in reference error. 

Now, what about fourth image?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gj778c80lrp7x9lmp2j.png)

When Js starts executing code, getName is already been initialised with its function code and x is initialised with undefined during memory allocation phase.
That is the reason when line 3 is executed, it results **undefined** and when line 5 is executed, it shows function body.
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq7vcfd2wvokx80yaxyk.png)

**In case of arrow functions, it is treated as variable and is assigned a value of undefined instead of function body**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dcsqgtu8yckjbk2qhq3.png)