049-scope.js

// SECTION 1: WHAT IS SCOPE?
// 1. Global Scope
constglobalVar="I'm global";

functionshowGlobal(){
console.log(globalVar);// Accessible
}

showGlobal();// "I'm global"
console.log(globalVar);// "I'm global"

// 2. Function Scope (Loca Scope)
functionmyFunction(){
constfunctionVar="I'm inside a function";
console.log(functionVar);// Accessible here
}

myFunction();// "I'm inside a function"
console.log(functionVar);// ReferenceError: functionVar is not defined

// 3. Block Scope
if(true){
constblockVar="I'm in a block";
console.log(blockVar);// Accessible here
}

console.log(blockVar);// ReferenceError: blockVar is not defined

// SECTION 2: NESTED SCOPE
constouterVar="Outer";

functionouter(){
constmiddleVar="Middle";

functioninner(){
constinnerVar="Inner";
console.log(outerVar);// Accessible
console.log(middleVar);// Accessible
console.log(innerVar);// Accessible
}

inner();
console.log(innerVar);// ReferenceError: innerVar is not defined
}

outer();

functionprocessData(){
constdata="Important data";

if(true){
consttempResult="Processing...";

for(leti=0;i<3;i++){
constloopVar=i*2;
console.log(data);// Accessible
console.log(tempResult);// Accessible
console.log(loopVar);// Accessible
}

console.log(loopVar);// ReferenceError
}

console.log(tempResult);// ReferenceError
}

processData();


// SECTION 3: LEXICAL SCOPE (also called static scope)
constname="Alice";

functiongreet(){
console.log(`Hello, ${name}`);
}

functionanotherFunction(){
constname="Bob";
greet();// What will this print?
}

anotherFunction();// "Hello, Alice"

// lexed or determined at write-time

functionouter(){
constouterVar="I'm from outer";

functioninner(){
console.log(outerVar);
}

returninner;
}

constmyFunction=outer();
myFunction();// "I'm from outer"

// SECTION 4: THE SCOPE CHAIN
constlevel1="Global";

functionfirstLevel(){
constlevel2="First";

functionsecondLevel(){
constlevel3="Second";

functionthirdLevel(){
console.log(level3);// Found in parent scope
console.log(level2);// Found in grandparent scope
console.log(level1);// Found in global scope
}

thirdLevel();
}

secondLevel();
}

firstLevel();
// "Second"
// "First"
// "Global"

// SECTION 5: VARIABLE SHADOWING
constmessage="Global message";

functionouter(){
constmessage="Outer message";

functioninner(){
constmessage="Inner message";
console.log(message);// Which one?
}

inner();
console.log(message);
}

outer();
// "Inner message"
// "Outer message"
console.log(message);// "Global message"

// SECTION 6: SCOPE CHAIN IN ACTION
functioncreateCounter(){
letcount=0;

return{
increment: function(){
count++;
console.log(count);
},
decrement: function(){
count--;
console.log(count);
},
getCount: function(){
returncount;
}
};
}

constcounter=createCounter();
counter.increment();// 1
counter.increment();// 2
counter.decrement();// 1
console.log(counter.getCount());// 1
console.log(counter.count);// undefined

// API configuration Example:
functioncreateAPI(baseURL){
constapiKey="secret-key-12345";

functionget(endpoint){
console.log(`GET ${baseURL}${endpoint} with key: ${apiKey}`);
}

functionpost(endpoint,data){
console.log(`POST ${baseURL}${endpoint} with key: ${apiKey}`);
console.log("Data:",data);
}

return{ get, post };
}

constapi=createAPI("https://api.example.com");
api.get("/users");// GET https://api.example.com/users with key: secret-key-12345
api.post("/users",{name: "John"});


// SECTION 7: SCOPE AND PERFORMANCE
functionlevel1(){
consta=1;

functionlevel2(){
constb=2;

functionlevel3(){
constc=3;

functionlevel4(){
// Accessing 'a' here requires traversing the entire chain
console.log(a+b+c);
}

level4();
}

level3();
}

level2();
}

// SECTION 8: COMMON PITFALLS
// Problem
// const functions = [];

// for (var i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 3 (not 0!)
// functions[1](); // 3 (not 1!)
// functions[2](); // 3 (not 2!)

// Solution
// const functions = [];

// for (let i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 0
// functions[1](); // 1
// functions[2](); // 2


// SECTION 9: SCOPE CHAIN VISUALIZATION
// - Global scope is the ground floor—everyone can access it
// - Each function creates a new floor
// - You can look down from your floor to see lower floors (outer scopes)
// - But you can't look up to see higher floors (inner scopes)
// - When you need something, you check your floor first, then go down floor by floor until you find it
// Ground Floor (Global)
constground="Ground floor";

functionfirstFloor(){
constfirst="First floor";

functionsecondFloor(){
constsecond="Second floor";

// From the second floor, I can see:
console.log(second);// My floor
console.log(first);// One floor down
console.log(ground);// Ground floor
}

secondFloor();
// From the first floor, I cannot see the second floor
console.log(second);// ReferenceError
}

