Join the Nature Wishlist Discord to get help, share your projects, and discuss JavaScript.
🧩 ⏐ Design Patterns
2. Module Pattern

Module Pattern

Split up your code into smaller, reusable pieces


Overview

ES2015 introduced built-in JavaScript modules. A module is a file containing JavaScript code and makes it easy to expose and hide certain values.

The module pattern is a great way to split a larger file into multiple smaller, reusable pieces. It also promotes code encapsulation, since the values within modules are kept private inside the module by default, and cannot be modified. Only the values that are explicitly exported with the export keyword are accessible to other files.

The module pattern provides a way to have both public and private pieces with the export keyword. This protects values from leaking into the global scope or ending up in a naming collision.

In the above example, the secret variable is accessible within the module, but not outside of it. Other modules cannot import this value, as it hasn't been exported.


Without modules, we can access properties defined in scripts that are loaded prior to the currently running script.

With modules however, we can only use the values that have been exported.


Implementation

There are a few ways we can use modules.

HTML tag

When adding JavaScript to HTML files directly, you can use modules by adding the type="module" attribute to the script tags.

Node

In Node, you can use ES2015 modules either by:

  • Using the .mjs extension
  • Adding "type": "module" to your package.json

Tradeoffs

Encapsulation: The values within a module are scoped to that specific module. Values that aren't explicitly exported are not available outside of the module.

Reusability: We can reuse modules throughout our application


Exercise

Challenge

  1. Split the code below up into two pieces, math.js that includes the add, subtract, divide and multiply methods. The index.js file contains the remaining functionality.
  2. Use ES2015 modules to export the add, subtract, divide and multiply methods from the math.js file, and import them in index.js

Solution