Stop 04 · JavaScriptTopics · 5/36

Scope

Part of the Frontend Developer Roadmap

In short

Why can one function see a variable but another can't? Scope is the rulebook for where a variable lives and who's allowed to use it.

The rules that determine where a variable is accessible — global, function and block scope — and how nested scopes can 'see' outer variables. Scope is closely connected to closures, modules, debugging, and variable lifetime, making it one of the most important concepts for understanding non-trivial JavaScript.

The jaadu mascot peeks out of a hostel room towards the common room and the dining hall.

Think of it like this

Your room, your floor, the hostel

Your room's stuff is yours. The floor's common room is shared by your floor. The mess is for the whole hostel. You can walk out to use the mess, but the mess can't walk into your room. Inner scopes see outer ones, never the reverse.

Watch it happen

Where can each line see?

global: college
showRoom: room
if block: bed
global code

1/4console.log runs inside the if block. bed is found right here.

The big ideas

What you need to know

Global scope

Variables declared outside every function and block. Everyone can see them, which is exactly why you should keep them few.

Block scope

let and const live only inside the { } they're declared in, like an if or a for loop.

Decided by where you write it

This is called lexical scope. A function sees variables based on where it sits in the code, not where it's called from.

Lookup goes outward

JavaScript checks the current scope first, then the one around it, and keeps going up. This chain is the scope chain.

See it in code

Walk through the code

js
1const college = "DU";              // global2 3function showRoom() {4  const room = "B-204";            // function scope5  if (true) {6    const bed = "upper";           // block scope7    console.log(college, room, bed); // all three visible8  }9  // console.log(bed);             // ReferenceError: bed is not defined10}11 12showRoom();13// console.log(room);              // ReferenceError: room is not defined

1/4college lives in global scope, so every function can read it.

Each pair of curly braces with let or const inside creates a new box. Code inside can look out, but code outside can't look in.

Save yourself the pain

Common mistakes

Oops

Assigning to a name you never declared, like total = 5.

Do this instead

Always declare with const or let. In old non-strict scripts this silently creates a global. Modules throw an error instead.

Oops

Reusing the same name in an inner block and getting confused which one you're reading.

Do this instead

This is called shadowing. Give inner variables a different, clearer name.

Your mission

Map the scopes

~15 min

Quick check

What does this log? let x = 1; { let x = 2; } console.log(x);

Go deeper

  1. 1Nest functions and log which outer variables each inner function can access. Validate your understanding by applying it in a small practical example.
  2. 2Compare block scope (`let`/`const`) vs function scope (`var`). Write down when you would choose each option and what trade-off drives that choice.
  3. 3Learn lexical scoping — scope is determined by where code is written, not called.

More topics at this stop

Stuck on this topic? Ask an Insider

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

Download
InsideEdge