Engine #1 — Hoisting & TDZ: What the Engine Actually Does

Hoisting isn't magic — it's the result of how the JavaScript engine processes code in two phases: compilation (creation) and execution. This article goes deeper than the beginner-level explanation to understand what the engine actually does with execution contexts, environment records, and the Temporal Dead Zone.

Prerequisites: JS Foundations #1 — Variables, Scope & Hoisting

1. The Two Phases — Creation vs Execution

Every time the engine enters a scope (global, function, block), it creates an execution context in two phases:

2. Environment Records — Where Variables Actually Live

The spec defines three kinds of environment records:

3. The Temporal Dead Zone — Why It Exists

The TDZ exists because let/const hoist the binding but not the initialization:

The key insight: typeof is NOT safe for TDZ variables:

4. Function Declarations in Blocks — The Surprising Case

Function declarations inside blocks behave differently in strict vs sloppy mode:

5. Class Hoisting — Classes are NOT Fully Hoisted

class declarations are hoisted like let — binding exists in TDZ until the class body runs:

6. Summary — Hoisting Rules by Declaration Type

Key Takeaways

• Execution contexts are created in two phases: creation (hoisting, scope setup) and execution (code runs line by line).
• var hoists with undefined initialization; let/const hoist but stay uninitialized (TDZ).
• TDZ is temporal, not spatial — based on execution order within the block.
• typeof on a TDZ variable throws ReferenceError — the one case where typeof is not safe.
• Function declarations in blocks are a spec anomaly — avoid them in all modes.
• class hoists like let — must be defined before use.

Next: Modules — IIFE, CommonJS, AMD, ESM — the evolution of JavaScript module systems.