Understanding Programming Design Patterns Without the Jargon

Knowing design patterns helps you write cleaner, more reusable, and organised code. They provide proven solutions to common problems, making development faster and easier to maintain.

1. Factory Pattern

Think of it like a factory making different products.You ask the factory for something, and it gives you a new customised item, without you needing to know how it’s made.

Use it when: You want to create objects but don’t want to expose the creation logic.

Example:

function createUser(role) {
  if (role === 'admin') return { role, canEdit: true };
  if (role === 'guest') return { role, canEdit: false };
}

const admin = createUser('admin');

2. Singleton Pattern

Like a single President of a country – only one can exist at a time.This pattern ensures there’s only one instance of something (like a database connection) in your app.

Use it when: You want one and only one instance globally (e.g., app config, logging, DB connection).

Example:

class AppConfig {
  constructor() {
    if (AppConfig.instance) return AppConfig.instance;
    this.theme = 'dark';
    AppConfig.instance = this;
  }
}

const config1 = new AppConfig();
const config2 = new AppConfig();
console.log(config1 === config2); // true

3. Command Pattern

Think of a remote control – you press a button (command), and it performs an action. Encapsulate requests as objects, allowing you to queue or undo operations.

Use it when: You want to queue actions, undo them, or separate "what to do" from "when to do it."

Example:

function turnOn() { console.log('Light on'); }
function turnOff() { console.log('Light off'); }

const commandQueue = [turnOn, turnOff];
commandQueue.forEach(cmd => cmd());

4. Abstract Pattern (Abstract Factory or Class)

Think of a blueprint for houses – all houses must have walls, a roof, and doors, but how they look is up to the builder.

Use it when: You want to define a base contract but let subclasses customise details.

Example (simplified):

class Button {
  render() { throw "Not implemented"; }
}

class WindowsButton extends Button {
  render() { console.log("Windows button"); }
}

class MacButton extends Button {
  render() { console.log("Mac button"); }
}

function renderUI(factory) {
  const btn = new factory();
  btn.render();
}

renderUI(MacButton); // Mac button

5. Prototype Pattern

Imagine copying a recipe instead of writing a new one from scratch. You clone an existing object instead of creating a new one.

Use it when: You want to create copies of an object with some changes.

Example:

const car = { wheels: 4, drive() { console.log("Driving"); } };
const myCar = Object.create(car);
myCar.color = 'red';

6. Chain of Responsibility Pattern

Think of customer service – your request is passed from one support person to another until someone handles it.

Use it when: Multiple handlers can process a request, and you want to pass it along the chain.

Example:

function handler1(req, next) {
  if (req.type === 'email') console.log("Handled by handler1");
  else next(req);
}

function handler2(req) {
  console.log("Handled by handler2");
}

function process(req) {
  handler1(req, handler2);
}

process({ type: 'email' }); // handler1
process({ type: 'sms' });   // handler2

7. Iterator Pattern

Like flipping through pages in a book one by one. It provides a way to access elements of a collection one at a time.

Use it when: You need to loop over a custom data structure (not just arrays).

Example:

function createIterator(items) {
  let i = 0;
  return {
    next: () => i < items.length ? { value: items[i++], done: false } : { done: true }
  };
}

const iter = createIterator(['a', 'b', 'c']);
console.log(iter.next().value); // a
console.log(iter.next().value); // b

Cheat Sheet:

Pattern	Analogy	Use for
Factory	Product factory	Flexible object creation
Singleton	Only one president	Global single instance
Command	Remote control	Encapsulating actions
Abstract (Class/Factory)	Blueprint	Shared base contract
Prototype	Recipe copy	Clone with slight modifications
Chain of Responsibility	Customer service escalation	Pass request along handlers
Iterator	Flipping book pages	Sequential access to collection