# module pattern

[JS](..) ⟩ [module]() ⟩ module pattern

{% hint style="success" %}
<mark style="color:orange;">**was**</mark>**&#x20;**<mark style="color:yellow;">**used**</mark> as a module system before the introduction of [native JavaScript modules](es), implemented using [iife](../val/func/expr/iife "mention").
{% endhint %}

{% tabs %}
{% tab title="✨ 範例" %}
* [closure-as-object](../val/func/closure/examples/closure-as-object "mention")
{% endtab %}

{% tab title="💈範例" %}
* replit：[module pattern](https://replit.com/@pegasusroe/module-pattern#index.js)

```javascript
// ⭐️ object returned by IIFE
//     ⭡
//    ╭ ╮  ╭─────────── ⭐️ IIFE ────────────╮
const foo = (function() {
    
    // internal function
    function sayHi(name) {
        console.log(`Hey, my name is ${name}`);
    }
    
    // ⭐️ exposing the variables
    return { sayHi };
    
})();

// ⭐️ accessing exposed methods
foo.sayHi("Bar");
```
{% endtab %}

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

{% tab title="📗 參考" %}
* [ ] 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") > Ch. 8 > [Modules](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch8.md#modules-stateful-access-control)
{% endtab %}
{% endtabs %}
