LuisLlamas Logo
javascript-hoisting

Hoisting in JavaScript

  • 4 min
  • Advanced

In JavaScript, Hoisting is a behavior of the JavaScript engine that affects how variable and function declarations are interpreted.

Hoisting causes variable and function declarations to be “lifted” to the top of their execution context.

By “lifting” the declaration, we mean that the interpreter knows a function exists, even if we declare it later in the code.

Hoisting is a very useful feature that makes development easier for us. However, it is also one of the least understood and most confusing concepts.

javascript-hoisting

So let’s take a look 👇

What is Hoisting For?

As I said, Hoisting means the interpreter knows about variables or functions before their declaration. That is, we can do this.

greet(); // Output: "Hello, world!"

function greet() {
    console.log("Hello, world!");
}
Copied!

In this case,

  • The function greet can be called before its declaration
  • This is because Hoisting “lifts” the declaration.

Read like this it might seem a bit strange, but it makes a lot of sense. The purpose of Hoisting is to simplify our lives when writing code.

If we didn’t have Hoisting, we would have to write functions in the same order we use them.

function function1() {
    console.log("Hello, world!");
}

function function2() {
	function1();
}
Copied!

Which might seem like a small problem. But as you write code, you would have to constantly change the order of functions (so they are in the same order you use them).

This would be a real pain 🙅. So the interpreter first takes a walk through the entire file collecting the definitions, to make it more convenient for us.

JavaScript is not the only language with this “problem”. Most modern languages do not require maintaining order.

Others do require it, such as C++. Then they need other mechanisms like .header files or forward declarations, which are even less intuitive.

How Hoisting Works

Function Hoisting

Functions in JavaScript are fully hoisted, both the declaration and the implementation are lifted to the top of the execution context.

This means you can invoke them before their declaration. Let’s see an example:

console.log(add(5, 3)); // 8

function add(a, b) {
    return a + b;
}
Copied!

Here, the call to add is made before the function declaration

Variable Hoisting

Variable declarations using let and const are also hoisted. However, they are not available before their actual declaration.

This is because the interpreter places them in what we call the TDZ (temporal dead zone) until their declaration is reached.

console.log(myLetVariable); 
// ReferenceError: Cannot access 'myLetVariable' before initialization

let myLetVariable = 10;
Copied!

In this case, the code throws a ReferenceError because myLetVariable is not defined before its declaration.

It is often said that the definition is hoisted, but not the initialization. It doesn’t really matter, the important thing is that the TDZ won’t let you access it.

Example: Variable Containing a Function

Let’s look at an example with a case that might cause some confusion. What happens if we have a variable that contains a function?

Well, a variable that contains a function is still a variable. So it will follow the behavior rules we’ve seen for a variable.

Suppose this case,

console.log(multiply(5, 3)); 
// ReferenceError: Cannot access 'multiply' before initialization

let multiply = function(a, b) {
    return a * b;
};
Copied!

In this case,

  • A ReferenceError occurs
  • The error occurs because the variable multiply is hoisted, but the assignment of the function to multiply is not.
  • Therefore, when trying to call multiply before the assignment, an error is obtained because it is in its TDZ
  • Exactly the same as with a variable containing any other value

Much of the confusion generated by Hoisting is due to the old behavior of variables declared with var (currently not used)

On this page