JavaScript Hoisting

3 min readJan 21, 2021

Hoisting was thought up as a general way of thinking about how execution contexts work in JavaScript. However, the concept can be a little confusing at first.

Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

Understanding what exactly is JavaScript Hoisting

Variable declaration and initialization occur in the following sequence

Declaration –> Initialization/Assignment –> Usage

// Variable lifecycle
let x;                 // Declaration
x = “hoisting”;        // Assignment
console.log(x);        // Usage

However, since JavaScript permits both declaration and initialization of variables simultaneously, this is the most used pattern.

let x = “hoisting”;

Most importantly, you should always remember that JavaScript declares the variable first in the background. Then, initializing them.

Variable hoisting

Variable hoisting means the JavaScript engine moves the variable declarations to the top of the script. The following example declares the counter variable and sets its value to 1.

console.log(counter); // undefined
var counter = 1;

However, the first line of code doesn’t cause an error because the JavaScript engine moves the variable declaration to the top of the script. The code looks like the following in the execution phase.

var counter;

console.log(counter); // undefined
counter = 1;

During the creation phase of the global execution context, the JavaScript engine places the variable counter in the memory and initializes its value to undefined.

Hoisting Let and Const?

They’re also hoisted, var, let, const, function and class declarations are hoisted. The difference between var, let and const declarations are their initialization, this simply means the value they are given, to begin with.

Instances of var and let can be initialized without a value, while const will throw a Reference error if you try to declare one without assigning it a value at the same time. So const myName = 'Hassan' would work, but const myName; myName = 'Hassan'; would not. With var and let, you can try to use a var value before it has been assigned and it would return undefined. However, if you did the same with let you would receive a Reference Error.

Function Hoisting

Function declarations are also hoisted. However, functions that are assigned to variables are not hoisted. For example, the following code will work as expected due to function declaration hoisting.

foo();

function foo() {
  alert("Hello!");
}

The following example will fail. The variable declaration for foo is hoisted before the function call. However, since the assignment to foo is not hoisted, an exception is thrown for trying to call a non-function variable.

foo();

var foo = function() {
  alert("Hello!");
};

One of the advantages of JavaScript putting function declarations into memory before it executes any code segment is that it allows us to use a function before we declare it in our code.

Resources: