ZetCode

JavaScript module

last modified June 21, 2022

In this tutorial, we show how to create and use modules in JavaScript.

A module is a container for JavaScript code. A module is defined in a separate file. The purpose of a module is to organize and isolate code.

JavaScript did not have a module system for many years. As a result, several third-party solutions were created. The most popular was CommonJS. In 2015 a standard JS module system was released. In 2019, the new module system was ported to Node.js.

Important attributes of modules:

<script type="module" src="main.js"></script>

We enable modules in the browser with the type attribute.

{
  ...
  "main": "main.js",
  "type": "module",
  ...
}

In Node.js, the ES module system is enabled with the type option.

There is a convention to use the .mjs suffix for the modules.

Export/import keywords

The export keyword marks variables and functions to be accessible from the module. The import keyword imports variables and functions from modules.

export const name = 'John Doe';    ->    import { name } from 'mymod.mjs';

This is the basic name export.

export default name = 'John Doe';    ->    import name from 'mymod.mjs';

This is the syntax for the default export.

export { name as username };    ->    import { username } from 'mymod.mjs';

A rename export syntax.

export {                                 import {
    fname,                                   fname,
    lname as last_name;        ->            last_name
};                                       } from 'mymod.mjs';

This is the syntax for list export.

JS module example in browser

In the following example, we create a simple module.

index.html
<!DOCTYPE html>
<html>
<head>
<title>Drawing</title>
<script type="module" src="main.mjs"></script>
<style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>

<body>
    <canvas id="board" width="550" height="550">
    </canvas>
</body>
</html> 

We will draw on a canvas. The drawing code is located in the

main.mjs
import { drawLine, drawCircle } from './modules/draw.mjs';

let canvas = document.getElementById('board');
let ctx = canvas.getContext('2d');

drawLine(ctx);
drawCircle(ctx);

In the main.mjs module, we import drawLine and drawCircle functions fro the draw.mjs module. We get the canvas object and create a drawing context. Finally, we call the imported functions.

modules/draw.mjs
export function drawLine(ctx) {
   
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(250, 250);
    ctx.lineWidth = 3;
    ctx.stroke();
}

export function drawCircle(ctx) {

    ctx.beginPath();
    ctx.arc(250, 90, 80, 0, 2*Math.PI);
    ctx.fill(); 
}

We have the definitions of the two functions. They are prefixed with the export keywords, which enabes them to be imported inside another module.

JS module example in Node.js

In the next example, we set up a module in Node.js.

{
  ...
  "main": "main.js",
  "type": "module",
  ...
  "license": "ISC"
}

In the package.json file, we set the module type using the type option.

modules/core.mjs
const fname = 'John';
const lname = 'Doe';
const occupation = 'gardener';

function say_message() {

    console.log(`${fname} ${lname} is a ${occupation}`);
}

export {
    fname as first_name,
    lname as last_name,
    say_message
}

In the core.mjs module, we define two constants and a function. We export two constants and a function using the export list syntax. We rename the two constants.

main.js
import { first_name, last_name, say_message } from "./modules/core.mjs";

console.log(first_name);
console.log(last_name);

say_message();

Inside the main.js program, we import the exported values and use them in code.

$ node main.js 
John
Doe
John Doe is a gardener

In this article, we have worked with modules in JavaScript.

List all JavaScript tutorials.