Modules: import/export

Syntax

export const value = ...;
import { value } from "./file.js";

Examples

// math.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

// main.js
import { PI, add, subtract } from "./math.js";
console.log(add(2, 3)); // 5

// user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

// main.js
import User from "./user.js"; // any name works for a default import
const alice = new User("Alice");

// utils.js
export default function formatDate(date) { /* ... */ }
export function formatCurrency(amount) { /* ... */ }

// main.js
import formatDate, { formatCurrency as money } from "./utils.js";

// Importing everything as a namespace object
import * as Utils from "./utils.js";
Utils.formatCurrency(100);

Best practices

• Use named exports for utility modules with several related exports, and default exports for a file with one clear primary export (like a single class or component)
• Keep import paths relative and explicit (./file.js) for clarity, following your build tool's conventions
• Avoid circular imports (module A imports B, which imports A back) - they can cause subtle bugs and are usually a sign the code needs restructuring
• Use named imports (import { specific } from) rather than namespace imports (import * as) when you only need a few things, for clearer dependencies and better tree-shaking

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation