JavaScript — Modules

Why split files?

One 3000-line app.js becomes unmaintainable. Modules let each file declare what it offers and needs:

src/
├── math.js       → exports add, PI
├── user.js       → exports default currentUser
└── app.js        → imports from both

Named exports — many per file

math.js

export const PI = 3.14159;

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

// or grouped at bottom:
function multiply(a, b) { return a * b; }
export { multiply };

app.js

import { add, multiply } from "./math.js";

add(2, 3);            // 5

Names must match exactly; import paths need ./ for local files.

Default export — one per file

// user.js
const currentUser = { name: "Ada", role: "admin" };
export default currentUser;

import user from "./user.js";    // any name you like
import whoever from "./user.js"; // same thing — defaults are name-free

	named	default
per file	unlimited	one
import syntax	{ exactName }	any identifier
use case	utilities, constants	the file's main thing (a component, a class)

Renaming & bulk imports

import { add as sum } from "./math.js";      // avoid collisions

import * as math from "./math.js";
math.add(1, 2);
math.PI;

Re-exports & barrel files

// index.js
export { add, multiply } from "./math.js";
export { default as currentUser } from "./user.js";

Consumers then import { add } from "./utils" once instead of tracking inner paths.

Running modules

Browsers:

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

type="module" unlocks import/export and enables strict mode + deferred execution free. Locally you must serve over HTTP (npx serve / VS Code Live Server) — file:// blocks module loading.

Node: .mjs extension or "type": "module" in package.json.

Static by design

Imports resolve at parse time (that's why they must sit at top level — no conditional imports). Dynamic needs get an escape hatch:

const chartLib = await import("./heavy-chart.js");   // lazy load on demand

Circular imports warning

If A imports B imports A, initialization order surprises await. Smell it, extract shared code into module C.

Mini Practice

1. Split calculator functions into calc.js; import three of them into app
2. Add a default export config object; import under two different names
3. Build a barrel index.js; refactor app to import from folder only
4. Prove strict mode is automatic inside a module (implicit global throws)
5. Lazy-load a module behind a button click with dynamic import

Next: classes →