BRUCE_FEBRUCE_FE

EN/CH Mode

BRUCE_FE JS Interview Notes - JavaScript Scope

Analysis of scope mechanisms, variable passing methods, and IIFE applications in JavaScript. Master block scope, function scope, classic for loop issues and solutions.

影片縮圖

Lazy to read articles? Then watch videos!

What is Scope?

Scope is like a variable's 'activity range', determining where a variable can be used.

Three Types of Scope

  1. 1.
    Block Scope: Area wrapped in {}
  2. 2.
    Function Scope: Area inside a function
  3. 3.
    Global Scope: Outermost area
// Block Scope
{
  let x = 1;  // Only usable within these braces
}
console.log(x); // Error! x doesn't exist

// Function Scope
function test() {
  var y = 2;  // Only usable within this function
}
console.log(y); // Error! y doesn't exist

// Global Scope
let z = 3;  // Usable everywhere

Two Ways of Variable Passing

1. Pass by Value (Primitive Types)

  • •
    Copy a new value
  • •
    Modifying the new variable won't affect the original

2. Pass by Reference (Object Types)

  • •
    Copy the 'address'
  • •
    Modifying the new variable will affect the original
// Pass by Value
let a = 1;
let b = a;  // Copy 1 to b
b = 2;      // Modifying b won't affect a
console.log(a); // Still 1

// Pass by Reference
let obj1 = { x: 1 };
let obj2 = obj1;  // Copy the address
obj2.x = 2;       // Modifying obj2 affects obj1
console.log(obj1.x); // Now 2!

What is IIFE?

IIFE (Immediately Invoked Function Expression) is a function that executes immediately, commonly used to:

  • •
    Protect variables from external access
  • •
    Solve for loop issues
// Basic Usage
(function() {
  let secret = 'secret';
  console.log(secret); // Can print
})();
console.log(secret); // Error! Not accessible outside

🔥 Common Interview Questions

（1） What's the difference between let and var?

Answer:Main differences:

  • •
    let must be declared before use,var can be used before declaration (hoisting, using let helps catch bugs early)
  • •
    let throws an error when used before declaration, helping you catch mistakes
  • •
    let doesn't become a global variable (not attached to window)

（2）Classic for loop interview question - What's the output?

for (var i = 0; i < 3; i++) {
   setTimeout(() => console.log(i), 1000);
}

Answer:It will be 3, 3, 3

for (var i = 0; i < 3; i++) {
   setTimeout(() => console.log(i), 1000);
}
// Output: 3, 3, 3

Why is this happening?

•var has no block scope

•When setTimeout executes, the loop has already finished

•At this point, i is already 3

•So all three setTimeouts print 3

Solutions

1. Using IIFE Solution
for (var i = 0; i < 3; i++) {
   (function(j) {
     setTimeout(() => console.log(j), 1000);
   })(i);
}
// Output: 0, 1, 2
Why does this work?

•IIFE creates a new scope

•Each loop passes the current i value

•Each setTimeout has its own j value

•So it correctly prints 0, 1, 2

2. Using let Solution (Most Recommended)
for (let i = 0; i < 3; i++) {
   setTimeout(() => console.log(i), 1000);
}
// Output: 0, 1, 2
Why does this work?

•let has block scope

•Each loop creates a new i

•Each setTimeout remembers its own i value

•So it correctly prints 0, 1, 2

（3）Why use IIFE?

Answer:IIFE creates a new scope that can:

  • •
    Protect variables from external modification
  • •
    Make code more secure and modular