📘 Lesson · Lesson 25

Hoisting

What Hoisting Is

sayHello();               // ✓ This WORKS, even though it's called first!

function sayHello() {
    console.log("Hello!");
}

Hoisting is JavaScript's behaviour of moving declarations to the TOP of their scope before the code runs. That's why you can call a function before you've written it — JavaScript "saw" the declaration first. What actually happens: before executing anything, JavaScript scans your code and registers all declarations in memory. Only then does it run your code line by line. Understanding this explains several confusing behaviours, and it's a favourite interview topic. The key nuance: declarations are hoisted, but not always their VALUES.

var Hoisting — declared but undefined

console.log(x);       // undefined  (NOT an error!)
var x = 5;
console.log(x);       // 5

// JavaScript effectively treats it as:
var x;                // ← declaration hoisted to the top
console.log(x);       // undefined — declared, but no value yet
x = 5;                // ← the assignment stays in place
console.log(x);       // 5

A var declaration is hoisted, but its assignment is NOT. So the variable exists from the start of the scope, holding undefined until the line that assigns it actually runs. This is why console.log(x) before var x = 5 prints undefined rather than throwing an error. It looks harmless, but it hides bugs: code that reads a variable "too early" silently gets undefined instead of alerting you to the mistake. This is another mark against var.

let and const — the Temporal Dead Zone

console.log(y);       // ✗ ReferenceError: Cannot access 'y' before initialization
let y = 5;

console.log(z);       // ✗ ReferenceError (same for const)
const z = 10;

let and const ARE hoisted too — but they're placed in a "temporal dead zone" (TDZ) and cannot be accessed until their declaration line runs. Instead of silently giving you undefined like var, they throw a clear ReferenceError. This is a deliberate improvement: it catches the mistake loudly instead of letting a mysterious undefined flow through your program. The TDZ is the region between the start of the block and the declaration line. In short — var hides the error, let/const reveal it. Another reason to prefer them.

Function Hoisting — declarations vs expressions

// ✓ Function DECLARATIONS are fully hoisted (body and all):
greet();                      // works!
function greet() { console.log("Hi"); }

// ✗ Function EXPRESSIONS are not:
sayHi();                      // ✗ ReferenceError (or TypeError with var)
const sayHi = function() { console.log("Hi"); };

// ✗ Arrow functions behave the same as expressions:
double(2);                    // ✗ ReferenceError
const double = n => n * 2;

This is the most practically important distinction. A function DECLARATION (function greet() {}) is hoisted completely — name AND body — so you can call it from anywhere in its scope, even above where it's written. A function EXPRESSION (const greet = function() {}) is really just a variable assignment, so it follows variable rules: the const is in the temporal dead zone until that line runs, and calling it early throws an error. Arrow functions, being expressions, behave identically. Bottom line: declarations can be called before they're defined; expressions and arrows cannot.

Best Practices — don't rely on hoisting

Declare variables at the top of their scope, before you use them — then hoisting never surprises you.
Use const and let, never var — the TDZ turns silent bugs into clear errors.
Define functions before calling them where practical, so the code reads top-to-bottom in the order it runs.
Know it for interviews: "explain hoisting" and "what does console.log(x); var x = 5; print?" are extremely common questions.

Hoisting is best understood as something to be AWARE of, not something to exploit. Code that depends on hoisting — calling functions before defining them, reading variables before declaring them — is harder to read and reason about. Write your code in the order it executes, use let/const, and hoisting becomes a piece of trivia you understand rather than a trap you fall into. That completes the Functions group; next, you'll put functions to work on collections of data.

Exam Corner

Q: What is hoisting? JavaScript moving declarations to the top of their scope before execution.

Q: What does console.log(x); var x = 5; print? undefined — the declaration is hoisted, the assignment isn't.

Q: What happens with let instead of var there? A ReferenceError — it's in the temporal dead zone.

Q: Can you call a function declaration before it's written? Yes — declarations are fully hoisted.

Q: Can you call a function expression or arrow function before it's defined? No — they follow variable rules and throw an error.

Hoisting क्या है

sayHello();               // ✓ Yeh CHALTA hai, pehle call hone ke bavjood!

function sayHello() {
    console.log("Hello!");
}

Hoisting JavaScript का वह व्यवहार है जिसमें code चलने से पहले declarations अपने scope के UPAR खिसका दिए जाते हैं. इसीलिए आप function को लिखने से पहले call कर सकते हैं — JavaScript ने declaration पहले "देख" लिया. असल में क्या होता है: कुछ भी execute करने से पहले, JavaScript आपका code scan करके सारे declarations memory में दर्ज करता है. तभी वह आपका code line-दर-line चलाता है. यह समझना कई उलझाने वाले व्यवहार समझाता है, और यह पसंदीदा interview विषय है. मुख्य बारीकी: declarations hoist होते हैं, पर हमेशा उनकी VALUES नहीं.

var Hoisting — declared पर undefined