firstFloor();
// SECTION 1: WHAT IS SCOPE?
// 1. Global Scope
constglobalVar="I'm global";

functionshowGlobal(){
console.log(globalVar);// Accessible
}

showGlobal();// "I'm global"
console.log(globalVar);// "I'm global"

// 2. Function Scope (Loca Scope)
functionmyFunction(){
constfunctionVar="I'm inside a function";
console.log(functionVar);// Accessible here
}

myFunction();// "I'm inside a function"
console.log(functionVar);// ReferenceError: functionVar is not defined

// 3. Block Scope
if(true){
constblockVar="I'm in a block";
console.log(blockVar);// Accessible here
}

console.log(blockVar);// ReferenceError: blockVar is not defined

// SECTION 2: NESTED SCOPE
constouterVar="Outer";

functionouter(){
constmiddleVar="Middle";

functioninner(){
constinnerVar="Inner";
console.log(outerVar);// Accessible
console.log(middleVar);// Accessible
console.log(innerVar);// Accessible
}

inner();
console.log(innerVar);// ReferenceError: innerVar is not defined
}

outer();

functionprocessData(){
constdata="Important data";

if(true){
consttempResult="Processing...";

for(leti=0;i<3;i++){
constloopVar=i*2;
console.log(data);// Accessible
console.log(tempResult);// Accessible
console.log(loopVar);// Accessible
}

console.log(loopVar);// ReferenceError
}

console.log(tempResult);// ReferenceError
}

processData();


// SECTION 3: LEXICAL SCOPE (also called static scope)
constname="Alice";

functiongreet(){
console.log(`Hello, ${name}`);
}

functionanotherFunction(){
constname="Bob";
greet();// What will this print?
}

anotherFunction();// "Hello, Alice"

// lexed or determined at write-time

functionouter(){
constouterVar="I'm from outer";

functioninner(){
console.log(outerVar);
}

returninner;
}

constmyFunction=outer();
myFunction();// "I'm from outer"

// SECTION 4: THE SCOPE CHAIN
constlevel1="Global";

functionfirstLevel(){
constlevel2="First";

functionsecondLevel(){
constlevel3="Second";

functionthirdLevel(){
console.log(level3);// Found in parent scope
console.log(level2);// Found in grandparent scope
console.log(level1);// Found in global scope
}

thirdLevel();
}

secondLevel();
}

firstLevel();
// "Second"
// "First"
// "Global"

// SECTION 5: VARIABLE SHADOWING
constmessage="Global message";

functionouter(){
constmessage="Outer message";

functioninner(){
constmessage="Inner message";
console.log(message);// Which one?
}

inner();
console.log(message);
}

outer();
// "Inner message"
// "Outer message"
console.log(message);// "Global message"

// SECTION 6: SCOPE CHAIN IN ACTION
functioncreateCounter(){
letcount=0;

return{
increment: function(){
count++;
console.log(count);
},
decrement: function(){
count--;
console.log(count);
},
getCount: function(){
returncount;
}
};
}

constcounter=createCounter();
counter.increment();// 1
counter.increment();// 2
counter.decrement();// 1
console.log(counter.getCount());// 1
console.log(counter.count);// undefined

// API configuration Example:
functioncreateAPI(baseURL){
constapiKey="secret-key-12345";

functionget(endpoint){
console.log(`GET ${baseURL}${endpoint} with key: ${apiKey}`);
}

functionpost(endpoint,data){
console.log(`POST ${baseURL}${endpoint} with key: ${apiKey}`);
console.log("Data:",data);
}

return{ get, post };
}

constapi=createAPI("https://api.example.com");
api.get("/users");// GET https://api.example.com/users with key: secret-key-12345
api.post("/users",{name: "John"});


// SECTION 7: SCOPE AND PERFORMANCE
functionlevel1(){
consta=1;

functionlevel2(){
constb=2;

functionlevel3(){
constc=3;

functionlevel4(){
// Accessing 'a' here requires traversing the entire chain
console.log(a+b+c);
}

level4();
}

level3();
}

level2();
}

// SECTION 8: COMMON PITFALLS
// Problem
// const functions = [];

// for (var i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 3 (not 0!)
// functions[1](); // 3 (not 1!)
// functions[2](); // 3 (not 2!)

// Solution
// const functions = [];

// for (let i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 0
// functions[1](); // 1
// functions[2](); // 2


// SECTION 9: SCOPE CHAIN VISUALIZATION
// - Global scope is the ground floor—everyone can access it
// - Each function creates a new floor
// - You can look down from your floor to see lower floors (outer scopes)
// - But you can't look up to see higher floors (inner scopes)
// - When you need something, you check your floor first, then go down floor by floor until you find it
// Ground Floor (Global)
constground="Ground floor";

functionfirstFloor(){
constfirst="First floor";

functionsecondFloor(){
constsecond="Second floor";

// From the second floor, I can see:
console.log(second);// My floor
console.log(first);// One floor down
console.log(ground);// Ground floor
}

secondFloor();
// From the first floor, I cannot see the second floor
console.log(second);// ReferenceError
}

