Articles

Implementing Modules using ES6 Syntax

What are Modules?

Modules are reusable pieces of code in a file that can be exported and then imported for use in another file. A modular program is one whose components can be separated, used individually, and recombined to create a complex system.

Consider the following diagram of an imaginary program written in a file my_app.js:

diagram of a modular program. separate modules for mathematics, database logic, server logic, and date formatting are combined to create a complex program

Note: The words “module” and “file” are often used interchangeably

Instead of having the entire program written within my_app.js, its components are broken up into separate modules that each handle a particular task. For example, the database_logic.js module may contain code for storing and retrieving data from a database. Meanwhile, the date_formatting.js module may contain functions designed to easily convert date values from one format to another (a common headache among programmers!).

This modular strategy is sometimes called separation of concerns and is useful for several reasons. What do you think those reasons might be?

Think of a few ideas before expanding to reveal the reasons:

By isolating code into separate files, called modules, you can:

  • find, fix, and debug code more easily
  • reuse and recycle defined logic in different parts of your application
  • keep information private and protected from other modules
  • prevent pollution of the global namespace and potential naming collisions, by cautiously selecting variables and behavior we load into a program.


Implementing modules in your program requires a small bit of management. In the remainder of this article, we will be covering ES6 modules:

  • using the export statement to export code from a file, meaning its functions and/or data can be used by other files/modules
  • using the import statement to import functions and/or data from another module

Implementations of Modules in JavaScript: CommonJS vs ES6

Before we dive in, it should be noted that there are multiple ways of implementing modules depending on the runtime environment in which your code is executed. In JavaScript, there are two primary runtime environments, and each has a preferred module implementation:

  1. The Node runtime environment supports CommonJS modules by default, which use a different module.exports/require() syntax.
  2. The browser’s runtime environment uses ES6 modules.

For more information about runtime environments and CommonJS modules, you can read the following two articles:

ES6 modules may also be used within the Node runtime environment, but this requires a small amount of additional setup.

A Brief History of JavaScript Modules in the Browser

In the early days of web development, JavaScript usage was fairly minimal. A script here to add some interactivity to a page and a script there to automate away some simple task. Nowadays, however, JavaScript dominates the web and scripts have ballooned into large and cumbersome behemoths. According to some studies, the average size of a website, in terms of kilobytes of JavaScript data transferred, nearly doubled between 2015 and 2025!

These stats aren’t meant to paint a dreary future of web development. Web applications drive much of modern society and are now far more capable than could have ever been imagined when the World Wide Web was created in 1989. Instead, it is to make clear the need for modularity as the size and capabilities of these scripts grow.

Though libraries for implementing modules have existed for some time, syntax for natively implementing modules was only introduced in 2015 with the release of ECMAScript 6 (ES6). Since then, ES6 modules have been adopted by most modern browsers as the de facto approach for implementing modular applications in the browser.

Implementing ES6 Modules in the Browser

Let’s take a look at implementing modules in the browser through an example. Suppose you wanted to build a simple web application with some hidden text that is revealed when a button is pressed.

A demo of a simple website. There is a button that says "Press me... if you dare". Clicking on the button reveals a hidden message that says "Modules are fancy!"

To create this website, you could create two files, secret-messages.html and secret-messages.js, and store them together in a folder called secret-messages:

secret-messages/
|-- secret-messages.html
|-- secret-messages.js

Let’s take a look at the HTML file first:

<!-- secret-messages.html --> 
<html>
  <head>
    <title>Secret Messages</title>
  </head>
  <body>
    <button id="secret-button"> Press me... if you dare </button>
    <p id="secret-p" style="display: none"> Modules are fancy! </p>
    <script src="./secret-messages.js"> </script>
  </body>
</html>
  • secret-messages.html renders a <button> element and a hidden (from display: none) paragraph element.
  • It then loads the script secret-messages.js using the relative file path, "./secret-messages.js". The ./ before the file name is how you indicate that the file being referenced (secret-messages.js) is in the same folder as the file referencing it (secret-messages.html).

Speaking of which, let’s take a look at the JavaScript file:

/* secret-messages.js */
const buttonElement = document.getElementById('secret-button');
const pElement = document.getElementById('secret-p');


const toggleHiddenElement = (domElement) => {
    if (domElement.style.display === 'none') {
      domElement.style.display = 'block';
    } else {
      domElement.style.display = 'none';
    }
}


buttonElement.addEventListener('click', () => {
  toggleHiddenElement(pElement);
});
  • In secret-messages.js, DOM (Document Object Model) objects are created to reference the button and paragraph elements using the DOM API, via document. These objects are stored in buttonElement and pElement, respectively.
  • The function toggleHiddenElement is declared. It can accept a DOM element as an input called domElement and will either show or hide that element depending on its current style.display value.
  • An event listener is added to buttonElement to listen for 'click' events and respond by calling toggleHiddenElement() with pElement as the argument.

