Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 11 / 12Scope
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Scope
01 / 10Overview

Scope

You'll learn where a variable can be used, and why JavaScript sometimes says a variable "is not defined".

Why it mattersIn React, each component and each handler has its own variables, and knowing who can see what prevents confusing bugs.
about 60 min·needs: Values and variables, Functions in, values out, Loops
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Video
Learn JavaScript scoping in 10 minutesYouTube · Web Dev Simplified · 9 min · English
MMamun's noteWatch 0:30–4:02, then 5:53 to the end. Skip module scope (4:02–5:53); modules come in the next phase.
ArticleOptional
Variable scope: code blocksjavascript.info · 8 min · English
MMamun's noteRead only "Code blocks" and "Nested functions". Stop at "Lexical Environment"; that goes deeper than you need now.
VideoOptional
JavaScript Bangla tutorial #48: scopeYouTube · Learn with Sumit · 24 min · Bangla
MMamun's noteIn Bangla. A full lesson on scope. Watch it if "look outward, never inward" still feels unclear.
03 / 10

See it step by step

See which variables each line can use.

shop"Dhaka Mart"
checkout.js
1const shop = "Dhaka Mart";
2function checkout(price) {
3 const delivery = 60;
4 if (price > 500) {
5 const discount = 50;
6 return price + delivery - discount;
7 }
8 return price + delivery;
9}
10console.log(checkout(600));
shop is made outside every function. Every line below can see it.
Step 1 / 8
04 / 10

Explanation

You make a variable inside a function, then try to use it outside, and JavaScript says ReferenceError: delivery is not defined. The variable exists, so why can't it be found?

Every variable lives in a certain area of the code, called its scope. With let and const, that area is the nearest pair of curly braces { } around it, called a block. A function body, an if block and a loop body are all blocks.

Think of a house. Inside your room, you can see your own things and everything in the shared hallway. From the hallway, you can't see into the rooms.

const shop = "Dhaka Mart";        // hallway: everyone can see it
function checkout(price) {
  const delivery = 60;            // inside the room only
  console.log(shop);              // fine: looking outward
  return price + delivery;
}
console.log(delivery);            // ReferenceError

Code can look outward, never inward. checkout can read shop, which is outside it. The last line can't read delivery, because delivery only lives inside checkout. When the function ends, its variables are gone.

Two variables in different blocks can even have the same name. The inner one hides the outer one while you are inside its block. This is called shadowing. It is legal, but it confuses readers, so try to avoid it.

People often make a variable inside a loop or an if, then try to use it after the closing }. If you need it after the block, make it before the block.

When you see "is not defined", find where the variable was made. Then check: is the line that uses it inside the same { }, or inside one of its inner blocks?

Words to recognise
scopeblock{ }globallocalshadowingReferenceErroris not defined
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const shop = "Dhaka Mart";
Mentor note · line 1
shop is made outside every function, so any code below can read it.
2
3function checkout(price) {
const delivery = 60;
console.log(shop);
6 return price + delivery;
7}
console.log(delivery); // ReferenceError
9
10const name = "Rafi";
11function greet() {
const name = "Nusrat";
13 return "Hi " + name; // "Hi Nusrat"
14}
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1let total = 0;
2const paid = true;
3if (paid) {
4  let total = 50;
5}
6console.log(total);
What does this print?
DrillFind the bug2 / 2
cartTotal should add up every price in the cart. Right now it says total is not defined. Fix it so both checks pass.
1
2
3
4
5
6
7
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3const year = 2; is made at the top of the file. Can a function below read year?
  2. 2 / 3function pay() { const fee = 5; } What happens if you write console.log(fee) after the function?
  3. 3 / 3const name = "Rafi"; function hi() { const name = "Nusrat"; return name; } What does hi() return?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Scope?

10 / 10

Done

You can now
Point at any line and say which variables can be used there.
Next: Reading error messages Back to Phase 2
On this page
  1. 01Scope
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Scope
01 / 10Overview

Scope

You'll learn where a variable can be used, and why JavaScript sometimes says a variable "is not defined".

Why it mattersIn React, each component and each handler has its own variables, and knowing who can see what prevents confusing bugs.
about 60 min·needs: Values and variables, Functions in, values out, Loops
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Video
Learn JavaScript scoping in 10 minutesYouTube · Web Dev Simplified · 9 min · English
MMamun's noteWatch 0:30–4:02, then 5:53 to the end. Skip module scope (4:02–5:53); modules come in the next phase.
ArticleOptional
Variable scope: code blocksjavascript.info · 8 min · English
MMamun's noteRead only "Code blocks" and "Nested functions". Stop at "Lexical Environment"; that goes deeper than you need now.
VideoOptional
JavaScript Bangla tutorial #48: scopeYouTube · Learn with Sumit · 24 min · Bangla
MMamun's noteIn Bangla. A full lesson on scope. Watch it if "look outward, never inward" still feels unclear.
03 / 10

See it step by step

See which variables each line can use.

shop"Dhaka Mart"
checkout.js
1const shop = "Dhaka Mart";
2function checkout(price) {
3 const delivery = 60;
4 if (price > 500) {
5 const discount = 50;
6 return price + delivery - discount;
7 }
8 return price + delivery;
9}
10console.log(checkout(600));
shop is made outside every function. Every line below can see it.
Step 1 / 8
04 / 10

