JavaScript Modules (import/export)

As applications grow, keeping all code in a single file becomes unmanageable. ES Modules (introduced in ES2015 and now natively supported in browsers and Node.js) let you split code across files and explicitly declare what each file shares with others using export and what it needs from others using import.

Modules are automatically executed in strict mode, have their own top-level scope (variables don't leak into the global scope), and are only evaluated once no matter how many times they're imported.

Why it matters

Real applications are split across many files, and modules are how those files share code without polluting the global scope. Every React, Vue or Node.js project is built from import and export statements. Knowing named and default exports is necessary to read the first line of almost any modern source file.

Named Exports and Imports

A module can export multiple named values — functions, classes, constants — using export in front of a declaration, or a single export { a, b, c } statement. The importing file must use the exact same names (or rename them with as) inside curly braces: import { a, b } from './module.js'.

Default Exports

Each module may additionally have one export default, typically used for the "main" thing a file provides (a single class or component). Importing a default export doesn't use curly braces, and the local name can be anything you choose: import MyThing from './module.js'. A file can mix one default export with several named exports.

Practical Usage

In the browser, modules are loaded with <script type="module" src="main.js"></script>, which automatically defers execution and enforces CORS rules on cross-origin imports. In Node.js, modules are used either via .mjs files or by setting "type": "module" in package.json. Import paths for local files must be relative (starting with ./ or ../) and typically include the file extension.

Examples

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

// main.js
import multiply, { PI, add } from './math.js';

console.log(add(2, 3));
console.log(multiply(4, 5));
console.log(PI);

5
20
3.14159

// logger.js
export function log(message) {
  console.log('[APP]', message);
}

// main.js
import { log as appLog } from './logger.js';

appLog('Server started');

[APP] Server started

Exercise

In a project the module would be a separate file. Here its source is held in a string and loaded with a dynamic import() so that the exercise runs in one file. Add the export keywords so that PI and area are named exports and describe is the default export, then log each of them.

Expected output: 3.14, 12.56, circle tools (one per line)

// TODO: add "export" (and "export default") to the three declarations
const source =
  "const PI = 3.14;" +
  "function area(r) { return PI * r * r; }" +
  "function describe() { return 'circle tools'; }";

import("data:text/javascript," + encodeURIComponent(source)).then((module) => {
  // TODO: log the named export PI
  // TODO: log area(2)
  // TODO: log the result of calling the default export
});

const source =
  "export const PI = 3.14;" +
  "export function area(r) { return PI * r * r; }" +
  "export default function describe() { return 'circle tools'; }";

import("data:text/javascript," + encodeURIComponent(source)).then((module) => {
  console.log(module.PI);
  console.log(module.area(2));
  console.log(module.default());
});

Quick quiz

Interview questions