Loading...
See how JavaScript ES modules work with an interactive visualization. Watch the module graph build, import bindings resolve, live references update, and circular dependencies get handled step by step.
Loading visualization...
ES modules provide static import/export syntax that the engine analyzes at parse time. Imports are live, read-only bindings to the exporter's variables. Modules evaluate once, are cached, and handle circular dependencies through partially-initialized module records.
ES modules use import and export statements that the engine resolves statically before any code runs. Unlike CommonJS require(), which is a runtime function that copies values, ES imports create live bindings that reference the exporter's actual variable slot.
The module loading process has distinct phases: parsing (build the module graph), linking (connect import bindings to export slots), and evaluation (run the module code top-to-bottom). Each module evaluates exactly once and is cached. Subsequent imports of the same module return the cached instance.
Live bindings mean the import always reads the current value of the export. If the source module mutates an exported let variable, all importers see the change immediately. However, imports are read-only from the importer's perspective. Attempting to reassign an import throws a TypeError.
Interview framing: define Modules & Imports in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
In CommonJS, require() returns a snapshot of the exports object at the time of the call. In ES modules, imports are live references. Changes in the exporter propagate to all importers.
Fix: Understand that ES imports share memory with the exporter. If you need a snapshot, explicitly copy the value (e.g., const snapshot = importedValue).
When two modules import each other, one will evaluate first and see uninitialized values from the other. Top-level reads of circular imports can produce undefined.
Fix: Move circular reads inside functions that execute after both modules have finished evaluating. Alternatively, restructure the dependency graph to break the cycle.
A module can have many named exports but only one default export. Importing a named export requires curly braces; importing the default does not. Mixing them up causes binding errors.
Fix: Use named exports for most cases (they enable tree shaking and autocomplete). Reserve default exports for the primary value of a module. Always check what a module exports before importing.
Common interview prompts with concise model answers.
Named exports are imported by their exact name using curly braces: import { PI } from './math'. Default exports are imported without braces and can be given any local name: import mySquare from './math'. A module can have multiple named exports but only one default.
ES imports are live because both the importer and exporter reference the same memory slot. This is established during the linking phase before code runs. Live bindings ensure consistency: if the source module updates a value, all consumers see the change. This is fundamental to how circular dependencies work without deadlocking.
The engine creates module records for all modules in the graph before evaluating any of them. When a circular import is encountered, the engine uses the already-created (but not yet evaluated) module record. Bindings exist but may be uninitialized if the exporting module has not yet run the assignment. This is why circular reads at the top level can see undefined.
// a.js
import { b } from "./b.js";
export const a = "A";
console.log(b); // "B" (b.js evaluated first)
// b.js
import { a } from "./a.js";
export const b = "B";
console.log(a); // undefined (a.js not evaluated yet)Continue with these concepts to strengthen your mental model.
// ── math.js ──export const PI = 3.14;export function double(x) { return x * 2;}export default function square(x) { return x * x;} // ── app.js ──import square, { PI, double } from "./math.js";console.log(PI);console.log(double(5));console.log(square(3));no modules
no bindings yet
No output yet.