⛔temporal dead zone

JS ⟩ variable ⟩ temporal dead zone

🈯 acronym： TDZ

A let/ const / class is said to be in a "temporal dead zone" from the start of the block until code execution reaches the line where the variable is (declared and) initialized.

⭐️ 重點

TDZ

• the time window where a const/let variable exists but is still uninitialized, and therefore cannot be accessed in any way.

the term "temporal" is used because the zone depends on the order of execution (time) rather than the order of place in which the code is written (position).

{
                                        // TDZ (for `a`) starts
    const f = () => console.log(a);     // - OK: `a` hasn't been actually referenced.
    let a = 3;                          // TDZ (for `a`) ends.

    f();                                // OK: `a` called outside TDZ.
}

• replit："temporal" in time

🧨 雷區

using typeof on lexical declaration (let/ const/ class) in its temporal dead zone will throw a ReferenceError.

// ⭐ temporal dead zone (start)
// ------------------------------
// typeof aLet;       // ⛔ ReferenceError: Cannot access 'aLet' before initialization
// typeof aConst;     // ⛔ ReferenceError: Cannot access 'aConst' before initialization
// typeof aClass;     // ⛔ ReferenceError: Cannot access 'aClass' before initialization

typeof undeclared;        // ❗ 'undefined'

// ⭐ lexical declarations (let/const/class)
// --------------------------------------------
let aLet;                 // ⭐ initialized to `undefined`
const aConst = "hello";
class aClass {}

• replit：TDZ: let/const/class

✨ 範例

• replit：hoisting & TDZ
• replit：TDZ: let/const/class

👥 相關

• ⛔️ ReferenceError ⟩ cannot access 'xxx' before initialization❗️

• lexical declaration - let/const/class.

📘 手冊

• temporal dead zone

📗 參考

• YDKJS: Scope & Closures (v.2) ⟩ Ch. 1: What's the Scope? ⟩ Hoisting