Hoisting and the Temporal Dead Zone

Hoisting Is Not What You Think

Most tutorials explain hoisting as "declarations are moved to the top of their scope." That's a useful simplification, but it's wrong. Nothing moves. The truth is about two separate phases of execution: the creation phase (where bindings are registered) and the execution phase (where code runs line by line).

Understanding the real mechanism explains every quirk — why var gives you undefined before its line, why let throws, and why function declarations work before their line but function expressions don't.

The Creation Phase

When a scope is entered (a function is called, a block is entered), JavaScript does the following before executing any code:

1. Function declarations: Create the binding AND initialize it with the function object. Fully available immediately.
2. var declarations: Create the binding and initialize it to undefined. Available, but undefined until the assignment line runs.
3. let/const declarations: Create the binding but do NOT initialize it. Accessing it before initialization throws ReferenceError. This is the Temporal Dead Zone.

console.log(a);    // undefined (var — initialized to undefined)
console.log(b);    // ReferenceError (let — in TDZ)
console.log(c());  // "works!" (function declaration — fully initialized)

var a = 1;
let b = 2;
function c() { return "works!"; }

The Temporal Dead Zone (TDZ)

The TDZ is not a physical location. It's a time window — the period between entering a scope and reaching the let/const declaration. During this window, the binding exists (it's been registered) but is uninitialized. Any access throws ReferenceError.

{
  // TDZ for x starts here (entering the block)
  console.log(x); // ReferenceError: Cannot access 'x' before initialization
  let x = 5;      // TDZ for x ends here
  console.log(x); // 5
}

Why Does the TDZ Exist?

Without TDZ, let and const would behave like var — giving you undefined before initialization. This hides bugs. The TDZ makes accessing uninitialized variables a loud, immediate error instead of a silent undefined that causes problems downstream.

// Without TDZ (var behavior) — silent bug
function calculate() {
  return price * quantity; // undefined * undefined = NaN — no error
  var price = 10;
  var quantity = 5;
}

// With TDZ (let behavior) — immediate error
function calculate() {
  return price * quantity; // ReferenceError — bug caught
  let price = 10;
  let quantity = 5;
}

The typeof Exception — And When It Doesn't Apply

typeof has a special exception for undeclared variables — it returns "undefined" instead of throwing:

typeof undeclaredVariable; // "undefined" — no error

But this exception does NOT apply to TDZ variables:

{
  typeof myLet; // ReferenceError!
  let myLet = 5;
}

Function Declarations vs Function Expressions

// Function declaration — hoisted completely
sayHello();  // "Hello!" — works before the line
function sayHello() {
  return "Hello!";
}

// Function expression — only the var is hoisted
sayGoodbye(); // TypeError: sayGoodbye is not a function
var sayGoodbye = function() {
  return "Goodbye!";
};
// sayGoodbye is undefined at the point of call —
// calling undefined() is a TypeError, not ReferenceError

// Arrow function with let — TDZ applies
greet(); // ReferenceError
const greet = () => "Hi!";

The key distinction: with var sayGoodbye = function() {}, only the var sayGoodbye part is hoisted (as undefined). The assignment happens at runtime. With function sayHello(), the entire function is available at creation time.

// This behavior varies between engines in sloppy mode:
if (true) {
  function test() { return "inside"; }
}
test(); // May or may not work depending on engine/mode

// In strict mode:
"use strict";
if (true) {
  function test() { return "inside"; }
}
test(); // ReferenceError — block-scoped in strict mode

class Declarations and TDZ

class declarations behave like let — they have a TDZ:

const instance = new MyClass(); // ReferenceError
class MyClass {
  constructor() {
    this.value = 42;
  }
}

This means classes must be defined before they're used. Unlike function declarations, class declarations are NOT fully hoisted.

Production Scenario: The Initialization Order Bug

// config.js
export const API_URL = `${BASE_URL}/api/v1`;
export const BASE_URL = "https://example.com";

// Bug: API_URL is initialized first, but BASE_URL is in the TDZ
// at that point. Result: ReferenceError

The fix — order declarations so dependencies come first:

// config.js
export const BASE_URL = "https://example.com";
export const API_URL = `${BASE_URL}/api/v1`;

This is a particularly nasty bug in module systems because the TDZ applies to module-level const in the order they appear.