JavaScript Hoisting Explained (var, let, const)

Hoisting is one of the most misunderstood topics in JavaScript. It defines how variables and functions are processed before code execution. Let’s break it down step by step 👇

🔹 What is Hoisting?

Hoisting means that JavaScript moves variable and function declarations to the top of their scope before code runs. However, only the declarations are hoisted — not the initializations.

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

✅ Output: undefined

Here’s what actually happens behind the scenes:

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

This behavior is due to hoisting.

🔹 Hoisting with var

Variables declared with var are hoisted to the top of their scope and initialized with undefined.

console.log(name); // undefined
var name = 'Lokesh';

✅ Works, but returns undefined because the declaration is hoisted, not the value.

🔹 Hoisting with let and const

let and const are also hoisted but not initialized. They stay in a zone called the Temporal Dead Zone (TDZ) until the declaration is reached.

console.log(age); // ❌ ReferenceError
let age = 25;

⚠️ Accessing a let or const variable before declaration causes a ReferenceError.

🔹 Hoisting with Functions

Function declarations are fully hoisted, meaning you can call them before defining.

sayHello(); // ✅ Works

function sayHello() {
  console.log('Hello, Lokesh!');
}

But function expressions and arrow functions behave differently:

greet(); // ❌ TypeError

var greet = function() {
  console.log('Hi Lokesh');
};

Because var greet is hoisted as undefined, calling it before assignment causes a TypeError.

🔹 Example: var vs let vs const

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

console.log(y); // ReferenceError
let y = 10;

console.log(z); // ReferenceError
const z = 15;

👉 var is hoisted and initialized with undefined, while let and const stay in the TDZ until declaration.

🔹 Real-Life Example: Avoiding Bugs

function test() {
  console.log(a); // undefined
  var a = 20;
}

test();

If you’re not careful, var can cause unexpected results. Always prefer let and const for cleaner, predictable behavior.

🔹 Interview Trick Question

var a = 10;
(function() {
  console.log(a); // undefined
  var a = 5;
})();

✅ Output: undefined — because var a inside the function shadows the outer variable due to hoisting.

🔹 Summary

• var — hoisted & initialized as undefined
• let — hoisted but not initialized (TDZ)
• const — hoisted but must be initialized at declaration
• Function declarations are hoisted completely

💡 Tip:

Always declare variables at the top of their scope and use let or const to avoid hoisting confusion.

📚 FAQ

Q1: Is hoisting bad in JavaScript?

No, hoisting is part of how JavaScript works, but it can cause confusion if you don’t understand it properly.

Q2: What is the Temporal Dead Zone (TDZ)?

It’s the period between entering a scope and variable declaration where accessing the variable causes a ReferenceError.

Q3: Which is better — var, let, or const?

Always prefer let and const for block-scoped and predictable behavior. Avoid var in modern JavaScript.

Next Lesson:

In the next blog, we’ll explore JavaScript Execution Context and Call Stack — to understand what happens when your code actually runs!

Keep learning and keep building 🚀