# temporal dead zone

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

{% hint style="success" %}
:u6307: acronym： [TDZ](/web/js/variable/access/tdz/tdz.md)

A [let](/web/js/variable/declare/let.md)/ [const](/web/js/variable/declare/const.md) / [class](/web/js/val/class.md) 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](/web/js/variable/declare/const.md)/[let](/web/js/variable/declare/let.md) 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](/web/js/val/type/name/typeof.md) on [lexical declaration](/web/js/grammar/declare/lexical-declaration.md) ([let](/web/js/variable/declare/let.md)/ [const](/web/js/variable/declare/const.md)/ [class](/web/js/val/class.md)) in its [temporal dead zone](/web/js/variable/access/tdz.md) will throw a [<mark style="color:red;">**ReferenceError**</mark>](/web/js/err/ref/cannot-access-before-init.md).&#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="👥 相關" %}

* [⛔️ ReferenceError](/web/js/err/ref.md) ⟩ [cannot access 'xxx' before initialization❗️](/web/js/err/ref/cannot-access-before-init.md)
* [lexical declaration](/web/js/grammar/declare/lexical-declaration.md) - 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 & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) ⟩ [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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/variable/access/tdz.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.