JavaScript Hoisting Explained – What Happens Behind the Scenes?

Have you ever used a variable or function before declaring it and wondered why your code still worked? That’s because of a JavaScript behavior called hoisting. It’s a crucial concept that every JavaScript developer should understand to avoid bugs and write cleaner code.

In this blog, we’ll explain what hoisting is, how it works with variables and functions, and show examples to make it crystal clear.

---

🧠 What is Hoisting?

Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope (global or function) before code execution. This means that variable and function declarations are processed before any code runs.

---

📝 Hoisting with var

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

Behind the scenes, JavaScript treats this as:

javascriptCopyEditvar a;          // Declaration hoisted to top
console.log(a); // undefined (initialized but no value yet)
a = 10;         // Assignment stays here
console.log(a); // 10

---

📝 Hoisting with let and const

Variables declared with let and const are also hoisted but are not initialized. Accessing them before declaration results in a ReferenceError due to the Temporal Dead Zone (TDZ).

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

---

📝 Hoisting with Functions

Function declarations are fully hoisted, meaning you can call them before their definition:

javascriptCopyEditgreet();

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

But function expressions (especially with var, let, or const) are not fully hoisted:

javascriptCopyEdithello(); // TypeError: hello is not a function

var hello = function() {
  console.log("Hi!");
};

Here, only the var hello declaration is hoisted, not the assignment.

---

🧰 Summary Table

Declaration Type	Hoisted?	Initialized?	Access Before Declaration Result
var	Yes	Yes (undefined)	undefined
let and const	Yes	No	ReferenceError (Temporal Dead Zone)
Function Declaration	Yes	Yes	Works fine
Function Expression	Declaration hoisted, assignment not	No	TypeError or ReferenceError

---

💡 Why Hoisting Matters

• Explains why some code runs even when variables/functions are declared later.
• Helps avoid unexpected bugs with variables accessed too early.
• Encourages better coding style: declare variables and functions at the top.

---

Conclusion:
Hoisting is a fundamental JavaScript behavior that affects how your code executes. Understanding it helps you write safer and more predictable programs.

🔥 Pro Tip: Always declare your variables at the top of their scope and use let or const for clearer, bug-free code!