firstFloor();
// SECTION 1: WHAT IS SCOPE?
// 1. Global Scope
constglobalVar="I'm global";

functionshowGlobal(){
console.log(globalVar);// Accessible
}

showGlobal();// "I'm global"
console.log(globalVar);// "I'm global"

// 2. Function Scope (Loca Scope)
functionmyFunction(){
constfunctionVar="I'm inside a function";
console.log(functionVar);// Accessible here
}

myFunction();// "I'm inside a function"
console.log(functionVar);// ReferenceError: functionVar is not defined

// 3. Block Scope
if(true){
constblockVar="I'm in a block";
console.log(blockVar);// Accessible here
}

console.log(blockVar);// ReferenceError: blockVar is not defined

// SECTION 2: NESTED SCOPE
constouterVar="Outer";

functionouter(){
constmiddleVar="Middle";

functioninner(){
constinnerVar="Inner";
console.log(outerVar);// Accessible
console.log(middleVar);// Accessible
console.log(innerVar);// Accessible
}

inner();
console.log(innerVar);// ReferenceError: innerVar is not defined
}

outer();

functionprocessData(){
constdata="Important data";

if(true){
consttempResult="Processing...";

for(leti=0;i<3;i++){
constloopVar=i*2;
console.log(data);// Accessible
console.log(tempResult);// Accessible
console.log(loopVar);// Accessible
}

console.log(loopVar);// ReferenceError
}

console.log(tempResult);// ReferenceError
}

processData();


// SECTION 3: LEXICAL SCOPE (also called static scope)
constname="Alice";

functiongreet(){
console.log(`Hello, ${name}`);
}

functionanotherFunction(){
constname="Bob";
greet();// What will this print?
}

anotherFunction();// "Hello, Alice"

// lexed or determined at write-time

functionouter(){
constouterVar="I'm from outer";

functioninner(){
console.log(outerVar);
}

returninner;
}

constmyFunction=outer();
myFunction();// "I'm from outer"

// SECTION 4: THE SCOPE CHAIN
constlevel1="Global";

functionfirstLevel(){
constlevel2="First";

functionsecondLevel(){
constlevel3="Second";

functionthirdLevel(){
console.log(level3);// Found in parent scope
console.log(level2);// Found in grandparent scope
console.log(level1);// Found in global scope
}

thirdLevel();
}

secondLevel();
}

firstLevel();
// "Second"
// "First"
// "Global"

// SECTION 5: VARIABLE SHADOWING
constmessage="Global message";

functionouter(){
constmessage="Outer message";

functioninner(){
constmessage="Inner message";
console.log(message);// Which one?
}

inner();
console.log(message);
}

outer();
// "Inner message"
// "Outer message"
console.log(message);// "Global message"

// SECTION 6: SCOPE CHAIN IN ACTION
functioncreateCounter(){
letcount=0;

return{
increment: function(){
count++;
console.log(count);
},
decrement: function(){
count--;
console.log(count);
},
getCount: function(){
returncount;
}
};
}

constcounter=createCounter();
counter.increment();// 1
counter.increment();// 2
counter.decrement();// 1
console.log(counter.getCount());// 1
console.log(counter.count);// undefined

// API configuration Example:
functioncreateAPI(baseURL){
constapiKey="secret-key-12345";

functionget(endpoint){
console.log(`GET ${baseURL}${endpoint} with key: ${apiKey}`);
}

functionpost(endpoint,data){
console.log(`POST ${baseURL}${endpoint} with key: ${apiKey}`);
console.log("Data:",data);
}

return{ get, post };
}

constapi=createAPI("https://api.example.com");
api.get("/users");// GET https://api.example.com/users with key: secret-key-12345
api.post("/users",{name: "John"});


// SECTION 7: SCOPE AND PERFORMANCE
functionlevel1(){
consta=1;

functionlevel2(){
constb=2;

functionlevel3(){
constc=3;

functionlevel4(){
// Accessing 'a' here requires traversing the entire chain
console.log(a+b+c);
}

level4();
}

level3();
}

level2();
}

// SECTION 8: COMMON PITFALLS
// Problem
// const functions = [];

// for (var i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 3 (not 0!)
// functions[1](); // 3 (not 1!)
// functions[2](); // 3 (not 2!)

// Solution
// const functions = [];

// for (let i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 0
// functions[1](); // 1
// functions[2](); // 2


// SECTION 9: SCOPE CHAIN VISUALIZATION
// - Global scope is the ground floor—everyone can access it
// - Each function creates a new floor
// - You can look down from your floor to see lower floors (outer scopes)
// - But you can't look up to see higher floors (inner scopes)
// - When you need something, you check your floor first, then go down floor by floor until you find it
// Ground Floor (Global)
constground="Ground floor";

functionfirstFloor(){
constfirst="First floor";

functionsecondFloor(){
constsecond="Second floor";

// From the second floor, I can see:
console.log(second);// My floor
console.log(first);// One floor down
console.log(ground);// Ground floor
}

secondFloor();
// From the first floor, I cannot see the second floor
console.log(second);// ReferenceError
}

