Structural & behavioral patterns

Patterns as small shapes

Design patterns are names for recurring shapes in code. They are not rules to force into every file. They help a team say, “this wrapper adds behavior,” “this adapter protects our app from an outside API,” or “this command can be undone.”

This lesson links to nearby architecture lessons instead of duplicating them. Factories and modules belong in creational patterns. Event emitters belong in observer & pub/sub. Reducers and stores come next in state management, and project structure belongs in app architecture.

A decorator adds behavior around an object or function without changing the original implementation. Function decorators are ordinary higher-order functions: withLogging(fn), withRetry(fn), and memoize(fn) all receive a function and return another function. The memoization lesson goes deeper on caching; the decorators lesson covers TC39 @decorator syntax. This section is about the pattern, not the syntax.

1function withLogging(fn) {2  return function logged(...args) {3    console.log("calling " + fn.name + "(" + args.join(", ") + ")");4    const result = fn(...args);5    console.log("returned " + result);6    return result;7  };8}9 10function withMemo(fn) {11  const cache = new Map();12  return function memoized(value) {13    if (cache.has(value)) return cache.get(value);14    const result = fn(value);15    cache.set(value, result);16    return result;17  };18}19 20function priceWithTax(price) {21  return Number((price * 1.1).toFixed(2));22}23 24const loggedPrice = withLogging(withMemo(priceWithTax));25console.log(loggedPrice(20));26console.log(loggedPrice(20));

Read it line by line. Line 1 creates a wrapper factory. Line 4 still calls the original function, so the business rule lives in one place. Line 10 creates a closure over a cache. Line 23 composes wrappers: logging sees the call, and memoization can reuse the previous result. Object decorators use the same idea with methods: return an object that forwards to the original object while adding timing, permissions, or tracing.

A proxy is different. It is a stand-in controlling access to a target. You can write a plain wrapper object, or use JavaScript’s built-in Proxy and Reflect APIs to intercept property reads and writes.

1const stock = { notebook: 3 };2 3const guardedStock = {4  get(name) {5    return name in stock ? stock[name] : 0;6  },7  set(name, value) {8    if (value < 0) throw new Error("Stock cannot be negative");9    stock[name] = value;10  },11};12 13guardedStock.set("pen", 2);14console.log(guardedStock.get("pen"));15console.log(guardedStock.get("missing"));16 17const settings = new Proxy({ theme: "dark" }, {18  get(target, key, receiver) {19    console.log("read " + String(key));20    return Reflect.get(target, key, receiver);21  },22  set(target, key, value, receiver) {23    if (key === "theme" && !["dark", "light"].includes(value)) {24      throw new Error("Unsupported theme");25    }26    return Reflect.set(target, key, value, receiver);27  },28});29 30console.log(settings.theme);31settings.theme = "light";32console.log(settings.theme);

The plain wrapper makes missing stock read as zero and blocks negative writes. The built-in proxy sees property access itself: get logs reads, set validates the theme, and Reflect.set performs the normal write after validation. Use this power for lazy loading, caching, validation, access control, or diagnostics; avoid it when a simple function call is easier to debug.

Adapter code lives at a boundary. It says, “the outside world speaks one shape; our app speaks another.” The goal is not cleverness. The goal is to prevent two weather APIs, payment APIs, SDKs, or legacy callbacks from leaking their details through the whole app.

1function fromWeatherApiA(response) {2  return { city: response.city, celsius: response.tempC };3}4 5function fromWeatherApiB(response) {6  return {7    city: response.location.name,8    celsius: Math.round((response.current.tempF - 32) * 5 / 9),9  };10}11 12function readLegacyProfile(id, callback) {13  callback(null, { id, name: "Ada" });14}15 16function profilePromise(id) {17  return new Promise((resolve, reject) => {18    readLegacyProfile(id, (error, profile) => {19      if (error) reject(error);20      else resolve(profile);21    });22  });23}24 25const reports = [26  fromWeatherApiA({ city: "Chennai", tempC: 31 }),27  fromWeatherApiB({ location: { name: "London" }, current: { tempF: 59 } }),28];29 30console.log(reports.map((report) => report.city + ":" + report.celsius).join(" | "));31profilePromise(7).then((profile) => console.log(profile.name));

Lines 1 and 5 return the same internal shape even though the outside responses disagree. Line 16 is an adapter too: it turns a callback API into a promise so callers can use promisification and async/await style code.

A facade hides orchestration. The subsystem may need several calls, but most of your app should not repeat those calls in the right order.

1function createMediaFacade(video, analytics) {2  return {3    play(title) {4      video.load(title);5      video.setVolume(0.7);6      analytics.track("play:" + title);7      return video.start();8    },9  };10}11 12const video = {13  load(title) { console.log("load " + title); },14  setVolume(level) { console.log("volume " + level); },15  start() { return "playing"; },16};17const analytics = { track(event) { console.log("track " + event); } };18 19const media = createMediaFacade(video, analytics);20console.log(media.play("intro"));

