# scope chain

[JS](..) ⟩ [concepts](../../browser/concepts) ⟩ [scope]() ⟩ scope chain

{% hint style="success" %}
when a [module](../module "mention")/[func](../val/func "mention")/[block](../grammar/statement/other/block "mention") is <mark style="color:orange;">**defined**</mark>, a <mark style="color:yellow;">**new**</mark> [](<> "mention") is created. The positioning of scopes <mark style="color:yellow;">**nested inside one another**</mark> creates a scope hierarchy called the <mark style="color:purple;">**scope chain**</mark>.&#x20;
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
The [](<> "mention") of a <mark style="color:yellow;">**code block**</mark> can reach all its <mark style="color:yellow;">**parent's**</mark> [lexical-environment](../concept/execution-context/lexical-environment "mention") so it can use its parent’s [variable](../variable "mention")(s). In this way, we have a [chain](chain "mention"), chain of all parent’s [](<> "mention").
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* [lexical-environment](../concept/execution-context/lexical-environment "mention")
* [](<> "mention")
* [lexical-environment-vs.-scope](lexical-environment-vs.-scope "mention")
* [lexical-scope](lexical-scope "mention") - static scope
* [execution-context](../concept/execution-context "mention")
{% endtab %}

{% tab title="🔴 主題" %}
* [lhs](../variable/access/lhs "mention") - find the [variable](../variable "mention") <mark style="color:orange;">**container**</mark> <mark style="color:yellow;">**itself**</mark> (in the <mark style="color:purple;">**scope chain**</mark>).
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [ydkjs-scope-and-closures-v.2](../../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩ Chapter 3: [The Scope Chain](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch3.md#chapter-3-the-scope-chain)
* [x] Anil ⟩ [Scope, Lexical Environment and Scope Chain in JavaScript](https://medium.com/@anilakgunes/scope-lexical-environment-and-scope-chain-in-javascript-559aadb7dca8) ⭐️
{% endtab %}

{% tab title="❓" %}
{% hint style="warning" %}
Q：[lexical-environment](../concept/execution-context/lexical-environment "mention") === [](<> "mention"):question:
{% endhint %}

{% hint style="info" %}
A：my understanding is that&#x20;

* ([global](global)/[module](module)/[function](function)/[block](../grammar/statement/other/block/block)) [](<> "mention") is <mark style="color:yellow;">**determined**</mark> at [compile-time](../compile/compile-time "mention").
* [lexical-environment](../concept/execution-context/lexical-environment "mention") is <mark style="color:yellow;">**created**</mark> at [runtime](../compile/runtime "mention"), <mark style="color:red;">**every time**</mark>**&#x20;**<mark style="color:yellow;">**a**</mark>**&#x20;**<mark style="color:orange;">**scope**</mark>**&#x20;**<mark style="color:yellow;">**is entered**</mark>:exclamation:
{% endhint %}
{% endtab %}
{% endtabs %}