firstFloor();
// SECTION 1: WHAT IS SCOPE?
// 1. Global Scope
constglobalVar="I'm global";

functionshowGlobal(){
console.log(globalVar);// Accessible
}

showGlobal();// "I'm global"
console.log(globalVar);// "I'm global"

// 2. Function Scope (Loca Scope)
functionmyFunction(){
constfunctionVar="I'm inside a function";
console.log(functionVar);// Accessible here
}

myFunction();// "I'm inside a function"
console.log(functionVar);// ReferenceError: functionVar is not defined

// 3. Block Scope
if(true){
constblockVar="I'm in a block";
console.log(blockVar);// Accessible here
}

console.log(blockVar);// ReferenceError: blockVar is not defined

// SECTION 2: NESTED SCOPE
constouterVar="Outer";

functionouter(){
constmiddleVar="Middle";

functioninner(){
constinnerVar="Inner";
console.log(outerVar);// Accessible
console.log(middleVar);// Accessible
console.log(innerVar);// Accessible
}

inner();
console.log(innerVar);// ReferenceError: innerVar is not defined
}

outer();

functionprocessData(){
constdata="Important data";

if(true){
consttempResult="Processing...";

for(leti=0;i<3;i++){
constloopVar=i*2;
console.log(data);// Accessible
console.log(tempResult);// Accessible
console.log(loopVar);// Accessible
}

console.log(loopVar);// ReferenceError
}

console.log(tempResult);// ReferenceError
}

processData();


// SECTION 3: LEXICAL SCOPE (also called static scope)
constname="Alice";

functiongreet(){
console.log(`Hello, ${name}`);
}

functionanotherFunction(){
constname="Bob";
greet();// What will this print?
}

anotherFunction();// "Hello, Alice"

// lexed or determined at write-time

functionouter(){
constouterVar="I'm from outer";

functioninner(){
console.log(outerVar);
}

returninner;
}

constmyFunction=outer();
myFunction();// "I'm from outer"

// SECTION 4: THE SCOPE CHAIN
constlevel1="Global";

functionfirstLevel(){
constlevel2="First";

functionsecondLevel(){
constlevel3="Second";

functionthirdLevel(){
console.log(level3);// Found in parent scope
console.log(level2);// Found in grandparent scope
console.log(level1);// Found in global scope
}

thirdLevel();
}

secondLevel();
}

firstLevel();
// "Second"
// "First"
// "Global"

// SECTION 5: VARIABLE SHADOWING
constmessage="Global message";

functionouter(){
constmessage="Outer message";

functioninner(){
constmessage="Inner message";
console.log(message);// Which one?
}

inner();
console.log(message);
}

outer();
// "Inner message"
// "Outer message"
console.log(message);// "Global message"

// SECTION 6: SCOPE CHAIN IN ACTION
functioncreateCounter(){
letcount=0;

return{
increment: function(){
count++;
console.log(count);
},
decrement: function(){
count--;
console.log(count);
},
getCount: function(){
returncount;
}
};
}

constcounter=createCounter();
counter.increment();// 1
counter.increment();// 2
counter.decrement();// 1
console.log(counter.getCount());// 1
console.log(counter.count);// undefined

// API configuration Example:
functioncreateAPI(baseURL){
constapiKey="secret-key-12345";

functionget(endpoint){
console.log(`GET ${baseURL}${endpoint} with key: ${apiKey}`);
}

functionpost(endpoint,data){
console.log(`POST ${baseURL}${endpoint} with key: ${apiKey}`);
console.log("Data:",data);
}

return{ get, post };
}

constapi=createAPI("https://api.example.com");
api.get("/users");// GET https://api.example.com/users with key: secret-key-12345
api.post("/users",{name: "John"});


// SECTION 7: SCOPE AND PERFORMANCE
functionlevel1(){
consta=1;

functionlevel2(){
constb=2;

functionlevel3(){
constc=3;

functionlevel4(){
// Accessing 'a' here requires traversing the entire chain
console.log(a+b+c);
}

level4();
}

level3();
}

level2();
}

// SECTION 8: COMMON PITFALLS
// Problem
// const functions = [];

// for (var i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 3 (not 0!)
// functions[1](); // 3 (not 1!)
// functions[2](); // 3 (not 2!)

// Solution
// const functions = [];

// for (let i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 0
// functions[1](); // 1
// functions[2](); // 2


// SECTION 9: SCOPE CHAIN VISUALIZATION
// - Global scope is the ground floor—everyone can access it
// - Each function creates a new floor
// - You can look down from your floor to see lower floors (outer scopes)
// - But you can't look up to see higher floors (inner scopes)
// - When you need something, you check your floor first, then go down floor by floor until you find it
// Ground Floor (Global)
constground="Ground floor";

functionfirstFloor(){
constfirst="First floor";

functionsecondFloor(){
constsecond="Second floor";

// From the second floor, I can see:
console.log(second);// My floor
console.log(first);// One floor down
console.log(ground);// Ground floor
}

secondFloor();
// From the first floor, I cannot see the second floor
console.log(second);// ReferenceError
}