Line 16 is the public API the rest of the app uses. Inside the facade, loading, volume setup, analytics, and starting playback can change without every caller changing. Facades also work well for fetch helpers that combine JSON parsing, error messages, authentication headers, and retry policies behind one call.

Strategy turns a family of algorithms into interchangeable functions. Instead of growing a long switch statement or if/else chain, you store named functions in a map and select one at runtime. Shipping cost, discounts, sorting, formatting, and validation are common examples.

1const shippingStrategies = {2  standard(cart) {3    return cart.subtotal >= 75 ? 0 : 7;4  },5  express(cart) {6    return 12 + cart.items * 2;7  },8  pickup() {9    return 0;10  },11};12 13function quoteShipping(cart, strategyName) {14  return shippingStrategies[strategyName](cart);15}16 17const cart = { subtotal: 80, items: 2 };18console.log(quoteShipping(cart, "standard"));19console.log(quoteShipping(cart, "express"));20console.log(quoteShipping(cart, "pickup"));

Line 1 names the family. Line 13 chooses the current strategy. The caller only passes a cart and a strategy name, so adding overnight shipping means adding a function rather than editing a central conditional. Keep a small conditional when there are only two stable choices; strategy pays off when choices grow, move into configuration, or need separate tests.

A command is an action object. It knows how to execute() and how to undo(). A manager does not need to know the editor details; it only stores commands in undo and redo stacks. This shape powers text editors, drawing apps, queues, macro recording, optimistic UI, audit logs, and retryable work.

1function createEditor(initialText = "") {Run2  let text = initialText;3  return {4    getText: () => text,5    insert: (value) => { text += value; },6    removeEnd: (count) => { text = text.slice(0, -count); },7  };8}9 10function insertText(editor, value) {11  return {12    execute() { editor.insert(value); },13    undo() { editor.removeEnd(value.length); },14    label: "insert " + JSON.stringify(value),15  };16}17 18function createCommandManager() {19  const undoStack = [];20  const redoStack = [];21  return {22    run(command) {23      command.execute();24      undoStack.push(command);25      redoStack.length = 0;26    },27    undo() {28      const command = undoStack.pop();29      if (!command) return;30      command.undo();31      redoStack.push(command);32    },33    redo() {34      const command = redoStack.pop();35      if (!command) return;36      command.execute();37      undoStack.push(command);38    },39    counts: () => ({ undo: undoStack.length, redo: redoStack.length }),40  };41}42 43const editor = createEditor("Hi");44const history = createCommandManager();45history.run(insertText(editor, "!"));46console.log(editor.getText(), JSON.stringify(history.counts()));47history.undo();48console.log(editor.getText(), JSON.stringify(history.counts()));49history.redo();50console.log(editor.getText(), JSON.stringify(history.counts()));51history.undo();52history.run(insertText(editor, "?"));53console.log(editor.getText(), JSON.stringify(history.counts()));

Step through the whole flow. The manager runs an insert command, undoes it, redoes it, undoes again, then runs a different command. The important rule is on line 25: a brand-new command clears the redo stack because the old future is no longer the user’s future.

Middleware is a chain of functions. Each function receives a context object and a next() function. Code before next() runs on the way in; code after next() runs on the way out. Express-style request handlers, Koa’s async onion, and Redux middleware all use this mental model.

1function compose(middleware) {2  return (context) => {3    let index = -1;4    function dispatch(i) {5      if (i <= index) throw new Error("next() called twice");6      index = i;7      const fn = middleware[i];8      if (!fn) return;9      return fn(context, () => dispatch(i + 1));10    }11    dispatch(0);12    return context.log;13  };14}15 16const stack = [17  (ctx, next) => { ctx.log.push("auth before"); next(); ctx.log.push("auth after"); },18  (ctx, next) => { ctx.log.push("timing before"); next(); ctx.log.push("timing after"); },19  (ctx) => { ctx.log.push("handler"); },20];21 22const app = compose(stack);23console.log(app({ log: [] }).join(" -> "));

The synchronous runner is a real compose function: it keeps an index so a middleware cannot call next() twice, then dispatches the next function in the array. The async version changes one thing: next() returns a promise, and each wrapper awaits it.

1function composeAsync(middleware) {Run2  return async (context) => {3    let index = -1;4    async function dispatch(i) {5      if (i <= index) throw new Error("next() called twice");6      index = i;7      const fn = middleware[i];8      if (!fn) return;9      await fn(context, () => dispatch(i + 1));10    }11    await dispatch(0);12    return context.log;13  };14}15 16const stack = [17  async (ctx, next) => {18    ctx.log.push("auth before");19    await next();20    ctx.log.push("auth after");21  },22  async (ctx, next) => {23    ctx.log.push("timing before");24    await next();25    ctx.log.push("timing after");26  },27  async (ctx) => {28    ctx.log.push("handler");29  },30];31 32async function main() {33  const app = composeAsync(stack);34  const log = await app({ log: [] });35  console.log(log.join(" -> "));36}37main();

