Skip to content
Hou - Engineer & Tech Educator
LinkedInGithubTwitter

Learn Modern JavaScript - Modules

— JavaScript, beginner, tutorial, learn-modern-javascript — 1 min read

Introduction

By the end of this tutorial, you will be able to:

  • apply ES6 modules to modularize your scripts

Modules

NOTE: This tutorial uses CommonJS modules throughout.

Modules allow developers to organize their codebase within separate files or components for better reusability, flexibility, shareability, and overall maintenance. Multiple modules can be composed together to create an application.

ECMAScript Modules, which are a newer feature in JavaScript, are defined with the use of the import and export keywords.

A detailed look at the differences between the two module systems is outside the scope of this course, but here's an excellent article about it.

Although ECMAScript modules are the official standard format to package JavaScript code, they are still considered an experimental Node.js feature as of July 2020, since the Node.js team is still working on ensuring backward compatibility and support for both module systems.

CommonJS, which is the legacy system, uses the module.exports syntax for exports and the require() function for imports:

file1.js
1const sayHi = (name) => {
2  console.log(`Hello, ${name}!`);
3};
4

5module.exports = {
6  sayHi,
7};
file2.js
1const { sayHi } = require("./file1.js");
2console.log(sayHi("Hou"));

ES6 Modules: named Exports & Importing Modules

There are two different types of export, namely named and default. Each module can have multiple named exports but only one default export.

Suppose you need to export several values from the file. Named exports will be helpful here. The file below exports the sayHi() function, person object, and greetingInMandarin string:

file1.js
1export function sayHi (greeting, name) {
2  console.log(`Hello, ${name}!`);
3};
4

5export const person = {
6  firstName: "Hou",
7  lastName: "Chia",
8};
9

10export let greetingInMandarin = "Ni hao";

If multiple values need to be exported from a module, it's typical to create an export list at the bottom of the module, so that you don't have to repeatedly use the export keyword. This has the advantage of making it clear which values are being exported from the module.

Refactoring file1.js:

file1.js
1function sayHi (greeting, name) => {
2  console.log(`Hello, ${name}!`);
3};
4

5const person = {
6  firstName: "Hou",
7  lastName: "Chia",
8};
9

10let greetingInMandarin = "Ni hao";
11

12// can export function, const, let
13export { sayHi, person, greetingInMandarin  };

sayHi(), person, and greetingInMandarin can now be imported in other files, using the import keyword. For example:

file2.js
1import { sayHi, person, greetingInMandarin } from "./file1.js";
2console.log(sayHi("Hou"));

Note that during the import, you must use the same names as they were defined in the original module, or else the import won't work properly.

ES6 Modules: default exports

If you want to export a single value or to have a fallback value for your module, you could use a default export.

ToDoList.js
1export default function ToDoList () {
2  return <h1>My ToDo List</h1>;
3}

Then, in another script, you can import the default export:

App.js
1import ToDoList from "./ToDoList";
2import MyToDoList from "./ToDoList"; // this import is also valid, as you can reference the imported value using a different variable name

ES6 Modules: Using a Module Loader or Module Bundler

Read

Want more content like this? Subscribe to get the latest updates in your inbox

Share your Feedback

What did you like or didn't like about this post? Let me know what worked well and what can be improved. Your feedback is much appreciated!