What is hoisting in Javascript?

If you're even slightly familiar with programming (which I'd recommend before continuing to read this article), you know that using a variable happens in three stages:

1. Declaration
2. Initialization
3. Usage

All in this precise order, even if the declaration and initialization can sometimes be done in the same statement. The same goes for functions, whose declaration must always precede its call.

But have you ever noticed that these statements aren't actually true in Javascript, and that it's possible to use a variable even before declaring it, and the same thing for a function?

This is made possible by a mechanism in JS called "hoisting" or "remontée" in French.

Hoisting

This mechanism therefore consists of "virtually" moving the declaration of a variable (or a function) all the way to the top of its scope during the analysis of the code by the Javascript interpretation engine.

It's an automatic and mandatory mechanism that is part of the ECMAScript specification, even though the term "hoisting" doesn't appear as such in it.

To remember it, you can think of the phrase "ho-hisse" that we use when hoisting (raising, lifting) something.

Let's see how this works with some code examples:

For variables

When interpreting the code, the engine will therefore retrieve all variable declarations within each scope, to move them all the way up.

But be careful, it only moves up the declaration, not the initialization, the value of the variable will then be set to "undefined".

The following basic code:

var x = 3;
console.log(x); /* 3 */

Is virtually transformed like this:

var x;
x = 3;
console.log(x); /* 3 */

But that doesn't change much, you might say?

Indeed, in this first example the behavior of the code doesn't change, but with code like the one below:

console.log(x);
var x = 3;

We should expect the interpreter to return a "ReferenceError" since variable x is used before being declared, but instead, the console displays "undefined", because the hoisting mechanism will have virtually transformed the previous code as follows:

var x;
console.log(x);
x = 3;

The variable will therefore have indeed been declared before being used, but since hoisting only works on the declaration and not the initialization, x equals undefined until we've passed the third line of the previous code!

Note that even though Javascript allows you to use variables before declaring them, I'd advise against doing so consciously, as it's not a very good practice.

Be careful, hoisting only works with variables declared with var, for those declared with let or const, the interpreter will return an error because they are "hoisted" but not initialized, not even with undefined.

For functions

Hoisting also works with functions, which allows you to organize your code however you want, without having to worry about whether a function is called before another or not.

To use a simple example:

f();
function f() { console.log("hello");}

Is virtually transformed into:

function f() { console.log("hello");}
f();

And all function declarations will therefore be placed before the calls, at the top of their scope.

But be careful, this doesn't work for anonymous functions stored in variables, for example:

f();
var f = function() { console.log("hello");}

Because the declaration of the variable f will indeed be hoisted, but its value will temporarily be undefined, and the interpreter will therefore throw an error like "f is not function".

The "Lexical Environment"

Throughout this article I've told you that your code was "virtually" modified, because your code doesn't move, but the variables, their declarations, and their values are stored in a data structure used by the interpretation engine called the "Lexical Environment".

Your code is therefore not affected, it's the way it is interpreted and executed that changes, but the hoisting mechanism is easier to understand by seeing the code change directly, which is why I explained it to you this way!