Hoisting and the temporal dead zone

Two phases: creation and execution

When a script or a function starts, the engine does not just read line by line. First, in the creation phase, it finds every declaration in that scope and sets up the names. Then, in the execution phase, it runs the code from the top. The effect is as if declarations were "hoisted" (lifted) to the top of their scope. Nothing actually moves in your file; it is a way of describing this two-step process.

Function declarations are fully hoisted

console.log(add(2, 3)); // 5: works before the definition

function add(a, b) {
  return a + b;
}

var is hoisted as undefined

console.log(price); // undefined (no error!)
var price = 499;
console.log(price); // 499

This silent undefined is why var bugs are hard to find: the program keeps running with a wrong value instead of stopping with a clear error.

let, const and class: the temporal dead zone

let, const and class are also hoisted (the engine knows the names), but they are not initialised. From the start of the block until the declaration line runs, the variable is in the temporal dead zone (TDZ). Touching it there throws a ReferenceError. This is GOOD: a loud error is better than a silent undefined.

console.log(total); // ReferenceError: Cannot access 'total' before initialization
let total = 100;

let city = 'Pune';
function show() {
  console.log(city); // ReferenceError, not 'Pune'!
  let city = 'Goa';  // this inner city is hoisted to the top of show()
}
show();

Function expressions and arrows are not callable early

greet();             // TypeError: greet is not a function (with var)
var greet = function () { console.log('hi'); };

wave();              // ReferenceError (with const: TDZ)
const wave = () => console.log('bye');

Execution context and the call stack

Each time a function is called, the engine creates an execution context: a record holding that call's variables, its this value and a link to the outer scope. Contexts are pushed onto the call stack and popped off when the function returns. Hoisting happens at the creation of each context.