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

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

Related JavaScript documentation

Specifications & further reading

• ECMAScript specification