Explain hoisting in JavaScript and how it differs between var, let, and const. What is the Temporal Dead Zone?

Question

Accepted Answer

Hoisting is the behaviour where variable and function declarations are processed before any code runs, so a name exists in its scope from the start even if the line declaring it appears later.

It helps to know what actually happens. Before executing a scope, the engine walks it and registers every declaration. Only the declaration is registered, never the assignment, which still happens where you wrote it. So hoisting moves the name, not the value.

The three declaration keywords behave differently. A var declaration is registered and initialised to undefined immediately, so reading it before the assignment line gives you undefined rather than an error. That silent undefined is the reason var causes confusing bugs. let and const are also hoisted, which surprises people, but they are not initialised. The binding exists but is unusable until execution reaches the declaration, and touching it before then throws a ReferenceError saying the variable cannot be accessed before initialisation.

That gap, between the start of the block and the line where the variable is initialised, is the Temporal Dead Zone. It is a deliberate design choice, not an oversight: it turns a class of silent bugs into loud errors. The word temporal matters, because the zone is about time during execution, not position in the file. A function defined above a let declaration but called after it will work fine.

Function declarations behave differently again. They are hoisted completely, name and body, so you can call a function before its declaration appears. Function expressions are not, because they are just a variable assignment; a function expression assigned to var gives you undefined is not a function if you call it early, and one assigned to const throws a TDZ error.

Scope differs too, and it interacts with hoisting. var is function-scoped, so it leaks out of blocks: declaring it inside an if or a for loop makes it visible throughout the entire function. let and const are block-scoped and stay inside their braces. This is why a var in a loop that creates closures gives every closure the same final value, while let gives each iteration its own binding.

The practical rule is straightforward: use const by default, let when the binding genuinely needs to be reassigned, and var essentially never in modern code. Declare variables at the point of first use rather than at the top of a function; the old convention of hoisting your own declarations existed to work around var and is unnecessary now.