firstFloor();
// SECTION 1: WHAT IS SCOPE?
// 1. Global Scope
constglobalVar="I'm global";

functionshowGlobal(){
console.log(globalVar);// Accessible
}

showGlobal();// "I'm global"
console.log(globalVar);// "I'm global"

// 2. Function Scope (Loca Scope)
functionmyFunction(){
constfunctionVar="I'm inside a function";
console.log(functionVar);// Accessible here
}

myFunction();// "I'm inside a function"
console.log(functionVar);// ReferenceError: functionVar is not defined

// 3. Block Scope
if(true){
constblockVar="I'm in a block";
console.log(blockVar);// Accessible here
}

console.log(blockVar);// ReferenceError: blockVar is not defined

// SECTION 2: NESTED SCOPE
constouterVar="Outer";

functionouter(){
constmiddleVar="Middle";

functioninner(){
constinnerVar="Inner";
console.log(outerVar);// Accessible
console.log(middleVar);// Accessible
console.log(innerVar);// Accessible
}

inner();
console.log(innerVar);// ReferenceError: innerVar is not defined
}

outer();

functionprocessData(){
constdata="Important data";

if(true){
consttempResult="Processing...";

for(leti=0;i<3;i++){
constloopVar=i*2;
console.log(data);// Accessible
console.log(tempResult);// Accessible
console.log(loopVar);// Accessible
}

console.log(loopVar);// ReferenceError
}

console.log(tempResult);// ReferenceError
}

processData();


// SECTION 3: LEXICAL SCOPE (also called static scope)
constname="Alice";

functiongreet(){
console.log(`Hello, ${name}`);
}

functionanotherFunction(){
constname="Bob";
greet();// What will this print?
}

anotherFunction();// "Hello, Alice"

// lexed or determined at write-time

functionouter(){
constouterVar="I'm from outer";

functioninner(){
console.log(outerVar);
}

returninner;
}

constmyFunction=outer();
myFunction();// "I'm from outer"

// SECTION 4: THE SCOPE CHAIN
constlevel1="Global";

functionfirstLevel(){
constlevel2="First";

functionsecondLevel(){
constlevel3="Second";

functionthirdLevel(){
console.log(level3);// Found in parent scope
console.log(level2);// Found in grandparent scope
console.log(level1);// Found in global scope
}

thirdLevel();
}

secondLevel();
}

firstLevel();
// "Second"
// "First"
// "Global"

// SECTION 5: VARIABLE SHADOWING
constmessage="Global message";

functionouter(){
constmessage="Outer message";

functioninner(){
constmessage="Inner message";
console.log(message);// Which one?
}

inner();
console.log(message);
}

outer();
// "Inner message"
// "Outer message"
console.log(message);// "Global message"

// SECTION 6: SCOPE CHAIN IN ACTION
functioncreateCounter(){
letcount=0;

return{
increment: function(){
count++;
console.log(count);
},
decrement: function(){
count--;
console.log(count);
},
getCount: function(){
returncount;
}
};
}

constcounter=createCounter();
counter.increment();// 1
counter.increment();// 2
counter.decrement();// 1
console.log(counter.getCount());// 1
console.log(counter.count);// undefined

// API configuration Example:
functioncreateAPI(baseURL){
constapiKey="secret-key-12345";

functionget(endpoint){
console.log(`GET ${baseURL}${endpoint} with key: ${apiKey}`);
}

functionpost(endpoint,data){
console.log(`POST ${baseURL}${endpoint} with key: ${apiKey}`);
console.log("Data:",data);
}

return{ get, post };
}

constapi=createAPI("https://api.example.com");
api.get("/users");// GET https://api.example.com/users with key: secret-key-12345
api.post("/users",{name: "John"});


// SECTION 7: SCOPE AND PERFORMANCE
functionlevel1(){
consta=1;

functionlevel2(){
constb=2;

functionlevel3(){
constc=3;

functionlevel4(){
// Accessing 'a' here requires traversing the entire chain
console.log(a+b+c);
}

level4();
}

level3();
}

level2();
}

// SECTION 8: COMMON PITFALLS
// Problem
// const functions = [];

// for (var i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 3 (not 0!)
// functions[1](); // 3 (not 1!)
// functions[2](); // 3 (not 2!)

// Solution
// const functions = [];

// for (let i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 0
// functions[1](); // 1
// functions[2](); // 2


// SECTION 9: SCOPE CHAIN VISUALIZATION
// - Global scope is the ground floor—everyone can access it
// - Each function creates a new floor
// - You can look down from your floor to see lower floors (outer scopes)
// - But you can't look up to see higher floors (inner scopes)
// - When you need something, you check your floor first, then go down floor by floor until you find it
// Ground Floor (Global)
constground="Ground floor";

functionfirstFloor(){
constfirst="First floor";

functionsecondFloor(){
constsecond="Second floor";

// From the second floor, I can see:
console.log(second);// My floor
console.log(first);// One floor down
console.log(ground);// Ground floor
}

secondFloor();
// From the first floor, I cannot see the second floor
console.log(second);// ReferenceError
}

firstFloor();
// SECTION 1: WHAT IS SCOPE?
// 1. Global Scope
constglobalVar="I'm global";

