❗scopes matter with closures

JS ⟩ value ⟩ function ⟩ closure ⟩ scopes matter

it matters from which scope your closure closes over variables.

⭐️ 重點

the scoping effect of the initialization block can be understood as if the declaration happens within the loop body, but just happens to be accessible within the condition and update parts.

📘 MDN

💈範例

• replit：scopes matter with closures

const { log } = console;

//   ╭── i ──╮ <--- ⭐ `i` is "block-scoped"
for (let i = 0; i < 3; i++) {
    // ⭐ every time "block scope" is entered,
    //    a new/different `i` is captured by closure.
    //
    //         ╭─ closure ──╮
    setTimeout( () => log(i) , 1000);    // 0, 1, 2 ⭐ 
}

let j = 0;    // ❗ `j` is in "outer scope"

for (  ; j < 3; j++) {
    // ❗ every closure is capturing the same `j` variable
    //
    //         ╭─ closure ──╮
    setTimeout( () => log(j) , 2000);    // 3, 3, 3 ❗ (j = 3 after for-loop)
}

var keep1 = [];

//   ╭── i ──╮ <--- ❗ "var" has no block scope
for (var i = 0; i < 3; i++) {
    // ❗ every closure is keeping the "same" `i`.
    keep1[i] = function keepI(){
        return i;
    };
}

var keep2 = [];

//   ╭── i ──╮ <--- ⭐ "let" is block-scoped
for (let i = 0; i < 3; i++) {
    // ⭐ `i` is block-scoped, every time block scope is entered,
    //    a new/different `i` is created & kept by closure.
    keep2[i] = function keepI(){
        return i;
    };
}

[
    keep1.map(f => f()),    // ❗ [ 3, 3, 3 ]
    keep2.map(f => f()),    // ⭐ [ 0, 1, 2 ]
    
].forEach(x => log(x));

👥 相關

• for loop

📘 手冊

• for ⟩ initialization block syntax ⟩

  • Lexical declarations in the initialization block is scoped to the for loop

• Closures

❓

如果如 "for-init" scope 中所說： let 變數活在這個特殊的範圍中，那麼本例的 "i" 應該就活在這個範圍內，對內部的 "block scope" 來說，應該也算是一個 "outer scope"，照理說表現的方式應該要跟 "j" 一樣才是，但這裡的 "i" 表現得卻像是在 "block scope" 裏面才生出來的「新變數」一樣，實在有點怪❗️

所以看來，在實際使用上，"i" 的行為更像是 "block-scoped" 一些 ❓