console.log(x);       // undefined  (error NAHI!)
var x = 5;
console.log(x);       // 5

// JavaScript ise asal me aise samajhta hai:
var x;                // ← declaration ooper hoist hua
console.log(x);       // undefined — declared, par abhi koi value nahi
x = 5;                // ← assignment apni jagah rehta hai
console.log(x);       // 5

var declaration hoist होता है, पर उसका assignment NAHI. तो variable scope की शुरुआत से मौजूद है, undefined रखते जब तक उसे assign करने वाली line असल में न चले. इसीलिए var x = 5 से पहले console.log(x) error फेंकने के बजाय undefined print करता है. यह हानिरहित लगता है, पर bugs छुपाता है: वह code जो variable "बहुत जल्दी" पढ़े चुपचाप undefined पाता है बजाय आपको गलती बताने के. यह var के खिलाफ एक और निशान है.

let और const — Temporal Dead Zone

console.log(y);       // ✗ ReferenceError: Cannot access 'y' before initialization
let y = 5;

console.log(z);       // ✗ ReferenceError (const ke liye bhi vahi)
const z = 10;

let और const भी hoist HOTE हैं — पर वे "temporal dead zone" (TDZ) में रखे जाते हैं और उनकी declaration line चलने तक access नहीं हो सकते. var की तरह चुपचाप undefined देने के बजाय, वे साफ ReferenceError फेंकते हैं. यह जानबूझकर सुधार है: यह गलती को ज़ोर से पकड़ता है बजाय रहस्यमय undefined को आपके program में बहने देने के. TDZ block की शुरुआत और declaration line के बीच का क्षेत्र है. संक्षेप में — var error छुपाता है, let/const उजागर करते हैं. उन्हें पसंद करने का एक और कारण.

Function Hoisting — declarations vs expressions

// ✓ Function DECLARATIONS poori tarah hoist hote hain (body sameet):
greet();                      // chalta hai!
function greet() { console.log("Hi"); }

// ✗ Function EXPRESSIONS nahi:
sayHi();                      // ✗ ReferenceError (ya var ke saath TypeError)
const sayHi = function() { console.log("Hi"); };

// ✗ Arrow functions expressions jaisa hi vyavhar karte hain:
double(2);                    // ✗ ReferenceError
const double = n => n * 2;

यह व्यावहारिक रूप से सबसे ज़रूरी भेद है. Function DECLARATION (function greet() {}) पूरी तरह hoist होता है — नाम AUR body — तो आप उसे अपने scope में कहीं से भी call कर सकते हैं, उसके लिखे जाने से ऊपर भी. Function EXPRESSION (const greet = function() {}) असल में बस variable assignment है, तो यह variable rules follow करता है: const उस line के चलने तक temporal dead zone में है, और जल्दी call करना error फेंकता है. Arrow functions, expressions होने से, एक जैसा व्यवहार करते हैं. निचोड़: declarations define होने से पहले call हो सकते हैं; expressions और arrows नहीं.

Best Practices — hoisting पर भरोसा मत कीजिए

Variables अपने scope के ऊपर declare कीजिए, use करने से पहले — तब hoisting आपको कभी नहीं चौंकाएगा.
const और let use कीजिए, कभी var नहीं — TDZ चुप bugs को साफ errors में बदलता है.
Functions call करने से पहले define कीजिए जहां व्यावहारिक हो, ताकि code उसी order में ऊपर से नीचे पढ़े जिसमें चलता है.
Interviews के लिए जानिए: "hoisting समझाइए" और "console.log(x); var x = 5; क्या print करता है?" बेहद common सवाल हैं.

Hoisting को ऐसी चीज़ समझना सबसे अच्छा है जिसके बारे में JAAGRUK रहना है, न कि जिसका फायदा उठाना है. वह code जो hoisting पर निर्भर हो — functions को define करने से पहले call करना, variables को declare करने से पहले पढ़ना — पढ़ने और समझने में मुश्किल है. अपना code उसी order में लिखिए जिसमें वह चलता है, let/const use कीजिए, और hoisting एक trivia बन जाता है जिसे आप समझते हैं बजाय जाल जिसमें आप गिरते हैं. यह Functions group पूरा करता है; अगला, आप functions को data के संग्रह पर काम में लगाएंगे.

Exam Corner

Q: Hoisting क्या है? Execution से पहले JavaScript का declarations को उनके scope के ऊपर ले जाना.

Q: console.log(x); var x = 5; क्या print करता है? undefined — declaration hoist होता है, assignment नहीं.

Q: वहां var के बजाय let हो तो क्या होता है? ReferenceError — यह temporal dead zone में है.

Q: क्या function declaration को लिखने से पहले call कर सकते हैं? हां — declarations पूरी तरह hoist होते हैं.

Q: क्या function expression या arrow function को define होने से पहले call कर सकते हैं? नहीं — वे variable rules follow करते हैं और error फेंकते हैं.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.