functionshowGlobal(){
console.log(globalVar);// Accessible
}

showGlobal();// "I'm global"
console.log(globalVar);// "I'm global"

// 2. Function Scope (Loca Scope)
functionmyFunction(){
constfunctionVar="I'm inside a function";
console.log(functionVar);// Accessible here
}

myFunction();// "I'm inside a function"
console.log(functionVar);// ReferenceError: functionVar is not defined

// 3. Block Scope
if(true){
constblockVar="I'm in a block";
console.log(blockVar);// Accessible here
}

console.log(blockVar);// ReferenceError: blockVar is not defined

// SECTION 2: NESTED SCOPE
constouterVar="Outer";

functionouter(){
constmiddleVar="Middle";

functioninner(){
constinnerVar="Inner";
console.log(outerVar);// Accessible
console.log(middleVar);// Accessible
console.log(innerVar);// Accessible
}

inner();
console.log(innerVar);// ReferenceError: innerVar is not defined
}

outer();

functionprocessData(){
constdata="Important data";

if(true){
consttempResult="Processing...";

for(leti=0;i<3;i++){
constloopVar=i*2;
console.log(data);// Accessible
console.log(tempResult);// Accessible
console.log(loopVar);// Accessible
}

console.log(loopVar);// ReferenceError
}

console.log(tempResult);// ReferenceError
}

processData();


// SECTION 3: LEXICAL SCOPE (also called static scope)
constname="Alice";

functiongreet(){
console.log(`Hello, ${name}`);
}

functionanotherFunction(){
constname="Bob";
greet();// What will this print?
}

anotherFunction();// "Hello, Alice"

// lexed or determined at write-time

functionouter(){
constouterVar="I'm from outer";

functioninner(){
console.log(outerVar);
}

returninner;
}

constmyFunction=outer();
myFunction();// "I'm from outer"

// SECTION 4: THE SCOPE CHAIN
constlevel1="Global";

functionfirstLevel(){
constlevel2="First";

functionsecondLevel(){
constlevel3="Second";

functionthirdLevel(){
console.log(level3);// Found in parent scope
console.log(level2);// Found in grandparent scope
console.log(level1);// Found in global scope
}

thirdLevel();
}

secondLevel();
}

firstLevel();
// "Second"
// "First"
// "Global"

// SECTION 5: VARIABLE SHADOWING
constmessage="Global message";

functionouter(){
constmessage="Outer message";

functioninner(){
constmessage="Inner message";
console.log(message);// Which one?
}

inner();
console.log(message);
}

outer();
// "Inner message"
// "Outer message"
console.log(message);// "Global message"

// SECTION 6: SCOPE CHAIN IN ACTION
functioncreateCounter(){
letcount=0;

return{
increment: function(){
count++;
console.log(count);
},
decrement: function(){
count--;
console.log(count);
},
getCount: function(){
returncount;
}
};
}

constcounter=createCounter();
counter.increment();// 1
counter.increment();// 2
counter.decrement();// 1
console.log(counter.getCount());// 1
console.log(counter.count);// undefined

// API configuration Example:
functioncreateAPI(baseURL){
constapiKey="secret-key-12345";

functionget(endpoint){
console.log(`GET ${baseURL}${endpoint} with key: ${apiKey}`);
}

functionpost(endpoint,data){
console.log(`POST ${baseURL}${endpoint} with key: ${apiKey}`);
console.log("Data:",data);
}

return{ get, post };
}

constapi=createAPI("https://api.example.com");
api.get("/users");// GET https://api.example.com/users with key: secret-key-12345
api.post("/users",{name: "John"});


// SECTION 7: SCOPE AND PERFORMANCE
functionlevel1(){
consta=1;

functionlevel2(){
constb=2;

functionlevel3(){
constc=3;

functionlevel4(){
// Accessing 'a' here requires traversing the entire chain
console.log(a+b+c);
}

level4();
}

level3();
}

level2();
}

// SECTION 8: COMMON PITFALLS
// Problem
// const functions = [];

// for (var i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 3 (not 0!)
// functions[1](); // 3 (not 1!)
// functions[2](); // 3 (not 2!)

// Solution
// const functions = [];

// for (let i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 0
// functions[1](); // 1
// functions[2](); // 2


// SECTION 9: SCOPE CHAIN VISUALIZATION
// - Global scope is the ground floor—everyone can access it
// - Each function creates a new floor
// - You can look down from your floor to see lower floors (outer scopes)
// - But you can't look up to see higher floors (inner scopes)
// - When you need something, you check your floor first, then go down floor by floor until you find it
// Ground Floor (Global)
constground="Ground floor";

functionfirstFloor(){
constfirst="First floor";

functionsecondFloor(){
constsecond="Second floor";

// From the second floor, I can see:
console.log(second);// My floor
console.log(first);// One floor down
console.log(ground);// Ground floor
}

secondFloor();
// From the first floor, I cannot see the second floor
console.log(second);// ReferenceError
}

firstFloor();
// SECTION 1: WHAT IS SCOPE?
// 1. Global Scope
constglobalVar="I'm global";

