---
description: 🚧 under construction
---

# var

[JS](../..) ⟩ [variable](..) ⟩ var

{% hint style="warning" %}
<mark style="color:red;">**Stop**</mark>**&#x20;**<mark style="color:yellow;">**using**</mark>**&#x20;**<mark style="color:purple;">**var**</mark>:exclamation: ( :point\_right:see [why](var/stop-using-var):exclamation:)
{% endhint %}

{% hint style="success" %}
( :star: <mark style="color:purple;">**var**</mark> is a [statement](../../grammar/statement "mention"), <mark style="color:red;">**not**</mark> a [declare](../../grammar/declare "mention"):exclamation:)&#x20;

<mark style="color:yellow;">**declares**</mark> a [..](.. "mention") in [function](../../scope/function "mention") / [global](../../scope/global "mention") ( and <mark style="color:yellow;">**does a lot of**</mark>**&#x20;**<mark style="color:red;">**side effects**</mark>:exclamation:).
{% endhint %}

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

* is a [reserved](../../grammar/token/keyword/reserved "mention"):exclamation:
* is a [statement](../../grammar/statement "mention"), <mark style="color:red;">**not**</mark> a [declare](../../grammar/declare "mention"):exclamation:( 👉 [var-is-a-statement](var/var-is-a-statement "mention"):exclamation:)
* <mark style="color:red;">**doesn't**</mark>**&#x20;**<mark style="color:yellow;">**have**</mark> [block](../../grammar/statement/other/block/block "mention").   ( 👉 [in-block-cant-shadow](var/in-block-cant-shadow "mention"):exclamation:)

:point\_right: compare： [declare](../../val/func/declare "mention")
{% endhint %}

{% hint style="warning" %}
JS is <mark style="color:green;">**lenient**</mark> with [var](var "mention"), <mark style="color:red;">**strict**</mark> with [let](let "mention").

* [redeclare](var/redeclare "mention"), even in [strict-mode](../../concept/env/js-engine/mode/strict-mode "mention"):exclamation:
* [no-redeclare](let/no-redeclare "mention"), even in [sloppy-mode](../../concept/env/js-engine/mode/sloppy-mode "mention"):exclamation:
{% endhint %}

{% hint style="warning" %}
in [global](../../scope/global "mention"),&#x20;

* <mark style="color:purple;">**var**</mark> / [func](../../val/func "mention") are <mark style="color:yellow;">**implemented**</mark> as  [prop](../../scope/global/object/prop "mention"):exclamation:
* these <mark style="color:yellow;">**properties**</mark> <mark style="color:red;">**cannot**</mark> be <mark style="color:yellow;">**deleted**</mark> with [delete](../../val/obj/prop/create/delete "mention"):exclamation:

👉 [is-global-obj-prop](var/is-global-obj-prop "mention")
{% endhint %}

{% hint style="success" %}
<mark style="color:purple;">**Variable Statement**</mark>

* <mark style="color:purple;">**var**</mark> statement declares variables that are scoped to the [running execution context](https://tc39.es/ecma262/#running-execution-context)'s <mark style="color:orange;">**VariableEnvironment**</mark>.&#x20;
* <mark style="color:purple;">**var**</mark> variables are created when their containing [Environment Record](https://tc39.es/ecma262/#sec-environment-records) is instantiated and are initialized to [undefined](../../val/prim/undefined "mention") when created.&#x20;
* Within the [scope](../../scope "mention") of any <mark style="color:orange;">**VariableEnvironment**</mark> a common [BindingIdentifier](https://tc39.es/ecma262/#prod-BindingIdentifier) may appear in more than one [VariableDeclaration](https://tc39.es/ecma262/#prod-VariableDeclaration) but those declarations collectively define <mark style="color:yellow;">**only one**</mark> variable.&#x20;
* A variable defined by a [VariableDeclaration](https://tc39.es/ecma262/#prod-VariableDeclaration) with an [Initializer](https://tc39.es/ecma262/#prod-Initializer) is <mark style="color:yellow;">**assigned**</mark> the <mark style="color:yellow;">**value**</mark> of its [Initializer](https://tc39.es/ecma262/#prod-Initializer)'s [AssignmentExpression](https://tc39.es/ecma262/#prod-AssignmentExpression) when the [VariableDeclaration](https://tc39.es/ecma262/#prod-VariableDeclaration) is <mark style="color:yellow;">**executed**</mark>, <mark style="color:red;">**not**</mark> <mark style="color:yellow;">**when**</mark> the variable is <mark style="color:yellow;">**created**</mark>.

📘 [js-spec](../../../master/ref/js-spec "mention") ⟩ [Variable Statement](https://tc39.es/ecma262/#sec-variable-statement)
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* :white\_check\_mark:[stop-using-var](var/stop-using-var "mention")
* [var-is-a-statement](var/var-is-a-statement "mention")(<mark style="color:orange;">**side effects**</mark>)
* [is-global-obj-prop](var/is-global-obj-prop "mention")(<mark style="color:orange;">**side effect**</mark>)
* [accessing-var-before-declaration-gets-undefined](var/accessing-var-before-declaration-gets-undefined "mention")(<mark style="color:red;">**unexpected result**</mark>)
* [in-block-cant-shadow](var/in-block-cant-shadow "mention") (<mark style="color:red;">**unexpected result**</mark>)
* [var-in-block-cant-shadow-outer-let](var/var-in-block-cant-shadow-outer-let "mention")(<mark style="color:red;">**unexpected result**</mark>)
* [param-by-var](var/param-by-var "mention")(<mark style="color:yellow;">**bad practice**</mark>)
* [redeclare](var/redeclare "mention")(<mark style="color:yellow;">**bad practice**</mark>)
{% endtab %}

{% tab title="🧨 雷區" %}
* [in-block-cant-shadow](var/in-block-cant-shadow "mention"):exclamation:
* [accidental-global-variable-in-sloppy-mode](../../concept/env/js-engine/mode/sloppy-mode/accidental-global-variable-in-sloppy-mode "mention"):exclamation:
* [var-is-a-statement](var/var-is-a-statement "mention"):exclamation:
{% endtab %}

{% tab title="👥 相關" %}
* [param-by-var](var/param-by-var "mention")
* [strict-mode](../../concept/env/js-engine/mode/strict-mode "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] itHome ⟩ [你不可不知的 JavaScript 二三事](https://ithelp.ithome.com.tw/users/20112483/ironman/2016) ⟩&#x20;
  * [ ] [#Day7：傳統 var 關鍵字的不足](https://ithelp.ithome.com.tw/articles/10203548)
  * [ ] [#Day8：var 掰掰 — ES6 更嚴謹安全的 let 和 const](https://ithelp.ithome.com.tw/articles/10203715)
{% 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)
* [ ] [js-spec](../../../master/ref/js-spec "mention") ⟩&#x20;
  * [ ] [Variable Statement](https://tc39.es/ecma262/#sec-variable-statement)
  * [ ] [VariableStatement](https://tc39.es/ecma262/#prod-VariableStatement)
{% endtab %}

{% tab title="🗣 討論" %}
* [Is there any difference between a global variable and a property of the Global Object](https://stackoverflow.com/questions/12439256/is-there-any-difference-between-a-global-variable-and-a-property-of-the-global-o)
* [Where are arguments positioned in the lexical environment?](https://stackoverflow.com/questions/61208843/where-are-arguments-positioned-in-the-lexical-environment)
{% endtab %}

{% tab title="🚧" %}
* [ ] VariableEnvironment
{% endtab %}
{% endtabs %}
