JavaScript Hoisting and Temporal Dead Zone (TDZ)

What is Hoisting?

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before execution. This applies to variables (var, let, const) and functions.

Function Hoisting

Function declarations are hoisted with their definitions, meaning they can be called before they are defined.

Example:

sayHello(); // Works fine
 
function sayHello() {
    console.log("Hello, World!");
}

Function Expressions Are Not Hoisted

Only function declarations are hoisted, not function expressions.

hello(); // Error: Cannot access 'hello' before initialization
 
const hello = function() {
    console.log("Hi!");
};

Use Case:

Use function declarations when you need to call a function before its definition in the file (e.g., utility functions in large applications).

Variable Hoisting

var Hoisting

var declarations are hoisted but not initialized, so they exist but hold undefined.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

This happens because JavaScript interprets it like this:

var a;
console.log(a); // undefined
 
a = 10;
console.log(a); // 10

Use Case:

Using var can lead to unintended behavior, such as using an uninitialized variable. Prefer let or const to avoid this.

let and const Hoisting (TDZ)

Variables declared with let and const are also hoisted, but they remain in the Temporal Dead Zone (TDZ) until the declaration is encountered.

console.log(x); // Error: Cannot access 'x' before initialization
let x = 20;

console.log(y); // Error: Cannot access 'y' before initialization
const y = 30;

Use Case:

Using let and const ensures variables are only accessible after they have been initialized, making code more predictable.

Debunking the Myth: "Are let and const Hoisted?" 🔍

There is a common misconception in JavaScript: "let and const variables are not hoisted." This is wrong.

let and const declarations are indeed hoisted to the top of their block scope. However, they behave differently from var because they are not initialized with a default value. Instead, they are placed in the Temporal Dead Zone (TDZ).

The Proof:

If let and const were not hoisted, a variable declaration inside a block would fall back to the outer scope variable (via the scope chain). But it doesn't:

let x = "outer scope";
 
{
  // If 'let x' wasn't hoisted, console.log(x) would read the outer scope 'x' ("outer scope")
  console.log(x); // ❌ ReferenceError: Cannot access 'x' before initialization
  
  let x = "inner scope";
}

In the example above, the ReferenceError occurs because the inner x was hoisted to the top of the block, shadowing the outer x. However, since it hasn't been initialized yet, accessing it throws an error.

Temporal Dead Zone (TDZ)

The Temporal Dead Zone (TDZ) is the period between the start of the execution context and the point where the variable is declared.

Example of TDZ:

console.log(value); // Error: Cannot access 'value' before initialization
let value = 42;
console.log(value); // 42

The TDZ exists from the beginning of the block until the variable's declaration is encountered.

Use Case:

Understanding TDZ helps prevent ReferenceErrors and ensures variables are used only when they are ready.

Under the Hood: Creation vs. Execution Phases ⚙️

To understand hoisting and TDZ, we must look at how the JavaScript Engine (like V8) processes code in two distinct phases:

Phase 1: Creation Phase (Parsing)

Before executing a single line of code, the engine scans the scope for variable and function declarations and registers them in the Environment Record:

• Functions: Registered and fully initialized with their body (fully hoisted).
• var variables: Registered and initialized as undefined (hoisted and initialized).
• let & const variables: Registered but left uninitialized (hoisted but NOT initialized).

Phase 2: Execution Phase (Running)

The engine executes the code line-by-line:

• Accessing an uninitialized binding (a let or const variable) causes the engine to throw a ReferenceError.
• When execution reaches the declaration line (e.g., let x = 10), the binding is initialized with that value, and the variable is now safe to access.

Why is it called "Temporal" (Time-Based)? ⏳

It is called the Temporal Dead Zone because the zone is based on execution time, not physical spatial position in the file.

You can reference a let variable physically above its declaration, as long as that reference is not evaluated until after the initialization line has run:

{
  // 1. Physically ABOVE the declaration, but it's safe to define:
  const printValue = () => console.log(myVar);
 
  // 2. We are in the TDZ for myVar. Calling printValue() here would crash:
  // printValue(); // ❌ ReferenceError: Cannot access 'myVar' before initialization
 
  let myVar = 42; // 3. myVar is initialized! TDZ ends.
 
  // 4. Calling the function now works perfectly:
  printValue(); // ✅ Output: 42 (because the TDZ has ended in time!)
}

If the dead zone were spatial (based on location), referencing myVar above its declaration line would always fail, regardless of when it is invoked.

Summary of Variable States:

Avoiding TDZ Issues

To avoid TDZ-related errors:

1. Declare variables at the top of their scope.
2. Initialize variables immediately when possible.
3. Use const for constants, and let for variables that need reassignment.

// Good practice
let count = 0;
const maxLimit = 100;

Advanced Hoisting Examples

Hoisting in Functions

function outer() {
    console.log(inner()); // Works fine
    function inner() {
        return "Inside Inner Function";
    }
}
outer();

Hoisting in Blocks

Variables declared with let and const are not hoisted beyond their block scope.

{
    console.log(a); // Error: Cannot access 'a' before initialization
    let a = 5;
}

Use Case:

Use block scoping to limit variable access within specific areas of code, preventing unintended access.

Summary

• Hoisting moves declarations to the top of their scope.
• Functions are fully hoisted, but function expressions are not.
• var is hoisted but initialized as undefined.
• let and const are hoisted but stay in the TDZ until initialized.
• Accessing a let or const variable before declaration causes a ReferenceError.
• Understanding hoisting and TDZ helps write clean and predictable JavaScript code.

By mastering these concepts, you can avoid common pitfalls and write more reliable JavaScript code.