Stop 04 · JavaScriptTopics · 6/36

Hoisting

In short

Sometimes you call a function before writing it and it works. Other times, using a variable too early crashes your code. Hoisting explains both.

JavaScript's behavior of moving variable and function declarations to the top of their scope during compilation — `var` and functions hoist differently than `let`/`const`. Hoisting is best understood as the result of how JavaScript creates bindings before executing code, rather than as literal source-code movement.

The jaadu mascot places cards on exam desks while one desk is roped off.

Think of it like this

The exam seating chart

Before anyone enters, the invigilator writes every roll number on the seating chart. A var seat is marked 'empty' so you can sit on nothing. A let or const seat is roped off until you arrive. Function declarations walk in early, answer sheet already filled.

Watch it happen

Two passes over the same code

Scan

Set up

Run

1/5Before running anything, JavaScript reads the scope and finds greet, a, b and sayBye.

The big ideas

What you need to know

Declarations are seen first

Before running a single line, JavaScript scans for declarations and sets up memory for them. The code isn't physically moved.

var starts as undefined

Read a var before its line and you get undefined, not an error. That silent behaviour hides bugs.

let and const have a dead zone

Until their line runs, they're in the Temporal Dead Zone. Touching them throws a ReferenceError.

Function declarations are fully ready

function greet() {} can be called from anywhere in its scope. Arrow functions and expressions follow their variable's rules.

See it in code

Walk through the code

1console.log(greet());   // "Namaste" (declaration is fully hoisted)2console.log(a);         // undefined (var is hoisted, the value isn't)3// console.log(b);      // ReferenceError: Cannot access 'b' before initialization4// sayBye();            // TypeError: sayBye is not a function5 6function greet() { return "Namaste"; }7var a = 5;8let b = 10;9var sayBye = () => "Bye";

1/4greet is a function declaration, so it's ready before line 1 runs.

sayBye is a var, so it exists early but holds undefined. Calling undefined like a function gives a TypeError, not a ReferenceError.

Save yourself the pain

Common mistakes

Oops

Believing JavaScript moves your code to the top of the file.

Do this instead

Nothing moves. Memory is set up for declarations before the code runs, that's all.

Oops

Relying on hoisting to use variables before declaring them.

Do this instead

Declare things before you use them. Code reads better top to bottom, and you avoid dead zone errors.

Your mission

Break it on purpose

~15 min

Quick check

What happens? console.log(total); let total = 5;

Go deeper

1Log a `var` variable before its declaration line and observe `undefined`. Validate your understanding by applying it in a small practical example.
2Try the same with a `let` variable and see the ReferenceError. Inspect the result in DevTools or the console and explain what you observed.
3Learn that function declarations are fully hoisted, but function expressions aren't.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download