Understanding Hoisting in JavaScript: Different forms of Hoisting - part 2
Tags: javascript, programming, beginners, webdev
Published: 2023-03-31 15:11:57

If you are reading this, but have not read part one of this article, where we discussed the mental model for hoisting using reader's understanding of English Language, I will advise you pause here and read the [part one](https://dev.to/haastrupea/understanding-hoisting-in-javascript-building-a-mental-model-part-1-45og) before you continue.


Function, variable and class declaration experiences hoisting in different ways. Below are three different ways that hoisting can be experienced in JavaScript.

## Value hoisting
This is when the value of a declared variable is hoisted along with its declaration.
In this form of hoisting, you can reference a variable before the line it was declared and get access to its value and declaration. 
This is only possible with function declaration, at the moment, in JavaScript and I guess this is because the value of a function is in its body(the part of the function declaration embedded inside `{}`) and as it stands, the body of a function is part of its declaration.

Sample of how function is hoisted

```javascript
1
2
3 
4 // function call before the being declared on line 9
5  salary()
6
7
8 // function declaration
9 function salary() { 
10   console.log('my salary is $',10,000)
11 }
12
13 
```

## Declaration hoisting
In this type of hoisting, only the declaration is moved up the scope. This type of hoisting affects only `var`.

So, if you write your code as seen in example 1 below, JavaScript interpreter will break it down as seen in example 2 and then move the declarations to the top of their respective scopes.

Example 1:

```javascript
var position = 'CEO' // declaration + assignment
```

Example 2:

```javascript
var position; // declaration 
postion = 'CEO' // Assignment
```

There is a JavaScript rule that prevents referencing `let` before the line it was declared in

## Lexical declaration hoisting
Well, this type of hoisting is not really considered hoisting but after reading the article from MDN on [hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting). I agree with the proof. I would advise you check it out, it's a short article.

This type of hoisting affect variables declared with `let`, `const` and `class` declaration. Code Example 3 below will throw `ReferenceError: can't access lexical declaration 'salary' before initialization` error.

In example 4 below, I removed the class declaration and got `ReferenceError: 'salary' is not defined` error. The only difference between example 3 and example 4 is the absence of salary class declaration  in example 4 code.

Example 3:
```javascript
1
2
3 
4 // class reference before the being declared on line 9
5  console.log(salary)
6
7
8 // class declaration
9 class salary { 
10
11 }
12
13
```

Example 4:
```javascript
1
2
3 
4 // ref undefined variable
5  console.log(salary)
6
7
```

For JavaScript to know and throw a different error in example 3 and 4, it must have hoisted the class declaration in example 3 somehow.

The rest of the proofs can be found on [MDN Glossary on hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting).

Let me know if you have any suggestions or questions in the comments.
You can reach me on [linkedin](https://www.linkedin.com/in/haastrupea/) and [Twitter: killcodeNG](https://twitter.com/killcodeNG).