functionshowGlobal(){
console.log(globalVar);// Accessible
}

showGlobal();// "I'm global"
console.log(globalVar);// "I'm global"

// 2. Function Scope (Loca Scope)
functionmyFunction(){
constfunctionVar="I'm inside a function";
console.log(functionVar);// Accessible here
}

myFunction();// "I'm inside a function"
console.log(functionVar);// ReferenceError: functionVar is not defined

// 3. Block Scope
if(true){
constblockVar="I'm in a block";
console.log(blockVar);// Accessible here
}

console.log(blockVar);// ReferenceError: blockVar is not defined

// SECTION 2: NESTED SCOPE
constouterVar="Outer";

functionouter(){
constmiddleVar="Middle";

functioninner(){
constinnerVar="Inner";
console.log(outerVar);// Accessible
console.log(middleVar);// Accessible
console.log(innerVar);// Accessible
}

inner();
console.log(innerVar);// ReferenceError: innerVar is not defined
}

outer();

functionprocessData(){
constdata="Important data";

if(true){
consttempResult="Processing...";

for(leti=0;i<3;i++){
constloopVar=i*2;
console.log(data);// Accessible
console.log(tempResult);// Accessible
console.log(loopVar);// Accessible
}

console.log(loopVar);// ReferenceError
}

console.log(tempResult);// ReferenceError
}

processData();


// SECTION 3: LEXICAL SCOPE (also called static scope)
constname="Alice";

functiongreet(){
console.log(`Hello, ${name}`);
}

functionanotherFunction(){
constname="Bob";
greet();// What will this print?
}

anotherFunction();// "Hello, Alice"

// lexed or determined at write-time

functionouter(){
constouterVar="I'm from outer";

functioninner(){
console.log(outerVar);
}

returninner;
}

constmyFunction=outer();
myFunction();// "I'm from outer"

// SECTION 4: THE SCOPE CHAIN
constlevel1="Global";

functionfirstLevel(){
constlevel2="First";

functionsecondLevel(){
constlevel3="Second";

functionthirdLevel(){
console.log(level3);// Found in parent scope
console.log(level2);// Found in grandparent scope
console.log(level1);// Found in global scope
}

thirdLevel();
}

secondLevel();
}

firstLevel();
// "Second"
// "First"
// "Global"

// SECTION 5: VARIABLE SHADOWING
constmessage="Global message";

functionouter(){
constmessage="Outer message";

functioninner(){
constmessage="Inner message";
console.log(message);// Which one?
}

inner();
console.log(message);
}

outer();
// "Inner message"
// "Outer message"
console.log(message);// "Global message"

// SECTION 6: SCOPE CHAIN IN ACTION
functioncreateCounter(){
letcount=0;

return{
increment: function(){
count++;
console.log(count);
},
decrement: function(){
count--;
console.log(count);
},
getCount: function(){
returncount;
}
};
}

constcounter=createCounter();
counter.increment();// 1
counter.increment();// 2
counter.decrement();// 1
console.log(counter.getCount());// 1
console.log(counter.count);// undefined

// API configuration Example:
functioncreateAPI(baseURL){
constapiKey="secret-key-12345";

functionget(endpoint){
console.log(`GET ${baseURL}${endpoint} with key: ${apiKey}`);
}

functionpost(endpoint,data){
console.log(`POST ${baseURL}${endpoint} with key: ${apiKey}`);
console.log("Data:",data);
}

return{ get, post };
}

constapi=createAPI("https://api.example.com");
api.get("/users");// GET https://api.example.com/users with key: secret-key-12345
api.post("/users",{name: "John"});


// SECTION 7: SCOPE AND PERFORMANCE
functionlevel1(){
consta=1;

functionlevel2(){
constb=2;

functionlevel3(){
constc=3;

functionlevel4(){
// Accessing 'a' here requires traversing the entire chain
console.log(a+b+c);
}

level4();
}

level3();
}

level2();
}

// SECTION 8: COMMON PITFALLS
// Problem
// const functions = [];

// for (var i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 3 (not 0!)
// functions[1](); // 3 (not 1!)
// functions[2](); // 3 (not 2!)

// Solution
// const functions = [];

// for (let i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 0
// functions[1](); // 1
// functions[2](); // 2


// SECTION 9: SCOPE CHAIN VISUALIZATION
// - Global scope is the ground floor—everyone can access it
// - Each function creates a new floor
// - You can look down from your floor to see lower floors (outer scopes)
// - But you can't look up to see higher floors (inner scopes)
// - When you need something, you check your floor first, then go down floor by floor until you find it
// Ground Floor (Global)
constground="Ground floor";

functionfirstFloor(){
constfirst="First floor";

functionsecondFloor(){
constsecond="Second floor";

// From the second floor, I can see:
console.log(second);// My floor
console.log(first);// One floor down
console.log(ground);// Ground floor
}

secondFloor();
// From the first floor, I cannot see the second floor
console.log(second);// ReferenceError
}

firstFloor();
// SECTION 1: WHAT IS SCOPE?
// 1. Global Scope
constglobalVar="I'm global";