Explanation

You make a variable inside a function, then try to use it outside, and JavaScript says ReferenceError: delivery is not defined. The variable exists, so why can't it be found?

Every variable lives in a certain area of the code, called its scope. With let and const, that area is the nearest pair of curly braces { } around it, called a block. A function body, an if block and a loop body are all blocks.

Think of a house. Inside your room, you can see your own things and everything in the shared hallway. From the hallway, you can't see into the rooms.

const shop = "Dhaka Mart";        // hallway: everyone can see it
function checkout(price) {
  const delivery = 60;            // inside the room only
  console.log(shop);              // fine: looking outward
  return price + delivery;
}
console.log(delivery);            // ReferenceError

Code can look outward, never inward. checkout can read shop, which is outside it. The last line can't read delivery, because delivery only lives inside checkout. When the function ends, its variables are gone.

Two variables in different blocks can even have the same name. The inner one hides the outer one while you are inside its block. This is called shadowing. It is legal, but it confuses readers, so try to avoid it.

People often make a variable inside a loop or an if, then try to use it after the closing }. If you need it after the block, make it before the block.

When you see "is not defined", find where the variable was made. Then check: is the line that uses it inside the same { }, or inside one of its inner blocks?

Words to recognise
scopeblock{ }globallocalshadowingReferenceErroris not defined
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const shop = "Dhaka Mart";
Mentor note · line 1
shop is made outside every function, so any code below can read it.
2
3function checkout(price) {
const delivery = 60;
console.log(shop);
6 return price + delivery;
7}
console.log(delivery); // ReferenceError
9
10const name = "Rafi";
11function greet() {
const name = "Nusrat";
13 return "Hi " + name; // "Hi Nusrat"
14}
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1let total = 0;
2const paid = true;
3if (paid) {
4  let total = 50;
5}
6console.log(total);
What does this print?
DrillFind the bug2 / 2
cartTotal should add up every price in the cart. Right now it says total is not defined. Fix it so both checks pass.
1
2
3
4
5
6
7
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3const year = 2; is made at the top of the file. Can a function below read year?
  2. 2 / 3function pay() { const fee = 5; } What happens if you write console.log(fee) after the function?
  3. 3 / 3const name = "Rafi"; function hi() { const name = "Nusrat"; return name; } What does hi() return?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Scope?

10 / 10

Done

You can now
Point at any line and say which variables can be used there.
Next: Reading error messages Back to Phase 2
On this page
  1. 01Scope
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

You make a variable inside a function, then try to use it outside, and JavaScript says ReferenceError: delivery is not defined. The variable exists, so why can't it be found?

Every variable lives in a certain area of the code, called its scope. With let and const, that area is the nearest pair of curly braces { } around it, called a block. A function body, an if block and a loop body are all blocks.

Think of a house. Inside your room, you can see your own things and everything in the shared hallway. From the hallway, you can't see into the rooms.

const shop = "Dhaka Mart";        // hallway: everyone can see it
function checkout(price) {
  const delivery = 60;            // inside the room only
  console.log(shop);              // fine: looking outward
  return price + delivery;
}
console.log(delivery);            // ReferenceError

Code can look outward, never inward. checkout can read shop, which is outside it. The last line can't read delivery, because delivery only lives inside checkout. When the function ends, its variables are gone.

Two variables in different blocks can even have the same name. The inner one hides the outer one while you are inside its block. This is called shadowing. It is legal, but it confuses readers, so try to avoid it.

People often make a variable inside a loop or an if, then try to use it after the closing }. If you need it after the block, make it before the block.

When you see "is not defined", find where the variable was made. Then check: is the line that uses it inside the same { }, or inside one of its inner blocks?

Words to recognise
scopeblock{ }globallocalshadowingReferenceErroris not defined

You make a variable inside a function, then try to use it outside, and JavaScript says ReferenceError: delivery is not defined. The variable exists, so why can't it be found?

Every variable lives in a certain area of the code, called its scope. With let and const, that area is the nearest pair of curly braces { } around it, called a block. A function body, an if block and a loop body are all blocks.

Think of a house. Inside your room, you can see your own things and everything in the shared hallway. From the hallway, you can't see into the rooms.

const shop = "Dhaka Mart";        // hallway: everyone can see it
function checkout(price) {
  const delivery = 60;            // inside the room only
  console.log(shop);              // fine: looking outward
  return price + delivery;
}
console.log(delivery);            // ReferenceError

Code can look outward, never inward. checkout can read shop, which is outside it. The last line can't read delivery, because delivery only lives inside checkout. When the function ends, its variables are gone.

Two variables in different blocks can even have the same name. The inner one hides the outer one while you are inside its block. This is called shadowing. It is legal, but it confuses readers, so try to avoid it.

People often make a variable inside a loop or an if, then try to use it after the closing }. If you need it after the block, make it before the block.

When you see "is not defined", find where the variable was made. Then check: is the line that uses it inside the same { }, or inside one of its inner blocks?

Words to recognise
scopeblock{ }globallocalshadowingReferenceErroris not defined