What is Hoisting in JavaScript?
Learn what hoisting is in JavaScript, how var, let, const, and functions are hoisted differently, the temporal dead zone, and real code examples.
Expected Interview Answer
Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their scope during the compile phase, before any code executes. This means you can reference a function before its written position, but variables declared with var are hoisted as undefined while let/const are hoisted into a temporal dead zone.
During the creation phase, the JavaScript engine scans each scope and registers declarations in memory before running any statements line by line. Function declarations are hoisted completely, including their body, so calling one above its definition works fine. var declarations are hoisted and initialized to undefined, which is why reading a var-declared variable before its assignment gives undefined instead of an error. let and const are also hoisted, but they stay uninitialized in a temporal dead zone until the actual declaration line runs, so accessing them early throws a ReferenceError. Function expressions and arrow functions assigned to variables follow the hoisting rules of the variable, not the function.
- Explains why some code runs before its declaration line
- Clarifies var vs let/const initialization timing
- Helps debug ReferenceError from the temporal dead zone
- Foundational for understanding scope and execution context
- Prevents subtle bugs from relying on hoisting accidentally
AI Mentor Explanation
Hoisting is like the match officials registering every player's name on the team sheet before a ball is bowled, even though the players bat in a set order later. A declared all-rounder is on the sheet ready to play, but a substitute named only as 'to be confirmed' cannot take strike until the confirmation actually arrives.
Hoisting timeline: creation phase vs execution phase
Creation phase
- var → hoisted, set to undefined
- let/const → hoisted, in temporal dead zone
- function declarations → hoisted with full body
Execution phase
- var reads return undefined until assignment line
- let/const reads throw ReferenceError until declaration line
- function calls work anywhere in scope
Step-by-Step Explanation
Step 1
Creation phase scan
Before execution, the engine scans the current scope and registers all declarations in memory.
Step 2
var gets undefined
var declarations are hoisted and pre-initialized to undefined, so early reads return undefined, not an error.
Step 3
let/const enter the TDZ
let and const are hoisted but remain uninitialized until their declaration line runs, forming the temporal dead zone.
Step 4
Functions hoist fully
Function declarations hoist with their entire body, so calling them before their written position works.
Step 5
Execution phase runs
The engine then executes code top to bottom, assigning real values as each line is reached.
What Interviewer Expects
- Distinguishes hoisting behavior of var vs let/const
- Can define the temporal dead zone accurately
- Knows function declarations hoist fully, function expressions do not
- Explains why early var access gives undefined vs ReferenceError for let
- Connects hoisting to execution context creation phase
Common Mistakes
- Saying let and const are not hoisted at all
- Claiming hoisting physically moves code to the top
- Confusing function declarations with function expressions
- Not knowing the temporal dead zone term
- Assuming hoisting behaves the same across all declaration types
Best Answer (HR Friendly)
“Hoisting means JavaScript registers variable and function names ahead of time, before running the code line by line. This is why you can sometimes call a function before it appears in the file, but using certain variables too early causes errors.”
Code Example
console.log(a); // undefined
var a = 5;
try {
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
} catch (e) {
console.log(e.message);
}
greet(); // "Hi!" — works before definition
function greet() {
console.log('Hi!');
}Follow-up Questions
- What is the temporal dead zone exactly?
- Why does console.log(a) print undefined instead of throwing for var?
- Are function expressions hoisted the same way as function declarations?
- How does hoisting interact with block scope versus function scope?
- Does class hoisting behave like let/const or like function declarations?
MCQ Practice
1. What value does a var variable have if accessed before its assignment line?
var declarations are hoisted and initialized to undefined during the creation phase.
2. What happens if you access a let variable before its declaration line?
let and const remain uninitialized in the temporal dead zone until their declaration executes, so early access throws.
3. Which declaration type is hoisted along with its full body?
Function declarations are hoisted completely, including their implementation, unlike expressions or arrow functions.
Flash Cards
What is hoisting? — The JS engine registering declarations in memory during the creation phase, before code executes line by line.
var hoisting result? — Hoisted and initialized to undefined until the assignment line runs.
let/const hoisting result? — Hoisted but left in the temporal dead zone; early access throws ReferenceError.
Are function declarations fully hoisted? — Yes — including their body, so they can be called before their position in the file.