What is Hoisting in JavaScript?
Understand hoisting in JavaScript: how var, let, const and functions are hoisted, plus the temporal dead zone, with examples and interview answers.
Expected Interview Answer
Hoisting is JavaScript's behavior of moving the declarations of variables and functions to the top of their scope during compilation, so they can be referenced before the line where they appear in the code.
Before execution, the engine scans the scope and registers declarations. Function declarations are hoisted with their full body, so they can be called before they are written. var variables are hoisted but initialized to undefined, so using them early returns undefined rather than an error. let and const are also hoisted but remain in the temporal dead zone and throw a ReferenceError if accessed before their declaration. Only declarations are hoisted — assignments stay in place.
- Explains why function declarations can be called before they are defined
- Clarifies why var variables read as undefined early
- Helps predict ReferenceError from the temporal dead zone
- Encourages declaring variables at the top for readable code
- Deepens understanding of how the JavaScript engine processes scope
AI Mentor Explanation
Hoisting is like a match program listing every player before the game starts. The names (declarations) are printed at the top so everyone knows who exists, but their actual runs (assigned values) are filled in only as each batter plays, not before they walk out to the crease.
Step-by-Step Explanation
Step 1
Compilation scan
Before running code, the engine scans each scope and registers variable and function declarations.
Step 2
Function declarations
These are hoisted with their full body, so they can be called before they appear in the source.
Step 3
var variables
The name is hoisted and initialized to undefined, so early access returns undefined, not an error.
Step 4
let and const
These are hoisted but left uninitialized in the temporal dead zone, throwing a ReferenceError if used early.
Step 5
Assignments stay put
Only declarations move; the actual value assignments run in their original order during execution.
What Interviewer Expects
- A clear definition of hoisting as moving declarations to the top of scope
- Distinction between hoisting function declarations vs var vs let/const
- Understanding that var initializes to undefined while let/const do not
- Knowledge of the temporal dead zone and the ReferenceError it causes
- Awareness that assignments are not hoisted, only declarations
Common Mistakes
- Saying let and const are not hoisted at all
- Claiming assignments are hoisted along with declarations
- Confusing function declarations with function expressions, which are not fully hoisted
- Thinking accessing a var before declaration throws an error instead of returning undefined
- Believing hoisting physically rewrites and reorders the source code
Best Answer (HR Friendly)
“Hoisting is a JavaScript feature where the language quietly moves variable and function declarations to the top of their scope before the code runs. That is why you can sometimes call a function before you have written it in the file, though modern let and const rules make you declare variables before you use them.”
Code Example
// Function declarations are fully hoisted
greet(); // 'Hello!' works even though defined below
function greet() {
console.log('Hello!');
}
// var is hoisted but initialized to undefined
console.log(count); // undefined, not an error
var count = 5;
console.log(count); // 5
// let and const are hoisted but in the temporal dead zone
// console.log(total); // ReferenceError
let total = 10;Follow-up Questions
- Are function expressions hoisted the same way as function declarations?
- Why do let and const throw a ReferenceError before declaration?
- What exactly is the temporal dead zone?
- Does hoisting move assignments as well as declarations?
- How does hoisting interact with variable scope inside functions?
MCQ Practice
1. What value does a var variable have if accessed before its declaration line?
var declarations are hoisted and initialized to undefined, so accessing them early returns undefined rather than throwing.
2. What happens when you access a let variable before its declaration?
let and const are hoisted but stay in the temporal dead zone until declared, so early access throws a ReferenceError.
3. Which of these is fully hoisted with its implementation?
Function declarations are hoisted along with their body, so they can be called before they appear in the code.
Flash Cards
What is hoisting? — The engine moving variable and function declarations to the top of their scope before code runs.
How is var hoisted? — Its name is hoisted and initialized to undefined, so early access returns undefined.
How are let and const hoisted? — They are hoisted but uninitialized in the temporal dead zone, so early access throws a ReferenceError.
Are assignments hoisted? — No. Only declarations are hoisted; value assignments run in their original position.