Hoisting in Javascript
Tags: javascript, webdev, programming, web3
Published: 2022-07-06 18:30:27

**Hoisting gives higher specificity to javascript declarations.Thus,it makes the computer read and process declaration first before analyzing other code in program**

So hoisting doesn't mean javascript rearranges or move code above one another.

Let's say 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4oc31liz2d251kxfegs.png)

In this case we are using the name before it's declaration,however because we are using 'let' keyword here it is throwing "Uncaught Reference Error " to us.

**Variables declared with let and const are hoisted but not initialized with default value** 

Accessing let or const before it's declared gives following error:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8l9myds2w6k12vt8bck.png)

So one thing to be noticed here is, this error message is telling that variable is initialized somewhere.

## Variable Hoisting with var

When interpreter hoists a variable declared with var ,it initialize it's value to undefined ,unlike let or const.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glrovdadjiuud1mgtqmn.png)

Remember console.log(name) outputs undefined, beacause name is hoisted and given a default value (i.e undefined),not because variable is never declared.

Using Undeclared variable will throw the Reference Error
Like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0gobfoagfxvi50hzxur.png)

Now let's see what happens if we do not declare var what happens

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0stwsmqtsoav8mrveqsw.png)

**Assigning a variable that's not defined valid actually.**

**Strange Isn't it??**

Javascript let us access variable before they're declared.This behaviour is an unusual part of javascript .So it i adviced not to do this.

## The Temporal Dead Zone 

**So why we get reference error when we try to access let or const before it's declaration??**

_This is because of Temporal Dead Zone._

The TDZ starts at the begining of variables enclosing scope and ends when it is declared.

Accessing variable in TDZ throws an error.

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

In case of let or const , it throws Reference Error in TDZ
However in case of var it assign it to undefined 


## Functional Hoisting

Not only variables but function declarations also get hoisted in javascript.

Functional hoisting allow us to call function before it is declared or defined.

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g83w92e216ddg6h0x2zs.png)

**Only Function declaration are hoisted ,not function expressions. **

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8slaktgwtcanabgvdvk.png)

It will throw error like this:

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63svofd591j1t58rl6r1.png)

If you use let or const then it will throw error like this: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91tj76gw9ny9k2rdr5r0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1hvxivk59wt8z8qm8ei.png)

_Hope it will help you guys:)_