# module

[JS]() ⟩ module&#x20;

{% hint style="success" %}
<mark style="color:purple;">**Modules**</mark> provide structure to bigger programs by separating the code into pieces with clear <mark style="color:yellow;">**interfaces**</mark> and <mark style="color:yellow;">**dependencies**</mark>.&#x20;

* <mark style="color:yellow;">**interface**</mark>： the part that’s visible from other modules.
* <mark style="color:yellow;">**dependencies**</mark>： other modules that it makes use of.
{% endhint %}

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

{% hint style="warning" %}
in a [module](module "mention") there's <mark style="color:red;">**no**</mark> "[module](scope/module "mention") <mark style="color:yellow;">**object**</mark>" for these <mark style="color:yellow;">**top-level**</mark> [declare](grammar/declare "mention")s to be added to as [prop](val/obj/prop "mention").

( 👉 compare： [is-global-obj-prop](variable/declare/var/is-global-obj-prop "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>](scope/global)).&#x20;
{% endhint %}

{% hint style="info" %}
The relations between modules are called _<mark style="color:yellow;">**dependencies**</mark>_. When a module needs a piece from another module, it is said to depend on that module.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**main features of modules**</mark>
  * [import](module/es/import "mention") <mark style="color:yellow;">**/**</mark> [export](module/es/export "mention")
* <mark style="color:yellow;">**other features of modules**</mark>
  * [import.meta](module/import.meta "mention")
  * [browser](module/browser "mention")
  * [module](scope/module "mention")
* <mark style="color:yellow;">**types of modules**</mark>
  * [es](module/es "mention") <mark style="color:yellow;">**/**</mark> [commonjs](module/commonjs "mention")
* <mark style="color:yellow;">**other related topics**</mark>
  * [package](module/package "mention")
  * [module-pattern](module/module-pattern "mention") - used before introduction of native [es](module/es "mention").
  * [replit](../appendix/res/editor/replit "mention") ⟩ [import-.js-file](../appendix/res/editor/replit/import-.js-file "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JS.info ⟩ [Modules](https://javascript.info/modules-intro)
* [ ] Eloquent JS ⟩ [Module](https://eloquentjavascript.net/10_modules.html)
  * [ ] [Circular Dependencies](https://eloquentjavascript.net/10_modules.html#i_E/zWqBFdy8)
* [ ] DEV ⟩ [Getting Started with JavaScript Modules](https://dev.to/thecoollearner/getting-started-with-javascript-modules-2mkg)
* [ ] MakeUseOf ⟩ [An Introduction to Module Systems in JavaScript](https://www.makeuseof.com/javascript-module-systems/)
* [ ] [ydkjs-scope-and-closures-v.2](../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") > Chapter 8: [The Module Pattern](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch8.md#chapter-8-the-module-pattern)
{% endtab %}

{% tab title="👥 相關" %}
* [module](scope/module "mention")
{% endtab %}

{% tab title="🐞 除錯" %}
* [vscode](../appendix/res/editor/vscode "mention") ⟩&#x20;
  * [can not use import statement outside a module](https://youtu.be/y1DGRiUhAyQ) (YouTube)\
    rename file extension to <mark style="color:yellow;">**`.mjs`**</mark>
  *   [Unexpected token on "export default const"](https://stackoverflow.com/a/40313059/5409815)

      ```javascript
      // ⛔ SyntaxError: 
      export default const a = { ... }
      //             ^^^^^  <---- Unexpected token 'const'

      // ✅ syntax is OK now!
      const a = { ... };
      export default a;
      ```
{% endtab %}
{% endtabs %}
