JavaScript Hoisting: Understanding Variables and Functions Before Execution

Here are two pieces of code. One works. One explodes. Can you guess which is which?

The twist:Code A printsundefined(no error!), while Code B runs perfectly — the function executesbeforeits own definition. 🤯

Both behaviors come from the same JavaScript mechanism:hoisting— the reason JavaScript seems to "know about" variables and functions before it reaches their lines. It's one of the most-asked interview topics in all of JavaScript, and one of the most misunderstood.

In this lesson, you'll learn what hoistingactuallyis (it's not what most tutorials say!), howvar,let,const, and functions each behave differently, and the mysterioustemporal dead zonethat's been name-dropped sinceLesson 4. Let's lift the curtain. 🎩

What Is Hoisting? (The Truth, Not the Myth) 🎈

The popular myth:"JavaScript physically moves declarations to the top of your file." ❌ Not true — your code never moves.

What actually happens:JavaScript runs your code intwo phases:

Phase 1: The Creation Phase 📋

Before executing a single line, JavaScript scans the entire scope andregisters all declarations— setting aside memory for every variable and function:

• vardeclarations → registered AND initialized toundefined
• let/constdeclarations → registered but leftuninitialized💀
• Function declarations → registeredcompletely(name + entire body!)

Phase 2: The Execution Phase ▶️

Now your code runs line by line — but the declarations are already in memory. That's why they're "known" before their lines execute.

Hoisting = the creation phase preparing memory before execution begins.Nothing moves; everything ispre-registered.

Hoisting with var: The Ghost Variable 👻

Whyundefinedand not an error?During the creation phase,var messagewas registered and initialized toundefined. So at execution time, the variableexists— it just holds the placeholderundefined.

How JavaScript effectively treats it:

⚠️Key insight:only thedeclarationis hoisted — theassignment stays put.This is the #1 hoisting misunderstanding in interviews.

Hoisting with let & const: The Temporal Dead Zone 💀

Now watch the same code withlet:

An error! But wait — didn't we say all declarations are hoisted? Yes! Andletishoisted… but with a twist:

let and const are hoisted but left UNINITIALIZED.The variable exists in memory, but JavaScript forbids touching it until the declaration line executes.

That forbidden window — from the start of the scope until the declaration line — is theTemporal Dead Zone (TDZ):

The Complete Comparison 🏆 (Interview Gold)

Which behavior is safer?The TDZ error, by far.var's silentundefinedlets bugs slip through;let/constscream immediately. This is yet another reason (with Lessons 4 and 10) that modern JavaScript abandonedvar— and a favorite interview follow-up:"Is let hoisted?"Yes — but the TDZ protects you from it.

🕳️ The Sneaky TDZ Trap

Watch this confusing classic:

You'd expect the global to print… but thelocallet brandis hoisted within the function, putting the whole function in its TDZ — shadowing the global (Lesson 10's shadowing!)beforeit even initializes. The function's own declaration blocks access to everything namedbrandabove the line.

Function Hoisting: The Full Ride 🎢

Function Declarations — FULLY Hoisted ✅

Function declarations are hoistedcompletely— nameandbody. The entire function is ready before execution begins. This is why helper functions can live at the bottom of a file while the main logic at the top calls them. Many developers use this deliberately:"main logic up top, helpers below."

Function Expressions — NOT Callable Early ❌

FromLesson 39:

Theconst greetvariable is hoisted into the TDZ — but the function value doesn't exist until the assignment line. Calling early hits the dead zone.

Arrow Functions — Same Rule ❌

And with var? The Halfway Trap 😬

Why TypeError, not ReferenceError?var greetwas hoistedandinitialized toundefined— so you're callingundefined()→ "not a function." Different keyword, different error, same broken result.

The Function Hoisting Summary 🃏

🎤 The Interview Hall of Fame

Test yourself against the classics:

If you can explain Q5'sundefined—local declaration hoisted, assignment in place, global shadowed— you understand hoisting better than most working developers. 🎓

Best Practices: Working WITH Hoisting 🏆

Hoisting isn't a bug to fight — it's a mechanism to respect:

1. Declare before you use—let/constat the top of their scope. The TDZ then protects you automatically.
2. Use let/const, never var— Lesson 4's rule; hoisting weirdness is a big reason why.
3. Define expressions before calling them— treatconst fn = …like a variable (because it is one!).
4. Function declarations anywhere— hoisting makes them location-flexible; many devs put main logic first, helpers below. That's a style choice hoisting makes safe.
5. When you seeundefinedunexpectedly— your first thought should now be:"Did something get used before its assignment?"🕵️

🛠️ See the Two Phases Live (Test Lab)

Output:

Three different hoisting behaviors, one scope, live proof. Run it yourself! 🔬

Common Beginner Mistakes (And Fixes)

Quick Self-Check: Lesson 40 Quiz 🧠

1. In one sentence: what is hoisting in JavaScript?
2. What's the output?
   script.js

   Copy Code Run Online

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

3. What's the output?
   script.js

   Copy Code Run Online

   console.log(b);
   let b = 10;

4. Why does a functiondeclarationwork before its line, but a functionexpressiondoesn't?
5. What's the output — and why?
   script.js

   Copy Code Run Online

   var n = 1;
   function f() {
     console.log(n);
     var n = 2;
   }f();

(Answers: 1. JavaScript's creation phase registers declarations in memory before executing code — var initialized to undefined, let/const uninitialized (TDZ), function declarations fully · 2. undefined — the declaration hoisted, the assignment stayed · 3. ReferenceError — b is in the temporal dead zone · 4. Declarations hoist completely (name + body); expressions are variables whose function value isn't assigned until the line runs · 5. undefined — the local var n hoists within f(), shadowing the global; the console.log runs before the local assignment)