That await next() is why the order feels like an onion. Auth starts outside, timing starts inside it, the handler is the center, then timing and auth resume after the awaited inner work resolves.

Choosing a pattern without over-building

Patterns overlap because real code overlaps. A decorator may use closures. A proxy may cache. A facade may call adapters. That is normal. Choose the name that explains the seam you are designing.

1const examples = [2  "withRetry(fetchJson)",3  "new Proxy(settings, traps)",4  "fromWeatherApiB(response)",5  "shippingStrategies.express(cart)",6  "history.run(insertText(editor, '!'))",7  "await logger(ctx, next)",8];9 10console.log(examples.length);

Composite, iterator, and chain of responsibility are close relatives worth recognizing. Composite treats individual objects and groups uniformly. Iterator standardizes walking a collection. Chain of responsibility passes a request along handlers until one handles it; middleware is often a practical chain with a shared context and next().

Common misconceptions

• “Decorator means @decorator syntax.” The syntax is one language feature. The pattern is plain wrapping.
• “Proxy always means the built-in Proxy.” A plain stand-in object can be the proxy pattern when it controls access.
• “Adapter and facade are synonyms.” Adapter translates a shape; facade simplifies a subsystem.
• “Strategy is always better than switch.” A local switch can be clearer until algorithms grow or become runtime configuration.
• “Middleware is only for servers.” Redux-style state tools, client logging, feature flags, and analytics pipelines can use the same chain idea.

Practice exercises

function withLogging(fn) {
  return (...args) => {
    const result = fn(...args);
    console.log("result:" + result);
    return result;
  };
}
const shout = withLogging((word) => word.toUpperCase());
console.log(shout("pattern"));

function withLogging(fn) {
  return (...args) => {
    const result = fn(...args);
    console.log("result:" + result);
    return result;
  };
}
const shout = withLogging((word) => word.toUpperCase());
console.log(shout("pattern"));

function adaptPaymentA(response) {
  return { id: response.payment_id, cents: response.amount_cents, ok: response.status === "paid" };
}
const payment = adaptPaymentA({ payment_id: "p1", amount_cents: 1299, status: "paid" });
console.log(payment.id + ":" + payment.cents + ":" + payment.ok);

function adaptPaymentA(response) {
  return { id: response.payment_id, cents: response.amount_cents, ok: response.status === "paid" };
}
const payment = adaptPaymentA({ payment_id: "p1", amount_cents: 1299, status: "paid" });
console.log(payment.id + ":" + payment.cents + ":" + payment.ok);

const discounts = {
  student: (total) => total * 0.8,
  none: (total) => total,
};
console.log(discounts.student(50));

const discounts = {
  student: (total) => total * 0.8,
  none: (total) => total,
};
console.log(discounts.student(50));

function createEditor(text = "") {
  return {
    text,
    insert(value) { this.text += value; },
    removeEnd(count) { this.text = this.text.slice(0, -count); },
  };
}
function insertText(editor, value) {
  return {
    execute() { editor.insert(value); },
    undo() { editor.removeEnd(value.length); },
  };
}
const undo = [];
const redo = [];
const editor = createEditor("A");
const command = insertText(editor, "B");
command.execute();
undo.push(command);
undo.pop().undo();
redo.push(command);
insertText(editor, "?").execute();
redo.length = 0;
console.log(editor.text + " redo=" + redo.length);

function createEditor(text = "") {
  return {
    text,
    insert(value) { this.text += value; },
    removeEnd(count) { this.text = this.text.slice(0, -count); },
  };
}
function insertText(editor, value) {
  return {
    execute() { editor.insert(value); },
    undo() { editor.removeEnd(value.length); },
  };
}
const undo = [];
const redo = [];
const editor = createEditor("A");
const command = insertText(editor, "B");
command.execute();
undo.push(command);
undo.pop().undo();
redo.push(command);
insertText(editor, "?").execute();
redo.length = 0;
console.log(editor.text + " redo=" + redo.length);

const log = [];
const outer = (next) => { log.push("outer before"); next(); log.push("outer after"); };
const inner = (next) => { log.push("inner before"); next(); log.push("inner after"); };
outer(() => inner(() => log.push("handler")));
console.log(log.join(" > "));

const log = [];
const outer = (next) => { log.push("outer before"); next(); log.push("outer after"); };
const inner = (next) => { log.push("inner before"); next(); log.push("inner after"); };
outer(() => inner(() => log.push("handler")));
console.log(log.join(" > "));

Check your understanding

Key takeaways

• Decorator wraps behavior; proxy controls access to a target.
• Adapter translates an interface; facade simplifies a subsystem.
• Strategy chooses an algorithm at runtime without editing the caller.
• Command turns actions into objects so history can execute, undo, and redo them.
• Middleware chains functions through next(); async middleware uses await next() to create onion order.

Next, state management uses actions, reducers, and single-source-of-truth ideas to keep application state predictable as features grow.