# variable

[JS]() ⟩ variable

{% hint style="success" %}
a <mark style="color:purple;">**variable**</mark> has a [val](val "mention")and an [id](grammar/token/id "mention") as its <mark style="color:yellow;">**name**</mark>.

:u6307: <mark style="color:yellow;">**synonyms**</mark>： "<mark style="color:blue;">**binding**</mark>"
{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="warning" %}
[assign](grammar/op/assign "mention") to an [undeclared](grammar/token/id/undeclared "mention") will result in an [accidental-global-variable-in-sloppy-mode](concept/env/js-engine/mode/sloppy-mode/accidental-global-variable-in-sloppy-mode "mention") in [sloppy-mode](concept/env/js-engine/mode/sloppy-mode "mention").
{% endhint %}
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %}
A "[variable](variable "mention")" is just a [prop](val/obj/prop "mention") of the [environment-record](concept/execution-context/lexical-environment/environment-record "mention") (associated with the <mark style="color:yellow;">**currently executing**</mark> [block](grammar/statement/other/block "mention") /[func](val/func "mention") /[module](module "mention") /<mark style="color:yellow;">**script**</mark>).&#x20;
{% endhint %}

{% hint style="warning" %}
<mark style="color:purple;">**variables**</mark> just been <mark style="color:yellow;">**declared**</mark> will be <mark style="color:yellow;">**assigned**</mark> [undefined](val/prim/undefined "mention") <mark style="color:orange;">**automatically**</mark> (with some nuances).

* [var](scope/hoist/variable/var "mention") - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> initialized to "[undefined](val/prim/undefined "mention")".
* [let-const](scope/hoist/variable/let-const "mention") - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> "[<mark style="color:red;">**uninitialized**</mark>](variable/access/uninitialized)"❗️
* [require-initial](variable/declare/const/require-initial "mention") - must declare with [initial-value](variable/declare/initial-value "mention")❗️
* [function](scope/hoist/function "mention") - <mark style="color:yellow;">**declaration**</mark> hoisted, <mark style="color:yellow;">**value**</mark> initialized to a [func](val/func "mention").
{% endhint %}

{% hint style="success" %}
<mark style="color:orange;">**(other than**</mark> [declare](grammar/declare "mention")<mark style="color:red;">**)**</mark> <mark style="color:yellow;">**all occurrences**</mark> of <mark style="color:purple;">**variables**</mark>/[id](grammar/token/id "mention")s serve in one of <mark style="color:yellow;">**two "roles"**</mark>：

* the <mark style="color:orange;">**target**</mark> of an [assign](grammar/op/assign "mention"). ([lhs](variable/access/lhs "mention"))
* the <mark style="color:orange;">**source**</mark> of a [val](val "mention"). ([rhs](variable/access/rhs "mention"))&#x20;
{% endhint %}

{% hint style="warning" %}
[redeclare](variable/declare/var/redeclare "mention") (<mark style="color:yellow;">**even in**</mark> [strict-mode](concept/env/js-engine/mode/strict-mode "mention")):exclamation:
{% endhint %}

{% hint style="info" %}
a [closure](val/func/closure "mention") (or [iife](val/func/expr/iife "mention")) can be used to create a [scope](scope "mention") to <mark style="color:yellow;">**hide**</mark> <mark style="color:purple;">**variables**</mark>/[func](val/func "mention")s.
{% endhint %}

```javascript
// ⭐️ states of an identifier/variable (in a specific scope)
//    • undeclared identifier
//   -> uninitialized variable (declared but undefined) 
//   -> initialized variable (with value !== undefined)
```
{% endtab %}

{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**declaring variables**</mark>
  * [declare](variable/declare "mention") / [redeclare](variable/redeclare "mention")
  * [var](variable/declare/var "mention") / [let](variable/declare/let "mention") / [const](variable/declare/const "mention")
  * [param](val/func/param "mention") - parameters are variables.
* <mark style="color:yellow;">**referencing variables**</mark>
  * [variable](scope/global/variable "mention")
  * [rhs](variable/access/rhs "mention") / [lhs](variable/access/lhs "mention")&#x20;
  * [undeclared](grammar/token/id/undeclared "mention") - how to check if a variable is <mark style="color:yellow;">**undeclared**</mark>?
  * [tdz](variable/access/tdz "mention") of a [let](variable/declare/let "mention")/[const](variable/declare/const "mention") variable.
  * [uninitialized](variable/access/uninitialized "mention")
* <mark style="color:yellow;">**variable hoisting**</mark>
  * [let-const](scope/hoist/variable/let-const "mention")
  * [var](scope/hoist/variable/var "mention")
  * [fe-not-hoisted](scope/hoist/variable/var/fe-not-hoisted "mention")
  * compare：[function](scope/hoist/function "mention")
* <mark style="color:yellow;">**other topics**</mark>
  * [shadow](variable/shadow "mention")
  * [delete](variable/delete "mention")
{% endtab %}

{% tab title="🗺️ 圖解" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FZoBFNLUHVAiHD2Pr9cKg%2Fvariable.svg?alt=media&#x26;token=e849cb3f-80ad-4e32-bd13-c1b0be9ffa55" alt="a variable" class="gitbook-drawing">
{% endtab %}

{% tab title="👥 相關" %}
* [let](variable/declare/let "mention") declares a [block](grammar/statement/other/block/block "mention")d local [variable](variable "mention").
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [3 Ways to Check if a Variable is Defined in JavaScript](https://dmitripavlutin.com/javascript-defined-variable-checking/)
* [ ] JavaScriptTutorial ⟩ [JavaScript Variables](https://www.javascripttutorial.net/javascript-variables/)
* [ ] Eloquent JavaScript ⟩ [Binding](https://eloquentjavascript.net/02_program_structure.html#h_lnOC+GBEtu)
* [ ] [ydkjs-scope-and-closures-v.2](../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩ Ch. 1 ⟩ [Compiler Speak](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#compiler-speak)
* [ ] JS.info ⟩ [Variables](https://javascript.info/closure#step-1-variables)
{% endtab %}

{% tab title="📘 手冊" %}
* [ ] [Variable](https://developer.mozilla.org/en-US/docs/Glossary/Variable)
{% endtab %}
{% endtabs %}
