Hoisting and the temporal dead zone

What is hoisting?

Hoisting is a way to describe declarations being made available within their scope before their textual position is reached. In the lesson on function declarations and calls, we introduced declarations and expressions. Review that lesson first if the distinction is unfamiliar.

JavaScript statements normally execute from top to bottom, so you might expect calling a function before defining it to fail. That does happen in the first screenshot, which calls ong before the function expression has been assigned:

The second example uses a function declaration instead. It can be called before its textual declaration because of hoisting:

var, let, const, and initialization

It is useful to distinguish a variable's declaration from the later assignment of its value. Consider:

console.log(ong)
var ong = 1 // Split into: var ong; and ong = 1

The declaration var ong is available at the start of its scope, but the assignment ong = 1 does not run early.

Declaration keywords behave differently. A var binding is initialized to undefined, so reading it before the assignment prints undefined:

//ex) var
console.log(ong)
var ong = 1

With const or let, reading the binding before initialization produces a ReferenceError instead:

//ex) const
console.log(ong)
const ong = 1

//ex) let
console.log(ong)
let ong = 1

The interval between entering the scope and the binding's initialization is called the temporal dead zone, or TDZ. Trying to access a let or const binding during this interval causes the error shown by these examples.

Translation note: “moving declarations to the top” is a mental model, not a literal rewriting of the source. Error wording varies by engine. The key distinction is that var is initially available with undefined, while let and const remain inaccessible until initialized.