Understanding Hoisting in JavaScript: Building a mental model- part 1

Hoisting is an idea in JavaScript that the ECMAScript specification never really did justice to clarifying and yet holds a very important secret to demystifying JavaScript.

Since the idea is not clearly defined, I will take the liberty to help you as a beginner build a mental model from relatively familiar concept to the closest idea to the unfamiliar behavior of Hoisting in JavaScript and in the end I will leave link to an article( more like an academic paper) that I believe went really deeper than most articles I have read over the years in a beginner friendly tone.

If you are reading this In English language I will assume you have basic understanding of the language enough to pick up a new word from the English dictionary. I believe English Language is relatively familiar language to you and I will be building on that understanding.

To Hoist according to Merriam Webster dictionary is

:raise, lift
to raise into position by or as if by means of tackle

• hoist a flag
• hoist the sails
• Cargo was hoisted up into the ship.

In simple terms, hoisting is moving something from a lower position to a higher position.
Check out the following analogy

• A raise on your salary at work, we can say your Salary has been hoisted up.
• Promotion at work from a junior to senior position means your position has just been hoisted up.

Now is the time to apply this concept of hoisting in a way that clarifies what hoisting is in JavaScript.

From MDN hoisting is defined as

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code - MDN hoisting.

From our last analogy, let's align some of the terms to MDN important terms

• Work/company/startup ----- scope
• Salary/Position ---- functions, variables and classes

Scope in JavaScript

What does JavaScript consider as scope?

There are two types of scope in JavaScript; local and global scope
Here is a cheat— anything inside {} is local scope and every other thing outside of {} is global scope.

You can also refer to anything inside {} as block scope.

Any {} that belongs to a function - is a type of local scope that we can call function scope, if it belongs to an if statement, I guess we can call it if scope, what if it belongs to a switch statement, Let's call it it switch scope.

Functions, variables and classes in JavaScript

What is JavaScript moving up?

There is nothing really to talk about here. If you have ever written and then run any line of code in JavaScript, you definitely know what a function, variable and class is in JavaScript.
Just to be clear, hoisting is particular about declaration of Functions, Variables and classes.

The following are not hoisted

• Function calls
• Variable assignments
• Class instances

Hoisting Explained

How Variables and Functions are Moved to the Top of Their Scope at Runtime

Anatomy of scope

Whatever is being moved by JavaScript is moved to the top of the scope. Below is a visual representation of how JavaScript labels parts of your code.

1 // Top of the global scope
2
3 
4
5  const foo = 'hello global world';
6 
7 {
8  // Top of the local/block scope
9
10 
11   const foo = 'hello local world';
12
13
14 // Bottom of the local/block scope
15 }
16
17
18
19 // Bottom of the global scope

What is function, variable and class declaration in JavaScript?

When JavaScript is ready to move a function, variable or class, it moves only the declaration to the top of the respective scope. Below is a sample of what JavaScript considers to be declaration

• Function declaration

 function salary() {
/* do something here*/
}

• variable declaration

var postion;
let flag;

NOTE: const must be assigned at the point of declaration.

JavaScript has some shortcuts that allow programmers to declare and assign a value to a variable at once.

Example 1:

var position = 'CEO' // declaration + assignment
const salary = 10000.00 // this is the only way to declare and assign const variable
let flag = 🇳🇬 // declaration + assignment

The long version would have been
Example 2:

var position; // declaration 
postion = 'CEO' // Assignment
const salary = 10000.00 // this is the only way to declare and assign const variable
let flag; // declaration
flag = 🇳🇬  // Assignment

• Class declaration

class salary {
/* put class methods and properties here*/
}

We just went through a process of mental model building. If you are a beginner, you will need some time for all of this to settle in, you might need to read over and over. I recommend that you follow along with testing your understanding, if possible, in your code editor.

When you are confident enough, you can go on to read the part 2 here. Moreover, you can always come back to part 1 for clarification.

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