JavaScript Hoisting
Tags: javascript, programming, beginners
Published: 2021-12-15 11:11:19

In this post i will try to give you full understanding about an important concept which is **Javascript Hoisting**, and how it works behind the scenes.

So without further preamble, let's start by this picture below
<br>
![hoisting 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5n4r9z2xgylspp63jxi.jpg)
Now you thinking Why did you bring this crane here :confused:.
Just take a minute and think about it, Isn't it the job of a crane to hoist something?
In our case its hoist variable and function declarations to the top of your code.

## Variable hoisting

```js
console.log(number); // undefined
var number = 12;
```
Why giving me undefined, isn't it supposed to giving me an error like

```js
Uncaught ReferenceError: Cannot access 'number' before initialization.
```

However, the first line of code doesn’t cause an error because the JavaScript engine moves the variable declaration to the top of the script, The following figure illustrates this
![figure ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q50b3g02cladp1zwg4o1.png)
Technically speaking, the JavaScript engine places the variable number in the memory and initializes its value to undefined.
Now you get it :sunglasses:

## The let keyword
The following declares the variable number with the let keyword:

```js
console.log(number);
let number = 12;
```
Now it don't giving me undefined, instead throw me an error 

```js
Uncaught ReferenceError: Cannot access 'number' before initialization.
```
The error message explains that the number variable is already in the heap memory. However, it hasn’t initialized.
Behind the scenes, the JavaScript engine hoists the variable declarations that use the let keyword. However, it doesn’t initialize those variables.
Notice that if you access a variable that doesn’t exist, the JavaScript will throw a different error:

```js
console.log(name);
let number = 12;
```
Here is the error:

```js
"ReferenceError: name is not defined
```

## Function hoisting
Like variables, the JavaScript engine also hoists the function declarations. It moves the function declarations to the top of the script. For example:

```js
let x = 20,
    y = 10;

let result = add(x,y);
console.log(result); // 30

function add(a, b){
return a + b;
}
```
This give me 30 because of `hoisting` , The following figure illustrates this

![function hoisting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0bpnc9hkwniql7sni5q.png)
During the creation phase of the execution context, the JavaScript engine places the `add()` function declaration in the heap memory.
 To be precise, the JavaScript engine creates an object of the `function` type and a function reference called `add` that refers to the function object.

## Function expressions
The following example changes the `add` from a regular function to a function expression:

```js
let x = 20,
    y = 10;

let result = add(x,y);
console.log(result); // 30

var add = function(x, y){
return a + b;
}
```
If you execute the code, the following error will occur:

```js
"TypeError: add is not a function
```
During the creation phase of the global execution context, the JavaScript Engine creates the `add` variable in the memory and initializes its value to `undefined`.
When executing the following code, the add is `undefined`, hence, it isn’t a function.

## Arrow functions
The following example changes the `add` function expression to the arrow function:

```js
let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

var add = (x, y) => x + y;
```
The code also issues the same error as the function expression example because arrow functions are syntactic sugar for defining function expressions.

```js
"TypeError: add is not a function
```
Similar to the functions expressions, the arrow functions aren’t hoisted.

## Summary

- JavaScript hoisting occurs during the creation phase of the execution context that moves the variable and function declarations to the top of the script.

- The JavaScript engine hoists the variables declared using the `let` keyword, but it doesn’t initialize them as the variables declared with the `var` keyword.

- Function expressions and arrow functions aren’t hoisted.