What Is Hoisting in JavaScript?
Learn what hoisting is in JavaScript, how var differs from let/const, and the temporal dead zone with clear examples.
Expected Interview Answer
Hoisting is JavaScript’s behavior of processing variable and function declarations during the compile phase, before any code executes, so declared names exist in scope from the top of that scope even though their assigned values only become available at the line where they are actually set.
Function declarations are hoisted completely — both name and body — so they can be called before their definition appears in the file. Variables declared with var are hoisted and initialized to undefined immediately, which is why reading a var before its assignment gives undefined rather than an error. Variables declared with let and const are also hoisted in the sense that the engine knows about them, but they remain in a “temporal dead zone” from the start of the block until the declaration line executes, so accessing them early throws a ReferenceError instead of returning undefined. Understanding hoisting matters because it explains real bugs: calling a function-expression variable before assignment, or relying on var leaking outside a block where let would have caught the mistake at development time.
- Explains why function declarations can be called before they appear in the file
- Clarifies the difference between var's undefined-early behavior and let/const's temporal dead zone
- Helps developers avoid a class of order-dependent bugs
- Makes code review of legacy var-based code much easier to reason about
AI Mentor Explanation
Hoisting is like a team sheet posted on the dressing room wall before the match starts, listing every player’s name even though their actual batting order position gets filled in only as the toss and strategy meeting happen. If you check the sheet early for a var-style player, you see a blank slot — not an error, just empty. But a let-style player added under strict new rules is not even allowed to be looked up until the captain formally announces them, and doing so early gets you thrown out of the room. That early-name-visibility-but-late-value-assignment pattern is exactly how JavaScript hoisting works.
Step-by-Step Explanation
Step 1
Compile phase scans the scope
Before execution, the engine scans the current scope for var, let, const, and function declarations.
Step 2
Function declarations are fully hoisted
The entire function, name and body, is available anywhere in that scope, even above its definition.
Step 3
var is hoisted and initialized to undefined
Reading a var before its assignment line returns undefined rather than throwing.
Step 4
let/const enter the temporal dead zone
They exist in scope but remain inaccessible until their declaration line executes, throwing a ReferenceError if accessed early.
What Interviewer Expects
- Distinguishing function-declaration hoisting from variable hoisting
- Explaining the temporal dead zone for let and const specifically
- A concrete example showing undefined (var) vs ReferenceError (let)
- Practical implication: why block-scoped declarations catch more bugs early
Common Mistakes
- Claiming let and const are not hoisted at all, rather than being in the temporal dead zone
- Confusing function declarations with function expressions assigned to var
- Saying hoisting “moves code to the top” rather than explaining the compile-phase scan
- Not knowing that hoisting is scoped per function/block, not global to the file
Best Answer (HR Friendly)
“Hoisting means JavaScript notices your variable and function names before it actually runs your code line by line. Functions declared normally can be used before they appear in the file, while variables declared with var show up as undefined if you use them too early, and let or const will actually give you an error if you try that.”
Code Example
console.log(hoistedVar) // undefined, no error
var hoistedVar = 'assigned later'
console.log(sayHi()) // works: function declarations are fully hoisted
function sayHi() {
return 'hi'
}
console.log(hoistedLet) // ReferenceError: temporal dead zone
let hoistedLet = 'never reached'Follow-up Questions
- What is the temporal dead zone and why does it exist?
- Are function expressions assigned to const hoisted the same way as function declarations?
- How does hoisting differ between global scope, function scope, and block scope?
- Why does using let instead of var in loops fix common closure bugs?
MCQ Practice
1. What happens when you read a var-declared variable before its assignment line?
var declarations are hoisted and initialized to undefined until the assignment line executes.
2. What happens when you read a let-declared variable before its declaration line in the same block?
let and const are hoisted but stay inaccessible in the temporal dead zone until their line executes.
3. Which declarations are hoisted with both their name and full body?
Function declarations are hoisted completely, allowing calls before their textual definition.
Flash Cards
What is hoisting? — JavaScript processing declarations during the compile phase before code executes.
var read before assignment? — Returns undefined, no error.
let/const read before declaration? — Throws ReferenceError — the temporal dead zone.
What is fully hoisted, name and body? — Function declarations (not function expressions).