Now, suppose you wanted to create a second webpage with similar features. There is still a button, but this time, clicking it reveals an image. Using similar logic as the program above, this can be achieved with the following file structure:

secret-image/
|-- secret-image.html
|-- secret-image.js

The HTML might look like this:

<!-- secret-image.html --> 
<html>
  <head>
    <title>Secret Image</title>
  </head>
  <body>
    <button id="secret-button"> Want to see something cool? </button>
    <img id="secret-img" src="imageURL.jpg" style="display: none">
    <script src="./secret-image.js"> </script>
  </body>
</html>

… and the JavaScript might look like this:

/* secret-image.js */
const buttonElement = document.getElementById('secret-button');
const imgElement = document.getElementById('secret-img');


const toggleHiddenElement = (domElement) => {
    if (domElement.style.display === 'none') {
      domElement.style.display = 'block';
    } else {
      domElement.style.display = 'none';
    }
}


buttonElement.addEventListener('click', () => {
  toggleHiddenElement(imgElement);
});

Given that much of the code in these two programs is similar, creating this second website was fairly straightforward. In particular, notice that the toggleHiddenElement() function is copied line for line from secret-messages.js.

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 must be entirely contained within a file. So, let’s first consider where a new module may be placed within the file system. Since it needs to be used by both of these projects, you may want to put it in a mutually accessible location. The entire file structure containing both projects and this new module, let’s call it dom-functions.js, 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

Inside dom-functions.js, the functions you wish to reuse, such as toggleHiddenElement, can be exported using the named export syntax below:

export { resourceToExportA, resourceToExportB, ...}

Using this syntax, the name of each exported resource is listed between curly braces and separated by commas. The following example implements named exports in the new module, dom-functions.js:

/* dom-functions.js */
const toggleHiddenElement = (domElement) => {
  if (domElement.style.display === 'none') {
    domElement.style.display = 'block';
  } else {
    domElement.style.display = 'none';
  }
}


const changeToFunkyColor = (domElement) => {
  const r = Math.random() * 255;
  const g = Math.random() * 255;
  const b = Math.random() * 255;
        
  domElement.style.background = `rgb(${r}, ${g}, ${b})`;
}


export { toggleHiddenElement, changeToFunkyColor };

Let’s briefly break down how this module works:

  • The function toggleHiddenElement is declared, the same as before. 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 own computer, you will need to spin up a local server or else you will run into CORS issues. Check out our article on creating a local server with VSCode and the Live Server extension.

In addition to the syntax above, in which all named exports are listed together, individual values may be exported as named exports by simply placing the export keyword in front of the variable’s declaration. Here is the same example using this syntax:

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


export const changeToFunkyColor = (domElement) => {
  // logic omitted...
}

ES6 Named 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';

Let’s update the secret-messages program such that it now imports functionality from dom-functions.js. Doing so requires two important steps. First, update secret-messages.js:

/* secret-messages.js */
import { toggleHiddenElement, changeToFunkyColor } from '../modules/dom-functions.js';


const buttonElement = document.getElementById('secret-button');
const pElement = document.getElementById('secret-p');


buttonElement.addEventListener('click', () => {
  toggleHiddenElement(pElement);
  changeToFunkyColor(buttonElement);
});

Let’s break down these changes:

  • 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!

Now, you must also update secret-messages.html:

<!-- secret-messages.html --> 
<html>
  <head>
    <title>Secret Messages</title>
  </head>
  <body>
    <button id="secret-button"> Press me... if you dare </button>
    <p id="secret-p" style="display: none"> Modules are fancy! </p>
    <script type="module" src="./secret-messages.js"> </script>
  </body>
</html>

The change here is subtle — can you spot it? 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:

Uncaught SyntaxError: Cannot use import statement outside a module

And those are the basics of exporting and importing using ES6 export and import syntax! If you have been following along with these code examples, see if you can update the secret-image project to use the exported functions from the module dom-functions.js before continuing on to the challenges below.

ES6 Modules Challenge #1

ES6 Modules Challenge #2

ES6 Modules Challenge #3

Renaming Imports to Avoid Naming Collisions

Inevitably, you will run into a situation where the resources you wish to import share a name with some other value that already exists in your program (or from another imported module).

For example, suppose you had access to two modules, greeterEspanol.js and greeterFrancais.js. Each exports a function called greet():

/* inside greeterEspanol.js */
const greet = () => {
  console.log('hola');
}
export { greet };


/* inside greeterFrancais.js */
const greet = () => {
  console.log('bonjour');
}
export { greet };

