Hoisting in JavaScript

Hoisting in JavaScript

Why This Guide Is Different- Forget jargon. This guide uses analogies & simple examples to explain hoisting & TDZ — making them easy to understand & remember.

Hoisting in JavaScript (Analogy)

Hoisting in JavaScript is like raising a flag. In wars, you’ve probably seen flags being hoisted up a pole. Similarly, in JavaScript, certain parts of our code — declarations — are conceptually “raised” to the top of their scope.

But what exactly gets hoisted?

✔ Function declarations

✔ Variable declarations (var, let, const)

✔ Class declarations

✔ They’re all affected by hoisting, but they don’t behave the same way.⚠

❗Important: Hoisting doesn’t mean the code is physically moved. It’s just how JavaScript’s execution context processes declarations behind the scenes.

1. Function Hoisting

Function declarations are fully hoisted, meaning you can call them before they appear in the code.

callFriend(); // ✅ Works due to hoisting
function callFriend() {
    console.log("Call me!");
}

Think of it as JavaScript conceptually restructuring your code like this:

// Hoisted function declaration
function…