If you are learning or working with JavaScript, you've probably heard the word "hoisting" before. Maybe you’ve even seen it come up in an interview question or two.
Let’s talk about what hoisting really means, how it affects your code, and why understanding it can help you avoid bugs and write better JavaScript.
📚 So What Exactly is Hoisting?
In simple terms
Hoisting is JavaScript's default behavior of moving declarations to the top of their scope before code execution.
When you write JavaScript, the JavaScript engine (like V8 in Chrome) doesn’t just run your code line by line as-is. First, it does a pass over your code called parsing, where it sets things up, like variables and functions, so they’re ready when the code runs.
So during this parsing phase, declarations (not assignments) are moved to the top of their scope.
But again, only declarations, not values.
🧩 Types of Hoisting
There are two main types of hoisting in JavaScript:
- Function Hoisting
- Variable Hoisting
Let’s go through each one with real examples.
🔁 Function Hoisting
✅ Function Declarations Are Hoisted
You can call a function before you define it if you use a function declaration .
sayHello(); // This works!
function sayHello() {
console.log("Hello!");
}
Even though sayHello() is called before its definition, JavaScript hoists the entire function declaration to the top.
❌ Function Expressions are not Hoisted
But if you assign a function to a variable, it behaves differently.
sayHi(); // TypeError: sayHi is not a function
var sayHi = function () {
console.log("Hi!");
};
This happens because only the variable declaration (sayHi) is hoisted — not the assignment.
So at runtime, sayHi exists but is still undefined, which causes the error.
💡 Variable Hoisting
Variables declared with var are also hoisted, but only the declaration, not the value.
Example
console.log(name); // undefined
var name = "Alice";
What’s happening behind the scenes:
var name; // Declaration hoisted
console.log(name); // Still undefined
name = "Alice"; // Assignment stays in place
So the variable is declared early, but the assignment happens where you wrote it.
🛠️ Let and Const: A Special Case
Variables declared with let and const are also hoisted , but with a twist called the Temporal Dead Zone (TDZ) .
This means they exist in memory, but trying to access them before the actual declaration results in an error.
console.log(age); // ReferenceError
let age = 25;
They're technically hoisted, but you can't use them until after they're declared.
This helps prevent subtle bugs that var hoisting can cause.
🎯 Real-World Use Cases and Scenarios
Now let’s look at when hoisting matters , and some scenarios where knowing hoisting helps .
✅ 1. Writing Cleaner Code with Functions on Top
Sometimes developers write all function definitions at the top of a file or module, and logic below. That works well with hoisting.
// Setup
setupPage();
// Functions
function setupPage() {
console.log("Page setup complete");
}
This makes the entry point clear and keeps the logic organized.
⚠️ 2. Avoiding Bugs with Variables
Using var carelessly can lead to confusion.
if (!user) {
var user = "Guest";
}
console.log(user); // "Guest"
Even though the var user seems inside the if block, due to function-level scoping , it’s hoisted to the top of the function or global scope.
Use let and const instead to avoid these issues.
✅ 3. Modular Code Design with IIFEs (Immediately Invoked Function Expressions)
Older JavaScript patterns used IIFEs to avoid hoisting-related issues and keep variables private.
(function () {
var message = "I'm private!";
console.log(message);
})();
This was useful before ES6 modules became standard.
🧪 Interview Questions & Answers About Hoisting
Here are some common questions you might get in an interview, along with answers that show deep understanding.
Q 1. What is hoisting in JavaScript?
Ans
Hoisting is JavaScript’s behavior of moving declarations (variables and functions) to the top of their scope before code execution. It allows functions to be called before they're defined and variables to be accessed before their physical location in code.
However, only declarations are hoisted, not initializations.
Q 2. What’s the difference between var, let, and const regarding hoisting?
Ans
var: Hoisted and initialized with undefined.let and const: Also hoisted, but not initialized. Accessing them before declaration throws a ReferenceError due to the Temporal Dead Zone.
Q 3. Can you call a function before it’s declared?
Ans
Yes, if it's a function declaration.
sayHi(); // Works
function sayHi() { console.log("Hi"); }
No, if it's a function expression assigned to a variable.
Q 4. What will this code output?
console.log(x);
var x = 5;
Ans
It logs undefined. The declaration var x is hoisted, but the assignment x = 5 remains in place.
Q 5. What’s the Temporal Dead Zone?
Ans
The Temporal Dead Zone (TDZ) is the period between entering a scope and the actual declaration of a variable using let or const. Trying to access the variable in this zone throws an error.
Example
console.log(y); // TDZ in action
let y = 10;
🧠 Final Thoughts: Should You Rely on Hoisting?
While hoisting is a built-in feature of JavaScript, relying too much on it can make your code harder to read and debug .
Best Practices
- Declare variables and functions before using them.
- Prefer
const and let over var for predictable scoping.
- Keep your code readable and maintainable by avoiding confusing hoisting patterns.
Understanding hoisting helps you write better JavaScript , avoid bugs, and ace interviews.
📝 Summary
| Concept |
Description |
| Hoisting |
JS moves declarations to the top of their scope before execution |
| Function Hoisting |
Function declarations can be called before they’re defined |
| Variable Hoisting |
Only declarations (not assignments) are hoisted |
| var vs let/const |
varis hoisted and initialized;letandconstare hoisted but not initialized |
| Temporal Dead Zone |
Time between entering a scope and declaring aletorconstvariable |
| Best Practice |
Don’t rely on hoisting — declare variables and functions first |
Got any more questions? Want to see hoisting in a real app scenario or debugging tips? Just ask!
Join the conversation! Your thoughts help the community grow.