Crack your JavaScript Interview — Hoisting (Part 01)

Photo by Blake Connally on Unsplash

In JavaScript, hoisting is a behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed.

Here are few examples how it works,

1.

console.log(foo)
foo = 1;

This will result in a ReferenceError because foo is not declared before it is used. JavaScript only hoists declarations (i.e., var foo;), but not initializations (i.e., foo = 1;).

2.

console.log(foo)
var foo = 2

when executing this var foo; going to the top of the execution scope and it will look like this.

var foo
console.log(foo)
foo = 2

This will return Undefined. JavaScript hoists variable declarations (but not their assignments) to the top of their scope. This means var foo; is moved to the top before execution, but foo = 2; remains in place.

3.

foo = 2;
console.log(foo);
var foo;

when executing this var foo; going to the top of the execution scope and it will look like this.

var foo;   // Hoisted declaration (initialized as undefined)
foo = 2;   // Assignment happens
console.log(foo);

This will return 2.

let and const are hoisted but not initialized, meaning it is in the Temporal Dead Zone (TDZ) until its declaration (let foo; const foo;). Since foo is used before declaration, JavaScript throws a ReferenceError.

Summary Table

Here’s how different function declarations behave with hoisting:

console.log(myFunction()); // Output: "Hello!"

function myFunction() {
  return "Hello!";
}

The function declaration function myFunction() { … } is hoisted, so you can call myFunction() before the actual declaration in the code. Both the function name and its body are hoisted, so calling myFunction() works even though it appears later in the code.

console.log(myFunction()); // TypeError: myFunction is not a function

var myFunction = function() {
 return "Hello!";
};

console.log(myFunction()); // TypeError: myFunction is not a function

var myFunction = function myFunc() {
 return "Hello!";
};

The variable myFunction is hoisted to the top of the scope, but the function assignment happens only when the interpreter reaches that line. Initially, myFunction is undefined, and calling it before the assignment leads to a TypeError because undefined is not a function.

console.log(myFunction()); // TypeError: myFunction is not a function

var myFunction = () => {
 return "Hello!";
};

Arrow functions behave the same way as regular function expressions when it comes to hoisting. The variable holding the arrow function is hoisted, but the function assignment is not.

Function Declarations vs. Function Expressions

Function declarations are hoisted in their entirety (both the function name and body), and can be called anywhere in their scope.

Function expressions (including anonymous, named, and arrow functions) are only partially hoisted (the variable declaration is hoisted, but the function definition is not), so they cannot be called before their assignment.

console.log(declaredFunction());  // Works
console.log(expressionFunction()); // TypeError

function declaredFunction() {
  return "I am declared!";
}

var expressionFunction = function() {
  return "I am an expression!";
};

hoisting behaves differently with const and let compared to var

let and const: The declaration is hoisted but remains in the TDZ until initialization. Accessing them before the initialization results in a ReferenceError.

Temporal Dead Zone (TDZ)

The temporal dead zone is the period between the start of the scope (when the variable is hoisted) and the moment the variable is initialized. During this time, accessing the variable throws an error.

function test() {
  console.log(myLet);  // ReferenceError: Cannot access 'myLet' before initialization
  let myLet = 10;
}

test();

myLet is hoisted, but accessing it before initialization results in a ReferenceError because it’s in the TDZ.

So, hoisting works with const and let, but you must be careful not to access them before they are initialized due to the TDZ.