# cannot access 'xxx' before initialization❗️

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [error](https://lochiwei.gitbook.io/web/js/err) ⟩ [ReferenceError](https://lochiwei.gitbook.io/web/js/err/ref) ⟩ cannot access '...' before initialization

{% hint style="danger" %}
:no\_entry: <mark style="color:red;">**ReferenceError**</mark>：[<mark style="color:yellow;">**cannot access '...' before initialization**</mark>](https://lochiwei.gitbook.io/web/js/err/ref/cannot-access-before-init):exclamation:
{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}

* replit：[TDZ: let/const/class](https://replit.com/@pegasusroe/TDZ-letconstclass#index.js)

{% hint style="danger" %} <mark style="color:yellow;">**using**</mark> [typeof](https://lochiwei.gitbook.io/web/js/val/type/name/typeof "mention") on [lexical-declaration](https://lochiwei.gitbook.io/web/js/grammar/declare/lexical-declaration "mention") ([let](https://lochiwei.gitbook.io/web/js/variable/declare/let "mention")/ [const](https://lochiwei.gitbook.io/web/js/variable/declare/const "mention")/ [class](https://lochiwei.gitbook.io/web/js/val/class "mention")) in its [tdz](https://lochiwei.gitbook.io/web/js/variable/access/tdz "mention") will throw a [<mark style="color:red;">**ReferenceError**</mark>](https://lochiwei.gitbook.io/web/js/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 {}
```

{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* [tdz](https://lochiwei.gitbook.io/web/js/variable/access/tdz "mention")
* [undeclared](https://lochiwei.gitbook.io/web/js/grammar/token/id/undeclared "mention")
  {% endtab %}

{% tab title="💈範例" %}

* replit：[hoisting & TDZ](https://replit.com/@pegasusroe/hoisting-and-TDZ#index.js)

{% hint style="danger" %}
referring to a variable before initialization causes a [runtime](https://lochiwei.gitbook.io/web/js/err/runtime "mention").

```javascript
const { log } = console;

function sayHi() {
    
    var greeting = "Hello";

    // block scope
    {
        
    // --------------------------
    // ⭐️ cause runtime error❗
    // --------------------------
        greeting = "Howdy";                              // ╮
    //  ^^^^^^^^                                         // ⭐️
    // ⛔ ReferenceError: (runtime error)                // Temporal
    //    Cannot access 'greeting'                       // Dead
    //    before initialization                          // Zone (TDZ)
                                                         // for `greeting`
                                                         // ╯
        
        let greeting = "Hi";   // ⭐️ `greeting` declared here❗
        
        log(greeting);
    }
    
}

log('hello');    // ✅ 'hello' (this line is OK)
sayHi();         // ⛔ run-time error
```

{% endhint %}
{% endtab %}

{% tab title="✨ 範例" %}

* [let-const](https://lochiwei.gitbook.io/web/js/scope/hoist/variable/let-const "mention") - uninitialized variable.
* [initial-value](https://lochiwei.gitbook.io/web/js/variable/declare/initial-value "mention") ⟩ [#fan-li](https://lochiwei.gitbook.io/web/variable/declare/initial-value#fan-li "mention") - improper declaration.
* [typeof-let-const-class-in-tdz-gets-an-error](https://lochiwei.gitbook.io/web/js/variable/access/tdz/typeof-let-const-class-in-tdz-gets-an-error "mention")
  {% endtab %}
  {% endtabs %}