🔰"for-init" scope

JS⟩ syntax ⟩ for loops ⟩ for ⟩ "for-init" scope

a special scope (in a for loop) that lies between the outer scope and inner block scope. ( 👉 similar to function name scope )

⭐️ 重點

雖說似乎有這樣一個奇怪的 for-init scope，但裡面 let 變數的表現其實更像是 block-scoped。👉 scopes matter with closures ⟩ ❓

💈範例

• replit：for-init scope

const { log } = console;

// ----------------------------------------------
//     ⭐️ scopes around a classic for-loop❗
// ----------------------------------------------

// 🔸 (1) outer scope

// 🔸 (2) "init-block" scope
//
//  ┌                                             ┐
//  │  a special "init-block" scope lies between  │
//  │  "outer scope" and "inner block scope"      │
//  └           │                                 ┘
//              │
//  ╭─ (2) init-blk scope ──╮
//  │                       │
for ( let i = 0; i < 3; i++ ) {    // ⭐️ `i` is invisible outside `for`
    
    // 🔸 (3) inner "block scope"
    
    // --------------------------------------------------------
    let i = 100;    // ⭐️ index `i` can be declared again❗
                    // ----------------------------------------
                    // Should (2) and (3) be the same scope, 
                    // this would have been a SyntaxError.
                    // ( `let` doesn't allow redeclarations❗)
    // --------------------------------------------------------
    
    log(i);         // 100, 100, 100
}

// ❗ "var" has no "init-block" scope
//
//  ╭── init-block scope ───╮
for (var j = 10; j < 13; j++) {    // ⭐️ `j` is visible outside `for`❗
    log(j);         // 10, 11, 12
}

// log
[
    // ⭐️ "let" is invisible outside for loop
    // i,           // ⛔ ReferenceError: i is not defined

    // ⭐️ "var" is visible❗
    j,              // 13
    
].forEach(x => console.log(x));