Skip to content

Chapter 15 of 33

JavaScript Modules

Design import/export boundaries, live bindings, dynamic loading, and dependency graphs.

38 minutes 10 quick checksBy Subha Prasad
Lesson 15 of 33Course navigation

Lesson content

Read, practise, then check your understanding

ES modules provide file scope and explicit dependency graphs. Named exports support several bindings; a module has at most one default export.

Boundaries

// math.js
export const square = value => value * value;

// app.js
import { square } from "./math.js";
console.log(square(6));

const charts = await import("./charts.js");

Imports are live read-only views of exported bindings. Static imports enable analysis, ordering, and tree-shaking; dynamic import returns a Promise and supports code splitting. Browser modules need correct URLs/MIME/CORS; Node resolution follows package rules. Avoid circular dependencies and expose stable domain APIs rather than internal file structure.

Knowledge check

Answer every question correctly to complete this chapter.

Which statement best describes named export?
Which JavaScript term matches this description: An exported binding imported by its exported name.
Which statement best describes default export?
Which JavaScript term matches this description: A module's single default-export slot imported under a local name.
Which statement best describes static import?
Which JavaScript term matches this description: A top-level dependency analyzable before module execution.
Which statement best describes dynamic import?
Which JavaScript term matches this description: An asynchronous import() expression returning a Promise.
Which statement best describes live binding?
Which JavaScript term matches this description: An imported view that reflects updates to the exported binding.

0 of 10 checks passed

Your progress is saved on this device.

JavaScript Modules | JavaScript Lesson | Subha Prasad