Loading...
See how JavaScript hoisting works for var, let, const, and function declarations. Interactive visualization of the creation phase vs execution phase and the temporal dead zone.
Loading visualization...
Hoisting is the pre-execution setup step where JavaScript registers declarations before running code, which explains function access before definition and the temporal dead zone for block-scoped bindings.
Before JavaScript executes a scope, it creates bindings for declarations found in that scope. This setup phase is commonly described as hoisting.
Function declarations are fully initialized during setup, so they can be called before the line where they appear. Variable bindings differ by declaration type.
var creates a binding initialized to undefined during setup. let and const create bindings too, but they are uninitialized until execution reaches the declaration, which creates the temporal dead zone.
Interview framing: define Hoisting in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
The source code order does not change. Hoisting is about how bindings are prepared before execution, not textual relocation.
Fix: Model hoisting as environment setup, then read runtime behavior from top to bottom.
let and const are hoisted as bindings, but they cannot be used before initialization and throw a ReferenceError in the temporal dead zone.
Fix: Declare block-scoped variables near first use and avoid early access patterns.
Only function declarations are initialized early. A function expression assigned to const or let is unavailable before that assignment runs.
Fix: Call function expressions only after the assignment line has executed.
Common interview prompts with concise model answers.
No. Hoisting describes binding creation before execution. The temporal dead zone is the period where a let or const binding exists but is still uninitialized.
sayHi(); // works
function sayHi() { console.log("hi"); }
console.log(counter); // ReferenceError (TDZ)
let counter = 1;Because function declarations are initialized during the setup phase for their scope, so the binding points to a callable function before execution reaches that line.
Class bindings are created before execution, but like let and const they are in a temporal dead zone until initialization, so early access throws an error.
It is better to write declarations in a clear top-down flow. Understanding hoisting helps debugging, but explicit ordering improves readability.
Continue with these concepts to strengthen your mental model.
console.log(name);var name = "Alice";console.log(name);var name; console.log(name);name = "Alice";console.log(name);No output yet.