Hoisting Tutorial | ConsistCode

📖 The Story & Real-World Analogy

The Morning Classroom Roll Call

"Before the school bell rings for the actual lesson (Execution Phase), the teacher opens the attendance book and registers every student enrolled in the class (Creation Phase). For students with "Honor Badges" (Function Declarations), their full projects are already accepted and placed on the presentation stand. For standard students ("var"), their names are written down, but their desks are marked Empty (`undefined`). For modern scholarship students ("let" & "const"), their names are registered, but they are held in the lobby (Temporal Dead Zone) until the bell specifically rings for their turn."

Hoisting does not physically move your code lines to the top of the file. It is the result of the engine setting up memory allocations during the Execution Context Creation Phase before executing any code.

⚙️ How It Works Under The Hood (Step-by-Step)

1

Creation Phase Memory Allocation

The engine parses the entire script, noting all variable and function identifiers before running line 1.

2

Function Declarations Hoisting

Traditional `function greet() {}` declarations are hoisted completely into memory along with their entire function body. You can safely call them before their declaration line.

3

Var Hoisting with Undefined

Variables declared with `var` are allocated and immediately initialized with the primitive value `undefined`.

4

Let and Const: The Temporal Dead Zone (TDZ)

Variables declared with `let` and `const` are also hoisted (the engine knows about them), but they remain UNINITIALIZED. Any access before their declaration line triggers a `ReferenceError`.

5

Function Expressions vs Declarations

When assigning a function to a variable (`const myFn = function() {}`), only the variable name is hoisted according to variable rules. Calling it early throws a TypeError or ReferenceError.

💻 Interactive Code Walkthrough

Comparing Function Declarations, var, and the let/const TDZ:

JAVASCRIPT

// 1. Function Declarations work anywhere in scope
sayHello(); // Output: "Hello from hoisted function!"
function sayHello() {
  console.log("Hello from hoisted function!");
}

// 2. var is hoisted as undefined
console.log(nickname); // Output: undefined
var nickname = "Flash";

// 3. let/const in TDZ
try {
  console.log(realName);
} catch (err) {
  console.log(err.name + ": " + err.message);
}
let realName = "Barry Allen";

Console Output:

CODE

Hello from hoisted function!
undefined
ReferenceError: Cannot access 'realName' before initialization

⚠️ Common Pitfalls & Interview Traps

Trap

Calling Function Expressions Before Assignment

The Risk: Using `var fn = () => {}` and calling `fn()` before assignment throws `TypeError: fn is not a function` because `fn` is currently `undefined`.

The Fix: Declare functions using `function name() {}` if you need hoisting, or declare arrow functions at the top of your modules before calling them.

⚡ 30-Second Quick Revision Cheat Sheet (TL;DR)

✓ Hoisting is an artifact of the Execution Context Creation Phase.
✓ Function Declarations: Fully hoisted with code body.
✓ `var`: Hoisted and initialized to `undefined`.
✓ `let` and `const`: Hoisted but uninitialized; protected by Temporal Dead Zone (TDZ).
✓ Function expressions and arrow functions are governed by variable hoisting rules.

Hoisting

Hoisting in JavaScript