06 / DESIGN PATTERNS

Design Patterns

All twenty-three Gang of Four patterns as runnable JavaScript reference cards. Each card states the intent, the problem it solves, the sentence to say, where you have already used it in Node or React, and the pattern it is confused with. Every file ends with an ok: line so you know the examples really run.

Start here 23 pages · 3 groups

Creational

5 pages

How objects get made: factories, builders, prototypes and the one-instance rule.

Creational — how objects get made — intent and sightings

Pattern	Intent	Real-world JS sighting	File
Abstract Factory	One factory object yields a whole family of compatible products	Knex dialect clients; `providers[name]` kit (charge + refund + verify)	creational/abstract-factory.js
Builder	Assemble a complex object step by step, then `build()`	Knex/Kysely query builders; Zod schemas; superagent chains	creational/builder.js
Factory Method	Defer the `new` to a hook so a subclass/key picks the class	`document.createElement`, `http.createServer`, `React.createElement`	creational/factory-method.js
Prototype	Create new objects by cloning a configured instance	`Object.create`, `structuredClone`, spread copies in reducers	creational/prototype.js
Singleton	Exactly one instance, globally reachable	Node module cache (`module.exports = new Logger()`), Redux store, `process`	creational/singleton.js

Abstract Factory2 sections
Builder2 sections
Factory Method2 sections
Prototype2 sections
Singleton2 sections

Structural

7 pages

How objects are composed: wrappers, bridges, trees, proxies and shared state.

Structural — how objects are composed — intent and sightings

Pattern	Intent	Real-world JS sighting	File
Adapter	Convert an interface into the one clients already expect	`util.promisify`, axios adapters, `Readable.toWeb`, SDK wrappers	structural/adapter.js
Bridge	Split abstraction from implementation so both vary independently	Winston logger × transports; react-reconciler × react-dom/native	structural/bridge.js
Composite	Tree of parts and wholes, all answering the same calls	DOM, React element trees, ASTs, Express `Router` mounting	structural/composite.js
Decorator	Wrap an object to add behavior; interface unchanged; stackable	`memoize`/`withRetry` HOFs, React HOCs & `React.memo`, `util.deprecate`	structural/decorator.js
Facade	One simple entry point in front of a messy subsystem	`fs.readFile`, `fetch`/axios, `express()`, service-layer `placeOrder()`	structural/facade.js
Flyweight	Share immutable intrinsic state across huge numbers of objects	`Symbol.for`, cached `Intl.*Format`, string interning	structural/flyweight.js
Proxy	Stand-in that controls access: lazy, guard, cache, remote	ES `Proxy` (Vue 3, MobX, Immer), ORM lazy relations, `Promise`	structural/proxy.js

Adapter2 sections
Bridge2 sections
Composite2 sections
Decorator2 sections
Facade2 sections
Flyweight2 sections
Proxy2 sections

Behavioral

11 pages

How objects talk and divide responsibility: observers, strategies, commands, iterators and state machines.

Behavioral — how objects talk and divide responsibility — intent and sightings

Pattern	Intent	Real-world JS sighting	File
Chain of Responsibility	Pass a request along a chain until one link handles it	Express/Koa middleware `next()`, axios interceptors, Redux middleware	behavioral/chain-of-responsibility.js
Command	Turn a request into an object: queue, log, undo, replay	Redux actions, BullMQ jobs, editor undo stacks, migrations `up/down`	behavioral/command.js
Interpreter	Grammar as node classes; evaluate sentences by walking the tree	`RegExp`, Mongo/Prisma `where` objects, JSON Logic, template engines	behavioral/interpreter.js
Iterator	Walk a collection sequentially without exposing its representation	`Symbol.iterator`, generators, `for await` over streams, DB cursors	behavioral/iterator.js
Mediator	Peers talk through one coordinator instead of to each other	React lifted state, Flux dispatcher, Socket.io rooms, form controllers	behavioral/mediator.js
Memento	Snapshot state opaquely; restore it later	Redux DevTools time travel, `history.state`, DB savepoints, `git stash`	behavioral/memento.js
Observer	Subject pushes changes to subscribed listeners	`EventEmitter`, `addEventListener`, RxJS, `store.subscribe`	behavioral/observer.js
State	Behavior changes with internal state; states drive transitions	XState, `Promise` states, `readyState`, order/upload status machines	behavioral/state.js
Strategy	Interchangeable algorithms behind one interface, picked at runtime	`sort(comparator)`, Passport strategies, payment/auth provider maps	behavioral/strategy.js
Template Method	Fixed algorithm skeleton; subclasses/options fill in the steps	Node stream `_transform`, React lifecycle, `toJSON()`, Jest hooks	behavioral/template-method.js
Visitor	Add operations over a node tree without touching node classes	Babel/ESLint `traverse`, GraphQL `visit`, PostCSS walkers, JSON reviver	behavioral/visitor.js

