Moving up: the concept of Hoisting

Studying programming language is not an easy task. There are too many rules, and the logic is challenging. While learning JavaScript, I realised that some concepts sound more complicated than they should be.

Therefore, I decided to create a series of articles explaining JavaScript core concepts more lightly.

In the first article of the series, I will explain what Hoisting is.

What is hoisting?

According to the Cambridge dictionary definition, Hoist is:

Hoist
verb [ T ]
UK /hɔɪst/ US
/hɔɪst/
to lift something heavy, sometimes using ropes or a machine

Translating it to a programming language, hoisting means lifting your functions and variables declarations to the top of your file. Conceptually, this definition is not incorrect, but in real life, it is not the same.

JavaScript does not physically move your code to the top of the page. However, Hoisting is what makes it possible to call your variables and function before declaring it.

console.log(iAmNotHoisting);
iAmNotHoisting = "variable";

//outuput ReferenceError: iAmNotHoisting is not defined

console.log(iAmHoisting);
iAmHoisting = "variable";
var iAmHoisting

// 1:undefined
// 2:variable

To understand why this runs without error, we need to have a better-understanding knowledge of how JavaScript deals with code in the background.

What is Compile-time?

JavaScript reads the code in two different ways, and they are usually called Compile-time and Execution time. Why is this so important to Hoisting? Because it is in the Compile-time where the hoisting magic happens.

When the JavaScript engine starts to work on your script, the first thing it does is to read all the code on the global scope and store data in its memory. This data is stored in the Global Execution Context.

var iAmHoisting = "HELLO WORLD";
function getHoisting(){
return iAmHoisting
}

In this phase, JavaScript organises itself – no code is executed yet. You could see as at a warm-up before running your code. During this process, only declarations are stored, not the statements.

Be aware that functions and variables are stored differently. The functions are stored as a reference, and the variables – with a var keyword – are assigned to an undefined value, this process called Hoisting.

What is the Execution Phase?

Once all the declarations are identified, the parser keeps a note in memory and asks the engine to start the execution phase. At this stage, JavaScript assigns the real values to the variables present in its memory.

console.log(iAmHoisting);
iAmHoisting = "variable";
var iAmHoisting

// 1:undefined   <-- Compile-Time
// 2:variable    <-- Execution Phase

What is not Hoisted?

There is a misconception that let and const declarations are not hoisted; this is not exactly true. Those declarations are also hoisted, but the value is assigned as restricted until the execution phase. This phenomenon is called Temporal Dead Zone.

Some declarations are indeed not hoisted, such as:

• Functions defined with an expression
• Arrow Functions

Conclusion

Hoisting may seem confusing initially, but Hoisting is nothing more than assigning a default value to declarations. This process allows us to call a variable before it is declared.

Keep in mind that, even though it is possible to declare your variables and function at the bottom of the file, it is recommended to always write code readable for humans. Your colleagues cannot hoist, so keep your declaration on the top of your file.