Every junior front-end developer should know what hoisting is. This issue can be easily understood, so if you have not heard of it before, you can quickly catch up:

What is hoisting?

Hoisting is a mechanism, which moves all variables and functions declarations “to the top” of their scope before code execution. This means that you can refer to a variable or function before it is declared.

Let’s see it first on variables example:

Variables hoisting

ES5 – var

There are two things to distinguish here – variable declaration and initialization. Declaration is to define a variable, and initialization is to assign a value to it. You can do these two things together or separately:

function example() {
    var foo;                            // variable declaration
    foo = "new value of foo";  // variable inicjalization

    var boo = "we assign new foo value immediately"    // declaration and initialization
}

We must remember, that only the variable declaration is moved to top. So, if we refer to the variable before defining it, we’ll get ‘undefined’ in response:

function example() {
    console.log(foo);   // undefined
    var foo = 10;
    console.log(foo);   // 10
}

This is because the variable is declared but its value is not defined. The value can be read only after variable initialization, i.e. below var foo = 10;

ES6 – let i const

When we use let and const, the variables are not taken to the top of the function range or to the global environment. This limits errors that could result from overwriting variable names.

The place between the variable declaration and the beginning of its range is called Temporal Dead Zone (TDZ). This means that if we refer to a variable before declaring it, we get error: ReferenceError: Cannot access ‘foo’ before initialization.

function example() {
    // Temporal Dead Zone
    console.log(foo);    // ReferenceError: Cannot access 'foo' before initialization

    let foo = 10;
    console.log(foo);    // 10
}

The variable can be read only after it is declared.

Functions hoisting

Function declaration

Hoisting also applies to a function written using a function declaration. As with variables, this means that we can refer to a function before it is declared:

foo();

function foo() {
    console.log('It works!');    // It works!
}

Function expression

For function expressions, the rules for hoisting are similar to those for variables, i.e. if you assign a function to the variable var, the function declaration will be moved to the top of the variable range, but since only the declaration is raised, we will not use the function before declaring:

foo();            // TypeError: foo is not a function

var foo = function() {
    console.log('It works!');
}

In the case of let and const, a dead zone (TDZ) is created, and if we want to call the function before initialization, we get the error:

foo();           // ReferenceError: Cannot access 'foo' before initialization

let foo = function() {
    console.log('It works!');
}

We have to be careful with hoisting, because it may happen that we unwittingly overwrite some variable to which we think we have no access, because it was declared a few lines of code below. For this reason, in most cases it is safer to use let and const instead of var.