What is Hoisting in JavaScript

Fancy terms everywhere that may tend to scare new developers that try to learn JavaScript, but don't worry, we've got you covered! In JavaScript, the Hoisting concept refers specifically to the default behaviour of the interpreter to move variables and function declarations to the top of their scope before its execution. This in plain english means, that you can call a function at the scope level before it's executed, for example, the following JavaScript snippet runs successfully:

// 1. Note that we call the function first before declaring it
HoistingExample();

// 2. The function is declared after being called
function HoistingExample(){
    console.log("Hello World!");
}

Even though the function is being called before the declaration of the HoistingExample function. That's hoisting in JavaScript!

Why it's confusing sometimes?

I know, I know JavaScript is kinda weird sometimes, specially if you have experience with another programming language:

There are some things you need to keep in mind before assuming that you fully understand the Hoisting concept:

1. Only declarations are hoisted, not the initializations

It's quite common that JavaScript will throw an exception when we use a variable that doesn't exist:

// Throws ReferenceError: testing is not defined
HoistingExample();

function HoistingExample(){
    console.log(testing);
    console.log("Hello World!");
}

So why the same exception is not raised with the following snippet?:

HoistingExample();

function HoistingExample(){
    // It just logs undefined
    console.log(variable1);
    var variable1 = "something";
};

That's because the Hoisting concept applies in this case when using var! The interpreter moves the declaration of the variable that we wrote to the top of the scope. The following code would be how the interpreter runs the code and that's why it's valid:

HoistingExample();

function HoistingExample(){
    // The variable is hoisted by JS
    var variable1;
    // And therefore in this snippet it's undefined, instead of raising an exception
    console.log(variable1);

    // As the variable has been hoisted, var isn't used again
    variable1 = "something";
};

Because only the declarations are hoisted, not initializations themselves.

2. Let and const are still hoisted, yet not initialized

So, if the previous snippet works, if I decide to change var with let or const, will it work in the same way? The answer is nope! It will raise another exception:

// Throws ReferenceError: Cannot access 'variable1' before initialization
HoistingExample();

function HoistingExample(){
    // It just logs undefined
    console.log(variable1);
    let variable1 = "something";
};

In this case, the variable is still hoisted, however, is not initialized with a value and therefore, the previous exception is thrown. This can be solved easily by simply initializing it before accessing it.

3. Hoisting doesn't work with function expressions

Even though it may make sense considering the hoisting concept, if your function is declared as a variable, hoisting won't happen here:

// Throws Uncaught TypeError: HoistingExample is not a function
HoistingExample();

var HoistingExample = function(){
    console.log("Hello World!");
};

I hope this simple explanation helps you to understand how the hoisting works in JavaScript.

Happy coding ❤️!