Design Patterns

Reusable solutions to common problems — the essential JavaScript patterns: module, singleton, observer, factory, strategy, and more.

What it is, in plain English: A design pattern is a reusable solution to a commonly occurring problem in software design. JavaScript patterns range from the Module pattern (private state with closures) to the Observer pattern (the foundation of every event system and reactive framework) to the Factory pattern (creating objects without specifying their class). Knowing these patterns lets you recognise and name what experienced developers do by instinct.

Named solutions to problems you'll encounter repeatedly

Every experienced developer has solved the same problems dozens of times. Design patterns are the named, agreed-upon solutions to the most common ones. Knowing their names lets you say "use the Observer pattern here" instead of describing the whole thing from scratch.

Module pattern — private state with closures

// The module pattern creates private state — accessible only through
// the returned public interface:
function createCounter(initial = 0) {
  let count = initial;   // private — not accessible from outside

  return {
    increment() { count++; },
    decrement() { count--; },
    reset()     { count = initial; },
    value()     { return count; },
  };
}

const counter = createCounter(10);
counter.increment();
counter.increment();
console.log(counter.value());  // 12
// counter.count  → undefined (private!)

Singleton — one instance only

// Useful for: config, loggers, database connections
class AppConfig {
  static #instance = null;
  #settings = {};

  static getInstance() {
    if (!AppConfig.#instance) {
      AppConfig.#instance = new AppConfig();
    }
    return AppConfig.#instance;
  }

