---
description: 🚧 under construction
---

# scope

[JS]() ⟩ scope

{% hint style="success" %}
( <mark style="color:yellow;">**visibility**</mark> of [variable](variable "mention"))

the <mark style="color:yellow;">**current context of execution**</mark> in which [val](val "mention")s and [expr](grammar/statement/expr "mention")s are "<mark style="color:yellow;">**visible**</mark>" or <mark style="color:yellow;">**can be referenced**</mark>.
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**concepts about scopes**</mark>
  * [context-vs.-scope](scope/context-vs.-scope "mention")
  * [lexical-environment-vs.-scope](scope/lexical-environment-vs.-scope "mention")
  * [chain](scope/chain "mention")
  * [lexical-scope](scope/lexical-scope "mention") / [dynamic](scope/dynamic "mention") / [static-vs-dynamic](scope/static-vs-dynamic "mention")
  * [lexical-environment](concept/execution-context/lexical-environment "mention") - stores local variables/functions/this.
* <mark style="color:yellow;">**kindes of scopes**</mark>
  * [top-level](scope/top-level "mention") - the scope of a JS file.
  * [global](scope/global "mention")： default scope for all code running <mark style="color:yellow;">**in**</mark>**&#x20;**<mark style="color:orange;">**script mode**</mark>.
  * [module](scope/module "mention")： scope for code running <mark style="color:yellow;">**in**</mark>**&#x20;**<mark style="color:orange;">**module mode**</mark>.
  * [function](scope/function "mention")： scope created with a [func](val/func "mention").
  * [block](grammar/statement/other/block/block "mention")：scope created with a pair of <mark style="color:yellow;">**curly braces**</mark>. \
    (where [let](variable/declare/let "mention") / [const](variable/declare/const "mention") can belong to)
* <mark style="color:red;">**special**</mark>**&#x20;**<mark style="color:yellow;">**scopes**</mark>
  * [implied](scope/implied "mention") - where name of function expression lives in.
  * [parameter-scope](scope/parameter-scope "mention")
  * [for-init-scope](grammar/statement/loop/for/for/for-init-scope "mention") - where the for loop initialization variables live in.
* [<mark style="color:yellow;">**hoisting**</mark>](scope/hoist)
  * [function](scope/hoist/function "mention")
  * [var](scope/hoist/variable/var "mention")
  * [fe-not-hoisted](scope/hoist/variable/var/fe-not-hoisted "mention")
* <mark style="color:yellow;">**other topics**</mark>
  * [modify-current-scope-at-runtime](concept/env/js-engine/mode/sloppy-mode/modify-current-scope-at-runtime "mention")
  * [eval-has-its-own-scope-in-strict-mode](concept/env/js-engine/mode/strict-mode/eval-has-its-own-scope-in-strict-mode "mention")
{% endtab %}

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

* <mark style="color:yellow;">**determined**</mark> at [compile-time](compile/compile-time "mention").&#x20;
* <mark style="color:red;">**but**</mark> ([lexical-environment](concept/execution-context/lexical-environment "mention")) <mark style="color:yellow;">**created**</mark> <mark style="color:red;">**at**</mark> [runtime](compile/runtime "mention"), each time a <mark style="color:purple;">**scope**</mark> is entered.
* <mark style="color:red;">**but in**</mark> [sloppy-mode](concept/env/js-engine/mode/sloppy-mode "mention"), you can <mark style="color:red;">**modify**</mark> <mark style="color:purple;">**scope**</mark> (I think the term "scope" is not quite accurate, maybe [lexical-environment](concept/execution-context/lexical-environment "mention"):question:) <mark style="color:red;">**at**</mark> [runtime](compile/runtime "mention"). \
  ( 👉 [modify-current-scope-at-runtime](concept/env/js-engine/mode/sloppy-mode/modify-current-scope-at-runtime "mention"):exclamation:)
{% endhint %}

{% hint style="info" %}
The <mark style="color:purple;">**scope**</mark> of a <mark style="color:yellow;">**code block**</mark> can reach all its parents [lexical-environment](concept/execution-context/lexical-environment "mention") so it can use its parent’s variables. In this way, we have a [chain](scope/chain "mention"), chain of all parent’s <mark style="color:purple;">**scope**</mark>.
{% endhint %}

{% hint style="warning" %}
[context](concept/context "mention") <mark style="color:yellow;">**vs.**</mark> [scope](scope "mention")