Chain of Responsibility2 sections
Command2 sections
Interpreter3 sections
Iterator2 sections
Mediator2 sections
Memento2 sections
Observer2 sections
State2 sections
Strategy2 sections
Template Method2 sections
Visitor3 sections

Confusables#

Strategy vs State — identical shape (context delegates to a swappable object). Strategy: the client picks the algorithm; strategies don't know each other. State: the state object decides the next state; behavior changes over time as transitions fire.
Decorator vs Proxy vs Adapter — Decorator: same interface, adds behavior, stacks freely. Proxy: same interface, controls access (lazy, guard, cache, remote), usually owns the subject's lifecycle. Adapter: changes the interface so an incompatible thing fits what you already have.
Factory Method vs Abstract Factory vs Builder — Factory Method: one product, one overridable creation hook. Abstract Factory: a family of related products from one factory object (so you can't mix Stripe charge with PayPal refund). Builder: one complex product assembled over many steps, then build().
Observer vs Mediator vs Pub/Sub — Observer: the subject holds its listener list and notifies them directly. Mediator: colleagues never reference each other; a hub holds the coordination logic and talks back to them. Pub/Sub: a broker/channel sits between publisher and subscribers so neither knows the other (often async, cross-process).
Composite vs Decorator — both are recursive wrappers with the component's interface. Composite has many children and aggregates (size of a folder). Decorator has exactly one wrappee and adds behavior.
Facade vs Adapter — Facade invents a new, simpler API over several objects (one-way; subsystems unaware). Adapter makes one object fit an existing API you don't want to change.
Command vs Strategy — Command is what to do: a request with its arguments, storable, queueable, undoable. Strategy is how to compute something: an interchangeable algorithm with no history.
Template Method vs Strategy — Template Method keeps the skeleton and varies steps via inheritance (or an options object of callbacks). Strategy varies the whole algorithm via composition — you pass a different object.

How to answer "what design patterns have you used?"#

Lead with the ones you actually ship, name them, and point at the code they live in:

"Most Node services I build are a Chain of Responsibility at the edge — Express/Koa middleware with next() for auth, rate limiting, validation — and the app itself is wired as Observers on EventEmitters and streams."
"Shared clients (Prisma, Redis, loggers) are module-scope Singletons; I keep them behind a factory so tests can inject a fake instead of fighting global state."
"Payment and auth providers are Strategy objects — a plain map of { charge } / { verify } functions keyed by provider — and when a provider needs a full kit (charge + refund + webhook verify) that's an Abstract Factory."
"Query and config objects use a Builder (Knex/Kysely style fluent chain ending in build()); third-party SDKs sit behind an Adapter so swapping Stripe for Braintree touches one file."
"Cross-cutting behavior — retry, caching, logging — is Decorator via higher-order functions (withRetry(withCache(fn))), the same idea as React HOCs."
"Anything paginated or streamed is an Iterator: Symbol.iterator and async generators so callers just for await."
"Order and UI status flows are explicit State machines (transition tables / XState) so illegal transitions are impossible rather than untested; undo/redo is Command objects with execute/undo."
Close with the trade-off: "I reach for the pattern when the duplication or the bug class is real, not up front — a switch with two cases doesn't need a Strategy yet."