# global scope

[JS](..) ⟩ [scope]() ⟩ global

{% hint style="success" %}
(in a programming [env](../concept/env "mention")) \
the [](<> "mention") that <mark style="color:yellow;">**contains**</mark>, and is <mark style="color:yellow;">**visible**</mark> in, <mark style="color:orange;">**all other scopes**</mark>.
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}
* [object](global/object "mention") - an [object](https://developer.mozilla.org/en-US/docs/Glossary/Object) that <mark style="color:orange;">**always**</mark> exists in the [global scope](https://developer.mozilla.org/en-US/docs/Glossary/Global_scope).
  * [this](global/object/this "mention") - identifier for the global object.
  * [window](global/object/window "mention") - global object in browser.
  * [self](../../browser/api/worker/self "mention") - global object in web worker.
  * [global](global/object/global "mention") - global object in Node.js.
  * [prop](global/object/prop "mention")
* [variable](global/variable "mention")
* [dom-element-with-id](global/dom-element-with-id "mention")
* [is-in-global-scope](global/is-in-global-scope "mention") - check if current context is in global scope.
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
<mark style="color:purple;">**global scope**</mark>

* in <mark style="color:yellow;">**browsers**</mark>：<mark style="color:purple;">**global scope**</mark> <mark style="color:yellow;">**is**</mark> [top-level](top-level "mention"). &#x20;
* in <mark style="color:yellow;">**Node.js**</mark>：<mark style="color:purple;">**global scope**</mark> <mark style="color:red;">**is not**</mark> [top-level](top-level "mention").

👉 Node.js ⟩ ["global"](https://nodejs.org/api/globals.html#globals_global) ⭐️
{% endhint %}

{% hint style="warning" %}
in the <mark style="color:purple;">**global scope**</mark>, [var](../variable/declare/var)/[function](../val/func/declare) <mark style="color:yellow;">**declarations**</mark> also expose themselves as [prop](../val/obj/prop "mention") on the [object](global/object "mention").
{% endhint %}

{% hint style="success" %}
in <mark style="color:purple;">**global scope**</mark>, <mark style="color:yellow;">**JS**</mark> exposes its <mark style="color:yellow;">**built-ins**</mark>:

* <mark style="color:yellow;">**primitives**</mark>: [undefined](../val/prim/undefined "mention"), [null](../val/prim/null "mention"), `Infinity`, `NaN`
* <mark style="color:yellow;">**natives**</mark>: `Date`, [object](../val/builtin/object "mention"), [str](../val/prim/str "mention") ...
* <mark style="color:yellow;">**global functions**</mark>: [eval](global/object/eval "mention"), `parseInt()`...
* <mark style="color:yellow;">**namespaces**</mark>: `Math`, `Atomics`, `JSON` ...
* <mark style="color:yellow;">**friends of JS**</mark>: `Intl`, `WebAssembly` ...

📗 [You Don't Know JS yet](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch4.md#why-global-scope)
{% endhint %}

{% hint style="info" %}
each [env](../concept/env "mention") puts some of its own <mark style="color:yellow;">**built-ins**</mark> into the <mark style="color:purple;">**global scope**</mark>：

* [browser](../../browser "mention")：
  * <mark style="color:blue;">**`console`**</mark>
  * [dom](../../browser/dom "mention")： [window](global/object/window "mention"), `document`,  ...&#x20;
  * <mark style="color:yellow;">**timers**</mark>：`setTimeout(..)`,  ...
  * <mark style="color:yellow;">**web APIs**</mark>：`navigator`, `history`, geolocation, WebRTC,  ...
* [worker](../../browser/api/worker "mention")：??? (anything else?)
* [node.js](../concept/env/node.js "mention")：???
{% endhint %}

{% 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" %}
Functions created with the [**Function**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function#difference_between_function_constructor_and_function_declaration) <mark style="color:yellow;">**constructor**</mark> <mark style="color:red;">**always**</mark> are created in the <mark style="color:purple;">**global scope**</mark>. :point\_right: [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function#difference_between_function_constructor_and_function_declaration)
{% endhint %}
{% endtab %}

{% tab title="🗺️ 圖表" %}
<div><figure><img src="https://ringojs.org/documentation/images/modulescope.png" alt=""><figcaption><p>✅ each module has its own scope </p></figcaption></figure> <figure><img src="https://ringojs.org/documentation/images/scriptscope.png" alt=""><figcaption><p>❌ global object shared by all scripts</p></figcaption></figure></div>
{% endtab %}

{% tab title="📗 參考" %}
* [x] ringojs ⟩ [Understanding module and global scope](https://ringojs.org/documentation/module_and_global_scope/) ⭐️
* [ ] [ydkjs-scope-and-closures-v.2](../../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩&#x20;
  * [x] Ch. 3: [The Scope Chain](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch3.md#chapter-3-the-scope-chain)
  * [ ] Ch. 4: [Around the Global Scope](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch4.md#chapter-4-around-the-global-scope)
{% endtab %}

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

{% tab title="🗣 討論" %}
* [What is the 'global' object in NodeJS](https://stackoverflow.com/a/52193294/5409815)
{% endtab %}
{% endtabs %}
