> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/variable/declare/var.md).

# var

[JS](/web/js.md) ⟩ [variable](/web/js/variable.md) ⟩ 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](/web/js/variable/declare/var/stop-using-var.md):exclamation:)
{% endhint %}

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

<mark style="color:yellow;">**declares**</mark> a [variable](/web/js/variable.md) in [function scope](/web/js/scope/function.md) / [global scope](/web/js/scope/global.md) ( 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 word](/web/js/grammar/token/keyword/reserved.md):exclamation:
* is a [statement](/web/js/grammar/statement.md), <mark style="color:red;">**not**</mark> a [declaration](/web/js/grammar/declare.md):exclamation:( 👉 [var is a statement❗️](/web/js/variable/declare/var/var-is-a-statement.md):exclamation:)
* <mark style="color:red;">**doesn't**</mark>**&#x20;**<mark style="color:yellow;">**have**</mark> [block scope](/web/js/grammar/statement/other/block/block.md).   ( 👉 [var has no block scope❗️](/web/js/variable/declare/var/in-block-cant-shadow.md):exclamation:)

:point\_right: compare： [function declaration](/web/js/val/func/declare.md)
{% endhint %}

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

* [var redeclaration applied even in strict mode❗️](/web/js/variable/declare/var/redeclare.md), even in [strict mode](/web/js/concept/env/js-engine/mode/strict-mode.md):exclamation:
* [let redeclaration not allowed even in sloppy mode❗️](/web/js/variable/declare/let/no-redeclare.md), even in [sloppy mode](/web/js/concept/env/js-engine/mode/sloppy-mode.md):exclamation:
  {% endhint %}

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

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

👉 [global var / function is global object property❗️](/web/js/variable/declare/var/is-global-obj-prop.md)
{% 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](/web/js/val/prim/undefined.md) when created.&#x20;
* Within the [scope](/web/js/scope.md) 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](/web/master/ref/js-spec.md) ⟩ [Variable Statement](https://tc39.es/ecma262/#sec-variable-statement)
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* :white\_check\_mark:[stop using var❗️](/web/js/variable/declare/var/stop-using-var.md)
* [var is a statement❗️](/web/js/variable/declare/var/var-is-a-statement.md)(<mark style="color:orange;">**side effects**</mark>)
* [global var / function is global object property❗️](/web/js/variable/declare/var/is-global-obj-prop.md)(<mark style="color:orange;">**side effect**</mark>)
* [accessing var before declaration gets undefined❗️](/web/js/variable/declare/var/accessing-var-before-declaration-gets-undefined.md)(<mark style="color:red;">**unexpected result**</mark>)
* [var has no block scope❗️](/web/js/variable/declare/var/in-block-cant-shadow.md) (<mark style="color:red;">**unexpected result**</mark>)
* [var in block can't shadow outer let❗️](/web/js/variable/declare/var/var-in-block-cant-shadow-outer-let.md)(<mark style="color:red;">**unexpected result**</mark>)
* [var can shadow parameter even in strict mode❗️](/web/js/variable/declare/var/param-by-var.md)(<mark style="color:yellow;">**bad practice**</mark>)
* [var redeclaration applied even in strict mode❗️](/web/js/variable/declare/var/redeclare.md)(<mark style="color:yellow;">**bad practice**</mark>)
  {% endtab %}

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

* [var has no block scope❗️](/web/js/variable/declare/var/in-block-cant-shadow.md):exclamation:
* [accidental global variable in sloppy mode❗️](/web/js/concept/env/js-engine/mode/sloppy-mode/accidental-global-variable-in-sloppy-mode.md):exclamation:
* [var is a statement❗️](/web/js/variable/declare/var/var-is-a-statement.md):exclamation:
  {% endtab %}

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

* [var can shadow parameter even in strict mode❗️](/web/js/variable/declare/var/param-by-var.md)
* [strict mode](/web/js/concept/env/js-engine/mode/strict-mode.md)
  {% 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](/web/master/ref/js-spec.md) ⟩&#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 %}