Understanding Hoisting in JavaScript: Different forms of Hoisting - part 2

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 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

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:

var position = 'CEO' // declaration + assignment

Example 2:

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. 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:

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:

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.

Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.