Hoisting Theory
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.
What it is
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.
How it works
- Step 1: JavaScript parses the scope and records declarations.
- Step 2: function declarations are initialized immediately in memory with callable function objects.
- Step 3: var bindings are initialized to undefined, while let and const remain uninitialized.
- Step 4: execution runs line by line, assigning values and lifting let/const bindings out of the temporal dead zone only when their declarations are evaluated.
Common mistakes
Thinking declarations are physically moved
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.
Treating let and const like var
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.
Assuming function expressions are callable before assignment
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.
Interview questions
Common interview prompts with concise model answers.
Is hoisting the same as the temporal dead zone?
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;Why can function declarations be called before they appear?
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.
Are class declarations hoisted?
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.
Should production code rely on hoisting behavior?
It is better to write declarations in a clear top-down flow. Understanding hoisting helps debugging, but explicit ordering improves readability.
Related concepts
Continue with these concepts to strengthen your mental model.