Excellent. From this chapter onward, we're moving beyond "beginner syntax" into concepts that help you write reliable, bug-free code.
Chapter 9 — Scope
🎯 Goal (1 line)
Learn where variables exist and where they don't, so you avoid one of the most common JavaScript bugs.
Think Like a Programmer
Imagine your house.
🏠 Living room → Everyone in the house can use it.
🚪 Bedroom → Only people inside can use it.
Variables work the same way.
Some are available everywhere.
Some exist only inside a block or function.
That's called scope.
1. Block Scope
Anything inside {} creates a new scope.
if (true) {
const message = "Hello";
console.log(message);
}
Output
Hello
But...
if (true) {
const message = "Hello";
}
console.log(message);
Output
ReferenceError
Why?
Because message only exists inside the {}.
2. let and const are Block Scoped
{
let age = 25;
const city = "Delhi";
}
console.log(age);
console.log(city);
Output
ReferenceError
ReferenceError
3. Variables Outside Are Accessible Inside
const name = "Alice";
if (true) {
console.log(name);
}
Output
Alice
Think of it like this:
Outside
│
├── name
│
└── if {
Can use name ✔
}
The inside can "see" the outside.
The outside cannot see the inside.
4. Function Scope
Variables inside a function stay inside.
function greet() {
const message = "Hello";
console.log(message);
}
greet();
console.log(message);
Output
Hello
ReferenceError
5. Variable Shadowing
You can create another variable with the same name inside a block.
const city = "Delhi";
if (true) {
const city = "Mumbai";
console.log(city);
}
console.log(city);
Output
Mumbai
Delhi
The inner city shadows the outer one.
MCQs
Q1
What is scope?
A. A loop
B. Where a variable can be used
C. A function
D. An object
✅ Answer
B
Q2
Output?
const age = 25;
console.log(age);
A. 25
B. undefined
C. Error
D. null
✅ Answer
A
Q3
Output?
if (true) {
const name = "Tom";
}
console.log(name);
A. Tom
B. undefined
C. ReferenceError
D. null
✅ Answer
C
Q4
Output?
const city = "Delhi";
if (true) {
console.log(city);
}
A. Delhi
B. undefined
C. Error
D. Mumbai
✅ Answer
A
Q5
Output?
{
let score = 100;
}
console.log(score);
A. 100
B. undefined
C. ReferenceError
D. 0
✅ Answer
C
Q6
Output?
function test() {
const message = "Hi";
console.log(message);
}
test();
A.
Hi
B.
undefined
C. Error
D. null
✅ Answer
A
Q7
Output?
function test() {
const message = "Hi";
}
test();
console.log(message);
A. Hi
B. undefined
C. ReferenceError
D. null
✅ Answer
C
Q8
Output?
const fruit = "Apple";
{
const fruit = "Banana";
console.log(fruit);
}
console.log(fruit);
A.
Apple
Apple
B.
Banana
Banana
C.
Banana
Apple
D. Error
✅ Answer
C
Q9
Which variable is accessible inside a function?
const country = "India";
function show() {
// ?
}
A. country
B. None
C. Only let
D. Only const
✅ Answer
A
Q10
Find the bug.
if (true) {
const user = "Alice";
}
console.log(user);
A. No bug
B. user is outside its scope
C. Missing function
D. Missing return
✅ Answer
B
Q11
Output?
let number = 10;
{
number = 20;
}
console.log(number);
A. 10
B. 20
C. undefined
D. Error
✅ Answer
B
Notice: We didn't create a new variable—we updated the existing one.
Q12
Output?
const language = "JavaScript";
function learn() {
console.log(language);
}
learn();
A. JavaScript
B. undefined
C. Error
D. null
✅ Answer
A
Q13
Which is true?
A. Inside code can access outside variables.
B. Outside code can access inside variables.
C. Both are true.
D. Neither is true.
✅ Answer
A
Q14
Output?
const x = 1;
{
const x = 2;
}
console.log(x);
A. 1
B. 2
C. Error
D. undefined
✅ Answer
A
Q15 (Hardest)
Predict the output.
const user = "Alice";
function greet() {
const user = "Bob";
console.log(user);
}
greet();
console.log(user);
A.
Alice
Alice
B.
Bob
Bob
C.
Bob
Alice
D. Error
✅ Answer
C
The inner user shadows the outer one.
Mini Coding Challenge
const app = "ChatGPT";
function showApp() {
console.log(app);
}
showApp();
✅ Solution
Output:
ChatGPT
Why?
showApp() can access variables declared outside it.
Mini Project — User Login
const currentUser = "Pramod";
function login() {
const message = `Welcome, ${currentUser}!`;
console.log(message);
}
login();
✅ Output
Welcome, Pramod!
Notice:
currentUseris outside the function.The function can access it.
messageonly exists insidelogin().
🚨 Common Beginner Mistakes
❌ Trying to use a block-scoped variable outside its block
if (true) {
const password = "1234";
}
console.log(password); // ❌ ReferenceError
❌ Creating a new variable when you meant to update the old one
let score = 10;
{
let score = 20; // New variable!
}
console.log(score); // 10
If you wanted to update it:
let score = 10;
{
score = 20;
}
console.log(score); // 20
🧠 The 80/20 Cheat Sheet
// Block scope
{
const x = 1;
}
// Function scope
function test() {
const y = 2;
}
// Outer variable
const name = "Alice";
function hello() {
console.log(name); // ✅
}
Remember this simple rule:
Inside can see outside. Outside cannot see inside.
🎯 Milestone Check
You now understand:
✅ Variables
✅ Conditions
✅ Functions
✅ Arrays
✅ Objects
✅ Loops
✅ Array methods
✅ Strings
✅ Scope
This is roughly 45–50% of the JavaScript knowledge used in day-to-day frontend development.
⭐ My Suggestion: Slight Course Reordering
Instead of following a traditional textbook, we'll switch to a job-focused order.
Next chapters:
✅ Scope (Done)
Destructuring ⭐⭐⭐⭐⭐
Spread (
...) & Rest (...) ⭐⭐⭐⭐⭐Template Literals (Quick)
Default Parameters
Modules (
import/export)Async JavaScript (
fetch,async/await) ⭐⭐⭐⭐⭐DOM Manipulation ⭐⭐⭐⭐⭐
Events
Mini JavaScript Projects
ES6 Interview Questions
React
This order mirrors what you'll actually use in modern JavaScript and React projects, helping you become productive faster.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.