JavaScript Simplified · One concept, one day, one project · Day 21 of 32

Scope

Where a variable can be reached, and where it cannot. Understanding scope fixes a whole class of confusing bugs. You build a small access checker along the way.

By the end of today you can

Explain what scope is
Tell global, function and block scope apart
See why let and const are block scoped
Build a user access checker

You have used variables for weeks. Now you learn where they live. Scope is the part of your code where a variable can be reached. Getting this clear removes a surprising number of "why is this undefined?" moments, and it is the gateway to modern JavaScript.

1. What Scope Is

Definition

Scope is the region of code where a variable exists and can be used. A variable made inside a function or a block lives only there; outside, it does not exist.

Real-Life Scenario

A key to a hotel room works on that room, not the whole building. A variable is like that key: it opens the place it was made for. Try to use it somewhere else and it simply does not work.

2. Global vs Function Scope

A variable made at the top level is global: reachable anywhere. A variable made inside a function is function scoped: reachable only inside that function.

What this code doesappName is global, so greet can see it. message lives only inside greet. Using message outside the function would be an error, because out there it does not exist.

app.js

const appName = "Webbo3"; // global: usable anywhere

function greet() {
  const message = "Hello"; // only inside greet
  console.log(message + " from " + appName);
}

greet();
console.log(appName); // fine, appName is global

OUTPUT   TERMINAL

➜ webbo3 node app.js
Hello from Webbo3
Webbo3

3. Block Scope

A block is any code inside curly braces: an if, a loop, and so on. let and const are block scoped: a variable made inside a block lives only in that block.

What this code doessecret exists only inside the if block. This is a good thing: variables stay where they are needed and do not leak out to cause clashes.

app.js

if (true) {
  const secret = "inside the block";
  console.log(secret); // works here
}

// console.log(secret) out here would be an error:
// secret only existed inside the if block
console.log("outside the block");

OUTPUT   TERMINAL

➜ webbo3 node app.js
inside the block
outside the block

This is why we prefer let and const

let and const are block scoped, which keeps variables tidy and predictable. The older var leaks out of blocks and causes surprises. Sticking to const (and let when you must) is the modern, safe default.

Today’s Mini Project

🔐 User Access Checker

A function that decides whether a user may enter, using variables scoped neatly inside it. The secret rules stay inside the function, where they belong.

What this code doesThe allowedRoles list and the check live inside canAccess, so nothing outside can see or change them. The function returns true only for an allowed, verified user.

app.js

function canAccess(role, isVerified) {
  // these live only inside the function
  const allowedRoles = ["admin", "editor"];
  const roleOk = allowedRoles.includes(role);
  return roleOk && isVerified;
}

console.log(canAccess("admin", true));   // allowed
console.log(canAccess("admin", false));  // not verified
console.log(canAccess("guest", true));   // wrong role

OUTPUT   TERMINAL

➜ webbo3 node app.js
true
false
false

Challenge (15 minutes)

Add a third rule: a user is also allowed if their role is "owner", no matter what. Expected: canAccess("owner", false) returns true.

Try This

Make a function with a const inside it, then try to log that const from outside. Read the error.

Expected: an error saying the variable is not defined. That is scope protecting it.

Picture This

Variables are no longer just boxes; they are boxes that live in a place. Knowing where a variable can be reached is what lets you read other people’s code, and your own from last week, without confusion.

Checkpoint

What is scope?

The region of code where a variable exists and can be used. A variable made inside a function or block lives only there.

What does it mean that let and const are block scoped?

A variable made with let or const inside a block (curly braces) exists only inside that block. Outside, it does not exist.

Why prefer let and const over var?

Because they are block scoped, keeping variables tidy and predictable. var leaks out of blocks and causes surprises.

Tick Before You Move On

☐ I can explain what scope is
☐ I can tell global, function and block scope apart
☐ I know let and const are block scoped
☐ I built the User Access Checker

Quick Recap

Scope is where a variable can be reached. Global variables are reachable anywhere; function variables only inside their function. let and const are block scoped: they live only inside their curly braces. Block scope keeps variables tidy, which is why we avoid var.

Next: Day 22. You will write a lot of functions from here on. Tomorrow you learn arrow functions, the modern, shorter way to write them.

Scope

1. What Scope Is

Definition

Real-Life Scenario

2. Global vs Function Scope

3. Block Scope

Today’s Mini Project

Checkpoint

Learn this with a real instructor