Implementation of Modules in JavaScript: ES6

3 min readApr 29, 2022

Today I was in the office, since I mostly work independently, and remote, I was in need of human connections, so office for the win ;)

Previously I talked about modules in Node runtime environment, today will learn about using ES6 import/export syntax in a browser’s runtime environment.

Implementing Modules in the Browser

Let’s have an example to see how modules are implemented in the browser. There are two web applications, using the same javascript code to show a component — text or an image.

Web App 01

Web App 02

The secret-message.js or secret-image.js is mostly the same code

Having two identical, but separate, copies of a function can lead to maintenance issues in the future. For example, any bugs that may exist within the function would need to be fixed in two places rather than one.

Instead, creating a single copy of toggleHiddenElement() within a module that exports it would allow these two websites to import and use the exact same function. With this approach, updates to the function only need to occur within the module that defines them, and all programs that import this function will receive the same update. Furthermore, additional functions could be exported by the module and used by both programs, further reducing repetition.

ES6 Named Export Syntax

A module should be entirely contained within a file. As the module will be used by two different applications, it should be kept in a mutually accessible location.

The file structure containing both projects and the new module could look like this:

secret-image/
|-- secret-image.html
|-- secret-image.js
secret-messages/
|-- secret-messages.html
|-- secret-messages.js
modules/
|-- dom-functions.js    <-- new module file

The functions can be exported in the dom-functions.js file like this:

export { resourceToExportA, resourceToExportB, ...}

dom-function.js

The function toggleHiddenElement() is declared. It accepts a domElement as an input and either shows or hides that element depending on its current display style value.
A new function changeToFunkyColor() is declared. It accepts a domElement as an input and then sets its background color to a random rgb() color value.
The two functions are exported using the ES6 export statement.

These exported functions are now available to be imported and used by other files!

If you want to try this out on your machine, you will need to spin up a local server or else you will run into CORS issues.

In addition to the syntax above, individual values may be exported as named exports by simply placing the export keyword in front of the variable’s declaration.

/* dom-functions.js */
export const toggleHiddenElement = (domElement) => {
  // logic ...
}
 
export const changeToFunkyColor = (domElement) => {
  // logic ...
}

ES6 Import Syntax

The ES6 syntax for importing named resources from modules is similar to the export syntax:

import { exportedResourceA, exportedResourceB } from '/path/to/module.js';

Now, will try to import functionality from dom-functions.js It requires updates in js and HTML file

In secret-messages.js, the functions toggleHiddenElement() and changeToFunkyColor() are imported from the module ../modules/dom-functions.js. The ../ indicates that the modules/ folder is in the same folder as the parent folder, secret-messages/.
When the button is clicked, the now imported toggleHiddenElement() function is called with pElement as an argument.
In addition, changeToFunkyColor() is called with buttonElement as an argument, changing its background color to a random one!

The update in the HTML file would look like this:

The change is subtle. In secret-messages.html, the only thing that changes is the addition of the attribute type='module' to the <script> element. Failure to do so can cause some browsers to throw an error. For example, in Chrome you might see this error: