Hoisting in JavaScript

Hoisting in JavaScript – Complete Beginner to Advanced Guide

Hoisting is one of the most important and confusing concepts in JavaScript. Many beginners face bugs and errors because they don’t understand how hoisting works internally.

This detailed tutorial explains hoisting in JavaScript with simple language, multiple examples, real-world analogies, diagrams, interview points, and best practices.

---

🔹 What is Hoisting in JavaScript?

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope (not the initialization).

In simple words: JavaScript reads variable and function declarations first before executing code.

---

🧠 Important Point

• Only declarations are hoisted
• Initializations are NOT hoisted

---

📦 Variable Hoisting

❌ Hoisting with var

console.log(a); // undefined
var a = 10;

🧠 Explanation

var a;
console.log(a);
a = 10;

var a is hoisted, but a = 10 is not.

---

❌ Hoisting with let

console.log(b); // ReferenceError
let b = 20;

🧠 Explanation

let is hoisted but placed in the Temporal Dead Zone (TDZ).

---

❌ Hoisting with const

console.log(c); // ReferenceError
const c = 30;

const is also hoisted but in the Temporal Dead Zone.

---

⏳ Temporal Dead Zone (TDZ)

The time between variable hoisting and its initialization is called the Temporal Dead Zone.

{
   // TDZ starts
   console.log(x); // Error
   let x = 10;     // TDZ ends
}

---

🔁 Function Hoisting

✅ Function Declaration (Hoisted Fully)

sayHello();

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

Function declarations are fully hoisted.

---

❌ Function Expression (Not Hoisted)

sayHi(); // Error

const sayHi = function() {
console.log("Hi");
}; 

---

❌ Arrow Function (Not Hoisted)

sayBye(); // Error

const sayBye = () => {
console.log("Bye");
}; 

---

⚖ Hoisting Comparison Table

Type	Hoisted	Accessible Before Declaration
var	Yes	Yes (undefined)
let	Yes	No (TDZ Error)
const	Yes	No (TDZ Error)
Function Declaration	Yes	Yes
Function Expression	No	No
Arrow Function	No	No

---

🧠 Real-World Analogy

Imagine a classroom:

• Teacher takes attendance first (declarations)
• Then starts teaching (execution)

Hoisting = attendance before teaching

---

🚫 Common Hoisting Mistakes

• Using variables before declaration
• Using var instead of let/const
• Calling function expressions before definition
• Misunderstanding TDZ errors

---

📌 Best Practices

• Always declare variables at the top
• Use let and const
• Avoid var
• Declare functions before usage
• Write clean predictable code

---

❓ Interview Questions

• What is hoisting in JavaScript?
• Is let hoisted?
• What is Temporal Dead Zone?
• Difference between var and let hoisting?
• Are arrow functions hoisted?

---

✅ Conclusion

Hoisting is JavaScript’s internal mechanism that processes declarations before execution. Understanding hoisting helps prevent bugs, errors, and unexpected behavior in JavaScript applications.

Mastering hoisting means mastering JavaScript fundamentals.

---

🚀 Happy Learning JavaScript!

Follow this blog for JavaScript, Python, Automation, and Full-Stack Development tutorials.