Hoisting in Javascript
Tags: javascript, programming, codenewbie, hoisting
Published: 2021-01-05 21:15:58

In this part of the series, we'll learn about one of the important concepts of Javascript: **Hoisting**.

## Hoisting

> Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Inevitably, this means that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

> Hoisting mechanism only moves the declaration and not assignment.

Let's try to understand this using an example:

### Variable Hoisting using *"var"*


```javascript
console.log(example);

var example = "hoisting example";

``` 

For the above snippet, Output will be:
 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609875957836/NZ4EfY8En.png)

So, exactly what happens is JS executed the above code in two phases: 

- Memory Creation Phase
- Code execution Phase

If you are not aware of these terms, I'll highly recommend you to read [this article](https://dev.to/anuradha9712/execution-context-in-javascript-43l7).

During *Memory Creation Phase*, it assigns special value `undefined` to the variables. 

var is hoisted on top of its scope and hence is `undefined`.

Now, if we tried to run the below code:


```javascript
console.log(example);

var example = "hoisting example";

console.log(example);

``` 

The output will be:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609876921171/516HYy184.png)

As you might expect, the second log() function logs the actual value because, during the *code execution phase*, it initializes the variable "example" with the value "hoisting example".

### Variable Hoisting using *"let"*

Now consider the same example but instead of *var*, this time we use *let*.


```javascript
console.log(example);

let example = "hoisting example";

``` 

Output for this will be:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609877593460/Ck0oClWSuY.png)

What why?? I expected it to be undefined.

**let** was introduced in ES6 and doesn't allow the use of undeclared variables, the interpreter explicitly spits out a Reference error.

> This ensures we always declare our variables before using them.
 
Now if we modify our code like this:


```javascript
let example;

console.log(example);

example = "hoisting example";

console.log(example);

``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609876921171/516HYy184.png)

This works exactly what we expected.

### Variable Hoisting using *"const"*

Consider the below code: 

```javascript
console.log(example);

const example = "hoisting example";

``` 

Output for this will be:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609877593460/Ck0oClWSuY.png)

It works the same way as **let** if used before declaring.

Another scenario for **const**:


```javascript
const example;

console.log(example);

``` 

Output:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609878788090/4Pghv4_lB.png)

Since const is an `immutable` type it should be defined when it's declared.

So, the correct way to work with **const** is:


```javascript
const example = "hoisting example";

console.log(example);

``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609878928204/2QTjKy9IK.png)


### Hoisting in Function Declaration


```javascript
console.log(example);

example();

function example(){
    console.log("This is example function output")
}
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609879467212/YBzs1izfF.png)

A function declaration is hoisted completely to the top. Now, we can understand why Javascript enables us to invoke a function before declaring it.


### Hoisting in Function Expression


```javascript
console.log(example);

example();

var example = function() {
    console.log("This is example function output")
}
``` 


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609879757770/x-eyV3D5D.png)

So why is it working in the function declaration but not in function expression?

>  Function expressions are not hoisted.

The interpreter throws a TypeError since it sees expression as a variable and not a function (only variable declaration is hoisted).

A *function expression* is a function that is assigned to a variable, and, in this case, the variable declaration is moved to the top with the default value of undefined rather than the function.

### Hoisting in Arrow Functions

> Arrow functions are a more compact way of writing function expressions in javascript.


```javascript
console.log(example);

example();

var example = () => {
    console.log("This is example function output")
}
``` 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609880277402/NQRjC1h1P.png)

It follows the same hoisting rules as that of function expressions.

## Wrap Up

Thanks for reading!! I hope it was helpful to some extent. Please share it with your network. Don’t forget to leave your comments below.

[![Buy-me-a-coffee](https://cdn.buymeacoffee.com/buttons/v2/default-blue.png)](https://www.buymeacoffee.com/anuradha2612)