# temporal dead zone

[JS](../..) ⟩ [variable](..) ⟩ temporal dead zone

{% hint style="success" %}
:u6307: acronym： [tdz](tdz/tdz "mention")

A [let](../declare/let "mention")/ [const](../declare/const "mention") / [class](../../val/class "mention") is said to be in a "<mark style="color:purple;">**temporal dead zone**</mark>" <mark style="color:red;">**from**</mark> the <mark style="color:yellow;">**start of the block**</mark> <mark style="color:red;">**until**</mark> <mark style="color:yellow;">**code execution**</mark> reaches <mark style="color:yellow;">**the line**</mark> where the variable is (declared and) <mark style="color:yellow;">**initialized**</mark>.
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
<mark style="color:purple;">**TDZ**</mark>&#x20;

* the <mark style="color:yellow;">**time window**</mark> where a [const](../declare/const "mention")/[let](../declare/let "mention") variable exists but is still <mark style="color:red;">**uninitialized**</mark>, and therefore <mark style="color:red;">**cannot**</mark>**&#x20;**<mark style="color:yellow;">**be accessed**</mark> in any way.
{% endhint %}

{% hint style="warning" %}
the term "<mark style="color:purple;">**temporal**</mark>" is used because the <mark style="color:purple;">**zone**</mark> depends on the <mark style="color:orange;">**order of execution**</mark> (<mark style="color:orange;">**time**</mark>) <mark style="color:red;">**rather than**</mark> the <mark style="color:yellow;">**order of place**</mark> in which the code is written (<mark style="color:yellow;">**position**</mark>).

```javascript
{
                                        // 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](https://replit.com/@pegasusroe/temporal-in-time#index.js)
{% endhint %}
{% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
<mark style="color:yellow;">**using**</mark> [typeof](../../val/type/name/typeof "mention") on [lexical-declaration](../../grammar/declare/lexical-declaration "mention") ([let](../declare/let "mention")/ [const](../declare/const "mention")/ [class](../../val/class "mention")) in its [tdz](tdz "mention") will throw a [<mark style="color:red;">**ReferenceError**</mark>](../../err/ref/cannot-access-before-init).&#x20;

```javascript
// ⭐ 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](https://replit.com/@pegasusroe/TDZ-letconstclass#index.js)
{% endhint %}
{% endtab %}

{% tab title="✨ 範例" %}
* replit：[hoisting & TDZ](https://replit.com/@pegasusroe/hoisting-and-TDZ#index.js)
* replit：[TDZ: let/const/class](https://replit.com/@pegasusroe/TDZ-letconstclass#index.js)
{% endtab %}

{% tab title="👥 相關" %}
* [ref](../../err/ref "mention") ⟩ [cannot-access-before-init](../../err/ref/cannot-access-before-init "mention")
* [lexical-declaration](../../grammar/declare/lexical-declaration "mention") - let/const/class.
{% endtab %}

{% tab title="📘 手冊" %}
* [ ] [temporal dead zone](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [ydkjs-scope-and-closures-v.2](../../../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩ [Ch. 1: What's the Scope?](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#chapter-1-whats-the-scope) ⟩ [Hoisting](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#hoisting)
{% endtab %}
{% endtabs %}
