Modules

Modules give each file its own scope and make dependencies explicit. A good module exposes a small public surface and hides its implementation details.

Named exports

01export function percent(completed, total) {
02  return total > 0 ? Math.round((completed / total) * 100) : 0;
03}
04
05export const completeLabel = "Complete";

01import { percent, completeLabel } from "./progress.js";
02
03console.log(percent(6, 8), completeLabel);

In browsers, relative module paths include the file extension. Load the entry file with <script type="module">.

Default exports

01export default class CourseStore {
02  courses = [];
03}

Each module may have one default export. Named exports make refactoring and auto-imports more predictable, so they are a strong default for shared libraries.

Design module boundaries

Group code by capability rather than by vague type. A progress module can own calculation, serialization, and tests for progress instead of spreading those functions across generic utils files.

Keep this

Use modules by default, expose only what callers need, prefer cohesive boundaries, and keep dependency direction clear.