❯ Modules, Iteration & Generators

Roughly 13% of a typical loop — and 13% of the mock exam here.

ESM versus CommonJS

A static import is resolved and hoisted before any code runs, and may only appear at the top level of a module. That constraint is what lets bundlers build the dependency graph without executing anything — the precondition for tree shaking. require is the opposite: synchronous, evaluated at call time, and legal anywhere.

The subtler difference is live bindings. An ESM import tracks the exporter, so a let count that the exporting module increments is visible as the new value to everyone who imported it (read-only from their side). CommonJS copies the value at assignment time, which is why re-exported CJS values go stale.

Modules also change the ambient rules: strict mode always, a private top-level scope, this is undefined rather than globalThis, and __dirname and require do not exist — import.meta.url replaces them, usually as new URL('./data.json', import.meta.url), a form bundlers statically detect and rewrite.

A module is evaluated once per resolved specifier and cached. Import it from three files and its top-level code runs once, so module-level state is a de facto singleton — convenient for a cache, and a common source of state leaking between tests.

Dynamic import and code splitting

import() returns a promise for the namespace object and is the one form allowed inside a function or condition. Bundlers cut a chunk at each dynamic import, which makes it the standard lazy-loading primitive.

Top-level await is allowed in modules, and it defers not just that module but every importer of it. Cheap for config; expensive on a critical path.

Tree shaking needs static ESM and the absence of side effects the bundler must preserve. A top-level call with observable effects pins the whole module; the sideEffects field in package.json is how a library promises there are none.

Circular imports

In ESM, the second-evaluated module sees bindings that exist but may be uninitialized. Hoisted function declarations survive the cycle; a const or class read too early throws from the temporal dead zone. CommonJS instead hands back a partially filled exports object, so you get undefined rather than an error — quieter and often worse. Either way the real fix is to break the cycle by extracting the shared piece into a third module.

The iterator protocol

An iterable exposes [Symbol.iterator](), returning an object whose next() reports { value, done }. That single protocol powers for...of, spread, destructuring, Array.from, Promise.all and the Map/Set constructors. Spreading a plain object into an array throws “is not iterable” — object spread in { ...obj } is a different feature.

for...of iterates values of an iterable; for...in enumerates enumerable string keys including inherited ones, and over an array it yields index strings. Map and Set guarantee insertion order, unlike plain objects, whose integer-like keys are enumerated first in ascending order.

Breaking out of a for...of loop early calls the iterator’s return() if it has one, so a generator’s finally block still runs — which is what makes generator cleanup reliable.

The easiest way to implement the protocol is a generator method:

class Bag {
  #items = [];
  *[Symbol.iterator]() { yield* this.#items; }
}

Generators

Calling a generator function runs nothing: it returns a generator object, and the body advances only on next(). That laziness is the point — infinite sequences, pausable state machines, and streaming without materializing arrays.

Communication runs both ways. The argument to gen.next(v) becomes the result of the yield the generator is paused on; gen.throw(err) raises the error at that point, where a try/catch in the body can handle it and resume; gen.return(v) acts like a return there, still running finally. yield* delegates to another iterable and forwards all three.

Async generators combine both worlds: await inside the body, yield per item, and for await...of at the call site — the natural shape for paginated APIs and streams. ES2025 iterator helpers (.map, .filter, .take, .toArray) keep the laziness while reading like array methods, so an infinite source stays usable.