Hoisting & the temporal dead zone

Understand the concept

Hoisting is JavaScript's behavior of processing declarations before executing the code in a scope. Because of this, a function declaration can usually be called before its line appears, while variables behave differently depending on how they are declared.

The Temporal Dead Zone (TDZ) is the period from entering a scope until a let, const or class binding is initialized. The binding exists in that scope but cannot be accessed yet; trying to read it throws a ReferenceError.

Important ideas

• JavaScript sets up declarations before running that scope.

• let and const cannot be accessed before initialization; this period is the TDZ.

• console.log(x); let x = 1; throws ReferenceError.

• var starts with undefined; let and const exist in scope but cannot be read until initialized.

• A function expression follows the rules of the variable holding it; assigning an arrow function to const does not make it callable early.

• Even typeof throws for a binding in its TDZ, unlike typeof on an undeclared name.

• Declarations are not literally moved in the source code; this describes how bindings are prepared.

Work through the example

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

try {
  console.log(b); // Throws ReferenceError: b is in its TDZ.
  let b = 20;
} catch (error) {
  console.log(error.name); // ReferenceError
}

• var a is initialized before the first log, but its assignment to 10 happens later.
• b is known in its block, but reading it before let b = 20 is not allowed.