* <mark style="color:purple;">**scope**</mark>：<mark style="color:yellow;">**visibility**</mark> of [variable](variable "mention").&#x20;
* <mark style="color:purple;">**context**</mark>：([this](concept/execution-context/this "mention")) <mark style="color:yellow;">**object**</mark> to which a [func](val/func "mention") refers.
{% endhint %}

{% hint style="info" %}
[top-level](scope/top-level "mention") <mark style="color:yellow;">**vs.**</mark> [global](scope/global "mention")

* [top-level](scope/top-level "mention")： <mark style="color:yellow;">**relative**</mark> to each <mark style="color:yellow;">**JS file**</mark>.
* [global](scope/global "mention")： global absolutely.
{% endhint %}

{% hint style="warning" %}
in [node.js](concept/env/node.js "mention"), each <mark style="color:yellow;">**JS file**</mark> is treated as a [module](module "mention").&#x20;
{% endhint %}

{% hint style="info" %}
<mark style="color:yellow;">**inner**</mark> scopes **have access** to <mark style="color:yellow;">**outer**</mark> scopes, but <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**vice versa**</mark>.
{% endhint %}

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

{% hint style="danger" %}
if the <mark style="color:yellow;">**code**</mark> you need to <mark style="color:yellow;">**wrap**</mark> a [scope](scope "mention") <mark style="color:yellow;">**around**</mark> has [return](grammar/statement/flow/jump/return "mention"), [this](concept/execution-context/this "mention"), [break](grammar/statement/flow/jump/break "mention"), or [continue](grammar/statement/flow/jump/continue "mention") in it, <mark style="color:red;">**don't**</mark>**&#x20;**<mark style="color:yellow;">**use**</mark> a [func](val/func "mention")/[iife](val/func/expr/iife "mention")(which has <mark style="color:yellow;">**its own**</mark> [boundary](val/func/boundary "mention")), use a [block](grammar/statement/other/block "mention") instead❗️

📗 [You Don't Know JS Yet: Scopes & Closrues](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch6.md#function-boundaries)
{% endhint %}

{% hint style="warning" %}
雖說似乎有一個奇怪的 [for-init-scope](grammar/statement/loop/for/for/for-init-scope "mention")，但裡面 [let](variable/declare/let "mention") 變數的表現其實更像是 [block-scoped](grammar/statement/other/block/block)。:point\_right: [scopes-matter-with-closures](val/func/closure/scopes-matter-with-closures "mention") ⟩ [#undefined-1](../val/func/closure/scopes-matter-with-closures#undefined-1 "mention")
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}
* <mark style="color:purple;">**scopes**</mark> are <mark style="color:yellow;">**determined**</mark> at [compile-time](compile/compile-time "mention").
* <mark style="color:purple;">**scopes**</mark> are <mark style="color:yellow;">**created**</mark> at [runtime](compile/runtime "mention").
* in [strict-mode](concept/env/js-engine/mode/strict-mode "mention"), script in [eval](scope/global/object/eval "mention") has its own [scope](scope "mention").
* [closure](val/func/closure "mention") ...  🚧
* [lexical-environment](concept/execution-context/lexical-environment "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Kevin Chisholm ⟩ [What is the Difference Between Scope and Context in JavaScript?](https://blog.kevinchisholm.com/javascript/difference-between-scope-and-context/)
* [ ] [ydkjs-scope-and-closures-v.2](../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention")
* [ ] JS.info ⟩ [Variable scope, closure](https://javascript.info/closure)
* [ ] itHome ⟩ [你不可不知的 JavaScript 二三事](https://ithelp.ithome.com.tw/users/20112483/ironman/2016) ⟩&#x20;
  * [ ] [#Day5：變數作用域 (Scope) (1)](https://ithelp.ithome.com.tw/articles/10203387)
  * [ ] [#Day6：變數作用域 (Scope) (2)](https://ithelp.ithome.com.tw/articles/10203306)
  * [ ] [#Day9：圖解變數作用域 (Scope)](https://ithelp.ithome.com.tw/articles/10204622)
{% endtab %}

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

{% tab title="🗣 討論" %}
* [What is the 'global' object in NodeJS](https://stackoverflow.com/a/43630222/5409815)
* [Lexical environment and function scope](https://stackoverflow.com/questions/12599965/lexical-environment-and-function-scope)
{% endtab %}
{% endtabs %}