Now, let’s say you wanted to use each of these functions in a program called main.js, which simulates a conversation between a Spanish speaker and a French speaker.

import { greet } from 'greeterEspanol.js';
import { greet } from 'greeterFrancais.js';

The code above will throw an error on line 2 due to the fact that the identifier greet has already been defined on line 1. Thankfully, ES6 includes syntax for renaming imported resources using the as keyword. Here’s an example:

import { exportedResource as newlyNamedResource } from '/path/to/module';

Let’s apply this syntax within main.js to avoid a naming collision:

/* main.js */
import { greet as greetEspanol } from 'greeterEspanol.js';
import { greet as greetFrancais } from 'greeterFrancais.js';


greetEspanol(); // Prints: hola
greetFrancais(); // Prints: bonjour

Now, both of the imported functions can be called within main.js using their new identifiers, greetEspanol and greetFrancais.

ES6 Modules Challenge #4

Default Exports and Imports

So far, the examples have used named export/import syntax, in which a module’s resources are exported individually by name. Every module also has the option to export a single value to represent the entire module, called the default export. Often, though not always, the default export value is an object containing the entire set of functions and/or data values of a module.

The syntax for exporting a default object looks like this: 

const resources = { 
  valueA, 
  valueB 
}
export { resources as default };

With this syntax, the object containing the module’s resources is first declared and then exported on the next line. At first glance, it looks like the resources object is being exported as a named export. However, the clause as default renames the exported object to default, a reserved identifier that can only be given to a single exported value.

You may also see this shorthand syntax, where the value following export default is the default value to be exported:

const resources = {
  valueA,
  valueB
}
export default resources;

Importing default values.

The syntax for importing default exports is written like this:

import importedResources from 'module.js';

Notice that the curly braces are gone from the import statement. This syntax is actually shorthand for import { default as importedResources } from 'module.js and the imported default value may be given any name the programmer chooses.

It should be noted that if the default export is an object, the values inside cannot be extracted until after the object is imported, like so:

// This will work...
import resources from 'module.js'
const { valueA, valueB } = resources;


// This will not work...
import { valueA, valueB } from 'module.js'

Let’s return to the prior example. The dom-functions.js module from before could be rewritten to use a default export like so:

/* dom-functions.js */
const toggleHiddenElement = (domElement) => {
    if (domElement.style.display === 'none') {
      domElement.style.display = 'block';
    } else {
      domElement.style.display = 'none';
    }
}


const changeToFunkyColor = (domElement) => {
  const r = Math.random() * 255;
  const g = Math.random() * 255;
  const b = Math.random() * 255;
        
  domElement.style.background = `rgb(${r}, ${g}, ${b})`;
}


const resources = { 
  toggleHiddenElement, 
  changeToFunkyColor
};
export default resources;

This default export object can now be used within secret-messages.js like so:

import domFunctions from '../modules/dom-functions.js';


const { toggleHiddenElement, changeToFunkyColor } = domFunctions;


const buttonElement = document.getElementById('secret-button');
const pElement = document.getElementById('secret-p');


buttonElement.addEventListener('click', () => {
  toggleHiddenElement(pElement);
  changeToFunkyColor(buttonElement);
});

Notice how toggleHiddenElement and changeToFunkyColor are now methods of the imported object called domFunctions and are extracted using ES6 destructuring syntax! It should be noted that the identifier domFunctions can be chosen as the programmer sees fit. If you recall, the syntax used in the snippet above is shorthand for:

import { default as domFunctions } from '../modules/dom-functions.js';

Continue on to the challenges below before the final review at the end of the article.

ES6 Modules Challenge #5

ES6 Modules Challenge #6

Review

In this article, you have learned the following:

  • the benefits of implementing modular programs
  • how to use the ES6 export statement to export code from a file - meaning its functions and/or data can be used by other files/modules
  • how to use the ES6 import statement to import functions and/or data from another module
  • how to rename imported resources using the as keyword
  • how to export and import a default value

Though this article covers the basics of using ES6 syntax to import and export modules, MDN has an excellent article that provides an in-depth look at some additional features that ES6 has to offer.

Codecademy Team

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'

Meet the full team

Related articles

Learn more on Codecademy

  • Free course

    Learn JavaScript: Classes and Modules

    Easily produce multiple objects with the same property using classes and export and import modules.
    • Beginner Friendly.
      4 hours
  • Free course

    Learn Intermediate JavaScript

    Take your JavaScript knowledge to the next level by learning how to use advanced functions to create more efficient programs.
    • Intermediate.
      11 hours
  • Skill path

    Create a Front-End App with React

    Learn to build front-end web apps with JavaScript and React.
    • Includes 9 Courses
    • With Certificate
    • Intermediate.
      37 hours
Contents