# accessing var before declaration gets undefined❗️

[JS](../../..) ⟩ [variable](../..) ⟩ [var]() ⟩ access before declaration gets "undefined"

{% hint style="danger" %}
(<mark style="color:red;">**unexpected result**</mark>)

[](<> "mention") <mark style="color:yellow;">**has**</mark>**&#x20;**<mark style="color:red;">**no**</mark> [tdz](../../access/tdz "mention"), but <mark style="color:yellow;">**accessing**</mark> it <mark style="color:red;">**before**</mark> its [declare](../../../grammar/declare "mention") will <mark style="color:yellow;">**get**</mark> [undefined](../../../val/prim/undefined "mention"), <mark style="color:yellow;">**instead of**</mark> its [initial-value](../initial-value "mention") (if exists):exclamation:
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}
* replit：[access var before declaration](https://replit.com/@pegasusroe/access-var-before-declaration#index.js)

```javascript
// ❗ "var" has no "temporal dead zone", 
//    but it's `undefined` initially.

// ⭐️ access before declaration  ╭── ⭐️ ───╮
log(aVar, typeof aVar);     // ❗ undefined, 'undefined'

// ┌─────────────────┐
// │ var declaration │
// └─────────────────┘

// ⭐️ access after declaration
var aVar = 'hello';

log(aVar, typeof aVar);     // ❗ "hello", 'undefined'
```
{% endtab %}

{% tab title="👥 相關" %}
* :white\_check\_mark:[stop-using-var](stop-using-var "mention")
* :exclamation:[var](../../../scope/hoist/variable/var "mention") - [](<> "mention") is hoisted to top of enclosing [function](../../../scope/function "mention").
{% endtab %}

{% tab title="📘 手冊" %}
* [ ] [Statements and declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) ⟩ [declaring variables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#declaring_variables) ⟩ [var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
{% endtab %}
{% endtabs %}