  set(key, value) { this.#settings[key] = value; }
  get(key)        { return this.#settings[key]; }
}

const config1 = AppConfig.getInstance();
const config2 = AppConfig.getInstance();
config1.set("theme", "dark");
console.log(config2.get("theme"));  // "dark" — same instance!
console.log(config1 === config2);   // true

Observer — subscribe to events

// The pattern behind: DOM events, Node's EventEmitter, Redux, Vue reactivity
class Store {
  #state;
  #listeners = [];

  constructor(initialState) { this.#state = initialState; }

  getState() { return { ...this.#state }; }   // return copy, not reference

  setState(updates) {
    this.#state = { ...this.#state, ...updates };
    this.#listeners.forEach(fn => fn(this.#state));  // notify all observers
  }

  subscribe(listener) {
    this.#listeners.push(listener);
    return () => {  // return unsubscribe function
      this.#listeners = this.#listeners.filter(l => l !== listener);
    };
  }
}

const store = new Store({ user: null, theme: "light" });
const unsub = store.subscribe(state => console.log("State changed:", state.theme));

store.setState({ theme: "dark" });  // logs: State changed: dark
store.setState({ user: "Alice" });  // logs: State changed: dark (user added)
unsub();  // stop listening
store.setState({ theme: "light" }); // no log — unsubscribed

Factory — create objects without specifying their class

// Instead of: new Dog(), new Cat() — use a factory:
function createAnimal(type, name) {
  const base = {
    name,
    toString() { return `${this.type} named ${this.name}`; },
  };

  const animals = {
    dog:  () => ({ ...base, type: "Dog",  speak: () => "Woof!" }),
    cat:  () => ({ ...base, type: "Cat",  speak: () => "Meow!" }),
    bird: () => ({ ...base, type: "Bird", speak: () => "Tweet!" }),
  };

  const factory = animals[type.toLowerCase()];
  if (!factory) throw new Error(`Unknown animal: ${type}`);
  return factory();
}

const dog = createAnimal("dog", "Rex");
const cat = createAnimal("cat", "Whiskers");
console.log(dog.speak());         // "Woof!"
console.log(cat.toString());      // "Cat named Whiskers"

Try It Yourself

// OBSERVER PATTERN — the foundation of event systems and reactive frameworks
class EventEmitter {
  #listeners = new Map();

on(event, listener) {
    if (!this.#listeners.has(event)) this.#listeners.set(event, []);
    this.#listeners.get(event).push(listener);
    return () => this.off(event, listener);  // returns unsubscribe fn
  }

off(event, listener) {
    const list = this.#listeners.get(event) || [];
    this.#listeners.set(event, list.filter(l => l !== listener));
  }

emit(event, ...args) {
    (this.#listeners.get(event) || []).forEach(l => l(...args));
  }

once(event, listener) {
    const unsubscribe = this.on(event, (...args) => {
      listener(...args);
      unsubscribe();
    });
  }
}

const emitter = new EventEmitter();

// Subscribe
const unsubscribe = emitter.on("data", (payload) => {
  console.log("Received:", payload);
});

emitter.once("connect", () => console.log("Connected! (fires once only)"));

// Emit events
emitter.emit("connect");               // "Connected! (fires once only)"
emitter.emit("connect");               // nothing — already unsubscribed by once()
emitter.emit("data", { id: 1 });       // "Received: { id: 1 }"
emitter.emit("data", { id: 2 });       // "Received: { id: 2 }"

unsubscribe();  // remove listener
emitter.emit("data", { id: 3 });       // nothing — unsubscribed

// STRATEGY PATTERN — swap algorithms at runtime
const sorters = {
  bubble: arr => [...arr].sort((a,b) => a - b),   // simplified
  quick:  arr => [...arr].sort((a,b) => a - b),
  radix:  arr => [...arr].sort((a,b) => a - b),
};

function sortData(data, strategy = "quick") {
  const sorter = sorters[strategy];
  if (!sorter) throw new Error(\`Unknown strategy: \${strategy}\`);
  return sorter(data);
}

console.log(sortData([3,1,4,1,5,9,2,6], "bubble")); // [1,1,2,3,4,5,6,9]

Strategy, decorator, command, and facade

Strategy — swap algorithms at runtime

// Define a family of algorithms, make them interchangeable:
const validationStrategies = {
  required: (v) => !!v?.trim()     || "This field is required",
  email:    (v) => v.includes("@") || "Invalid email",
  minLen:   (n) => (v) => v.length >= n || `Minimum ${n} characters`,
  maxLen:   (n) => (v) => v.length <= n || `Maximum ${n} characters`,
};

function validate(value, ...rules) {
  for (const rule of rules) {
    const result = rule(value);
    if (result !== true) return { valid: false, error: result };
  }
  return { valid: true };
}

console.log(validate("", validationStrategies.required));
// { valid: false, error: "This field is required" }
console.log(validate("alice@example.com",
  validationStrategies.required, validationStrategies.email));
// { valid: true }

Decorator — add behaviour without modifying the original

// Wrap a function with additional behaviour:
function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log("cache hit");
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function withLogging(fn) {
  return function(...args) {
    console.log(`Calling ${fn.name}(${args})`);
    const result = fn.apply(this, args);
    console.log(`Result: ${result}`);
    return result;
  };
}

function slowFibonacci(n) {
  if (n <= 1) return n;
  return slowFibonacci(n - 1) + slowFibonacci(n - 2);
}

const fastFib = memoize(slowFibonacci);
fastFib(40);  // slow first time
fastFib(40);  // instant — cache hit

Command — encapsulate actions as objects (undo/redo)

class TextEditor {
  #text = "";
  #history = [];

  execute(command) {
    this.#text = command.execute(this.#text);
    this.#history.push(command);
    return this;
  }

  undo() {
    const command = this.#history.pop();
    if (command) this.#text = command.undo(this.#text);
    return this;
  }

  getText() { return this.#text; }
}

const insertCommand = (text) => ({
  execute: (doc) => doc + text,
  undo:    (doc) => doc.slice(0, -text.length),
});

const editor = new TextEditor();
editor.execute(insertCommand("Hello"))
      .execute(insertCommand(" World"));
console.log(editor.getText());   // "Hello World"
editor.undo();
console.log(editor.getText());   // "Hello"

Mixin pattern, SOLID in JS, and anti-patterns

Mixins — multiple inheritance without classes

// Functional mixins — compose behaviour from multiple sources:
const Serialisable = (superclass) => class extends superclass {
  toJSON() { return JSON.stringify(this); }
  static fromJSON(json) { return Object.assign(new this(), JSON.parse(json)); }
};

const Timestamped = (superclass) => class extends superclass {
  constructor(...args) {
    super(...args);
    this.createdAt = new Date().toISOString();
  }
};

const Validatable = (superclass) => class extends superclass {
  validate() { return Object.keys(this).every(k => this[k] !== null); }
};

class BaseModel {}
class User extends Serialisable(Timestamped(Validatable(BaseModel))) {
  constructor(name, email) { super(); this.name = name; this.email = email; }
}

const user = new User("Alice", "alice@example.com");
console.log(user.validate());   // true
console.log(user.createdAt);    // ISO timestamp
console.log(user.toJSON());     // JSON string

Common anti-patterns to avoid

// ✗ God object — one object that knows too much:
const app = {
  users: [], orders: [], products: [],
  processOrder() { /* 200 lines */ },
  sendEmail() { /* 100 lines */ },
  updateInventory() { /* 150 lines */ },
};
// Fix: separate into UserService, OrderService, EmailService

// ✗ Callback hell — nested callbacks that create a "pyramid of doom"
// Fix: async/await

// ✗ Implicit global state — accidentally writing to window:
function badFn() { myGlobal = "oops"; }  // creates window.myGlobal!
// Fix: always declare variables with let/const

// ✗ Premature optimisation — complicating code before measuring:

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.