Introduction

Ever wondered why a variable you declared after a console.log still doesn’t throw an error — or worse, gives you undefined?

That weird behavior? It's called hoisting — one of JavaScript’s quirks that often leaves beginners (and even experienced devs) scratching their heads.

In this post, we’re going from “wait what just happened?” to “ah, I get it now!”.
Let’s demystify hoisting — with a super simple analogy and code examples that make it stick.

A Simple Analogy: The Script and the Stage

Imagine your JavaScript code is a theatre play.
Before the show starts, the director (JavaScript engine) goes backstage and says:

“Let me pull all the characters’ names (variable and function declarations) to the top of the script — so I know who’s in the play.”

But here’s the twist:
The director doesn’t move their lines or actions — just their names.

So when the show begins, the engine already knows what variables and functions exist, even if they don’t have their lines (values) yet.

What Is Hoisting Really?

In JavaScript:

• Declarations of variables and functions are moved to the top of their scope before code runs.

• Only the names are hoisted — not the values or assignments

So your code:

console.log(name);
var name = "Dhanraj";

Is treated like:

var name;
console.log(name); // undefined
name = "Dhanraj";

It doesn’t throw an error because name exists — but since the value isn't assigned yet, it's undefined.

Different Variables, Different Behavior

var — the Old School Actor

console.log(age); // undefined
var age = 27;

This works — but gives undefined. var is hoisted and initialized with undefined.

let and const — the Strict Professionals

console.log(city); // ❌ ReferenceError
let city = "Bangalore";

Even though city is hoisted, it's in the Temporal Dead Zone (TDZ) — a phase where the variable exists but cannot be used yet.

Think of it like the actor being backstage and not allowed on stage until their cue.

Function Hoisting — The Star Performer

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

✅ This works. Function declarations are fully hoisted — name and body.

But watch out:

sayHi(); // ❌ TypeError
var sayHi = function () {
  console.log("Hi!");
};

Here, only the variable sayHi is hoisted (as undefined), not the function expression. So it’s like trying to run undefined().

Same goes for arrow functions:

hello(); // ❌ ReferenceError
const hello = () => console.log("Hi!");

Hoisting Recap in 30 Seconds

Best Practices to Avoid Confusion

• Always declare your variables at the top of their scope

• Use let or const instead of var — they’re more predictable

• Don’t rely on hoisting to write clever code — it can make bugs harder to trace

• Keep functions and variables in a logical, top-to-bottom order

Conclusion

JavaScript hoisting might seem odd at first, but once you understand how the engine reads and rearranges your code, it becomes much easier to predict its behavior.

Just remember our theatre analogy — JavaScript likes to know who’s on the cast list before the play begins.

💬 Let’s Chat!

Enjoyed this post? Drop a comment or share it with your dev buddies. I’d love to hear your thoughts!