functionshowGlobal(){
console.log(globalVar);// Accessible
}

showGlobal();// "I'm global"
console.log(globalVar);// "I'm global"

// 2. Function Scope (Loca Scope)
functionmyFunction(){
constfunctionVar="I'm inside a function";
console.log(functionVar);// Accessible here
}

myFunction();// "I'm inside a function"
console.log(functionVar);// ReferenceError: functionVar is not defined

// 3. Block Scope
if(true){
constblockVar="I'm in a block";
console.log(blockVar);// Accessible here
}

console.log(blockVar);// ReferenceError: blockVar is not defined

// SECTION 2: NESTED SCOPE
constouterVar="Outer";

functionouter(){
constmiddleVar="Middle";

functioninner(){
constinnerVar="Inner";
console.log(outerVar);// Accessible
console.log(middleVar);// Accessible
console.log(innerVar);// Accessible
}

inner();
console.log(innerVar);// ReferenceError: innerVar is not defined
}

outer();

functionprocessData(){
constdata="Important data";

if(true){
consttempResult="Processing...";

for(leti=0;i<3;i++){
constloopVar=i*2;
console.log(data);// Accessible
console.log(tempResult);// Accessible
console.log(loopVar);// Accessible
}

console.log(loopVar);// ReferenceError
}

console.log(tempResult);// ReferenceError
}

processData();


// SECTION 3: LEXICAL SCOPE (also called static scope)
constname="Alice";

functiongreet(){
console.log(`Hello, ${name}`);
}

functionanotherFunction(){
constname="Bob";
greet();// What will this print?
}

anotherFunction();// "Hello, Alice"

// lexed or determined at write-time

functionouter(){
constouterVar="I'm from outer";

functioninner(){
console.log(outerVar);
}

returninner;
}

constmyFunction=outer();
myFunction();// "I'm from outer"

// SECTION 4: THE SCOPE CHAIN
constlevel1="Global";

functionfirstLevel(){
constlevel2="First";

functionsecondLevel(){
constlevel3="Second";

functionthirdLevel(){
console.log(level3);// Found in parent scope
console.log(level2);// Found in grandparent scope
console.log(level1);// Found in global scope
}

thirdLevel();
}

secondLevel();
}

firstLevel();
// "Second"
// "First"
// "Global"

// SECTION 5: VARIABLE SHADOWING
constmessage="Global message";

functionouter(){
constmessage="Outer message";

functioninner(){
constmessage="Inner message";
console.log(message);// Which one?
}

inner();
console.log(message);
}

outer();
// "Inner message"
// "Outer message"
console.log(message);// "Global message"

// SECTION 6: SCOPE CHAIN IN ACTION
functioncreateCounter(){
letcount=0;

return{
increment: function(){
count++;
console.log(count);
},
decrement: function(){
count--;
console.log(count);
},
getCount: function(){
returncount;
}
};
}

constcounter=createCounter();
counter.increment();// 1
counter.increment();// 2
counter.decrement();// 1
console.log(counter.getCount());// 1
console.log(counter.count);// undefined

// API configuration Example:
functioncreateAPI(baseURL){
constapiKey="secret-key-12345";

functionget(endpoint){
console.log(`GET ${baseURL}${endpoint} with key: ${apiKey}`);
}

functionpost(endpoint,data){
console.log(`POST ${baseURL}${endpoint} with key: ${apiKey}`);
console.log("Data:",data);
}

return{ get, post };
}

constapi=createAPI("https://api.example.com");
api.get("/users");// GET https://api.example.com/users with key: secret-key-12345
api.post("/users",{name: "John"});


// SECTION 7: SCOPE AND PERFORMANCE
functionlevel1(){
consta=1;

functionlevel2(){
constb=2;

functionlevel3(){
constc=3;

functionlevel4(){
// Accessing 'a' here requires traversing the entire chain
console.log(a+b+c);
}

level4();
}

level3();
}

level2();
}

// SECTION 8: COMMON PITFALLS
// Problem
// const functions = [];

// for (var i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 3 (not 0!)
// functions[1](); // 3 (not 1!)
// functions[2](); // 3 (not 2!)

// Solution
// const functions = [];

// for (let i = 0; i < 3; i++) {
// functions.push(function() {
// console.log(i);
// });
// }

// functions[0](); // 0
// functions[1](); // 1
// functions[2](); // 2


// SECTION 9: SCOPE CHAIN VISUALIZATION
// - Global scope is the ground floor—everyone can access it
// - Each function creates a new floor
// - You can look down from your floor to see lower floors (outer scopes)
// - But you can't look up to see higher floors (inner scopes)
// - When you need something, you check your floor first, then go down floor by floor until you find it
// Ground Floor (Global)
constground="Ground floor";

functionfirstFloor(){
constfirst="First floor";

functionsecondFloor(){
constsecond="Second floor";

// From the second floor, I can see:
console.log(second);// My floor
console.log(first);// One floor down
console.log(ground);// Ground floor
}

secondFloor();
// From the first floor, I cannot see the second floor
console.log(second);// ReferenceError
}

firstFloor();