Academy — Sanjib Sikder

What a Pattern Actually Is

A design pattern is not a library you install. It is a named solution to a recurring problem — a template you can adapt, a vocabulary you can use to communicate with other developers instantly. When you say "use the Observer pattern here", every experienced developer in the room knows exactly what you mean.

The patterns below are not invented for the sake of elegance. Each one exists because the naive approach to the same problem has a specific failure mode.

Singleton — One Instance, Global Access

The problem: some resources should exist exactly once. A database connection pool, a configuration object, a logger. Creating multiple instances is either wasteful or catastrophically wrong.

JavaScript

Ctrl+Enter to run

class Config {
  static #instance = null;

#settings;

constructor() {
if (Config.#instance) return Config.#instance; // ← return existing
this.#settings = {
env: "production",
version: "2.1.0",
apiUrl: "https://api.example.com",
};
Config.#instance = this;
}

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

static getInstance() { return Config.#instance ?? new Config(); }
}

const c1 = new Config();
const c2 = new Config();
const c3 = Config.getInstance();

console.log(c1 === c2); // true — same instance
console.log(c1 === c3); // true

c1.set("env", "staging");
console.log(c2.get("env")); // "staging" — same object, change is visible everywhere
console.log(c3.get("env")); // "staging"

console.log(c1.get("version"));

The private static #instance field is the guard. The constructor returns the existing instance if one exists, making new Config() safe to call anywhere — it always returns the one true instance.

Observer — Decouple Producers from Consumers

The problem: one part of a system changes state. Multiple other parts need to react. Hardcoding the connections makes everything tightly coupled — changing one breaks the others.

The Observer pattern (also called Publish/Subscribe) introduces an intermediary that neither producer nor consumer knows about:

JavaScript

Ctrl+Enter to run

class EventEmitter {
  #events = new Map();

on(event, listener) {
if (!this.#events.has(event)) this.#events.set(event, new Set());
this.#events.get(event).add(listener);
// Return unsubscribe function — caller owns cleanup
return () => this.#events.get(event).delete(listener);
}

emit(event, ...args) {
this.#events.get(event)?.forEach(fn => fn(...args));
return this;
}

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

// Exam system — producer emits, consumers react independently
class ExamSession extends EventEmitter {
#scores = [];

submit(student, score) {
this.#scores.push({ student, score });
this.emit("score:submitted", { student, score });
if (score >= 75) this.emit("score:pass", { student, score });
else this.emit("score:fail", { student, score });
}

close() { this.emit("session:closed", { total: this.#scores.length }); }
}

const session = new ExamSession();

// Consumers — completely decoupled from each other and from ExamSession
session.on("score:submitted", ({ student, score }) =>
console.log(`[Logger] ${student}: ${score}`));

session.on("score:pass", ({ student }) =>
console.log(`[Notifier] Congratulations ${student}!`));

session.on("score:fail", ({ student }) =>
console.log(`[Notifier] ${student} needs to resit.`));

session.once("session:closed", ({ total }) =>
console.log(`[Report] Session closed. ${total} submissions.`));

session.submit("Rahul", 82);
session.submit("Priya", 91);
session.submit("Arjun", 44);
session.close();
session.close(); // once() — second close emits nothing from [Report]

class EventEmitter {
  #events = new Map();

on(event, listener) {
if (!this.#events.has(event)) this.#events.set(event, new Set());
this.#events.get(event).add(listener);
// Return unsubscribe function — caller owns cleanup
return () => this.#events.get(event).delete(listener);
}

emit(event, ...args) {
this.#events.get(event)?.forEach(fn => fn(...args));
return this;
}

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

// Exam system — producer emits, consumers react independently
class ExamSession extends EventEmitter {
#scores = [];

submit(student, score) {
this.#scores.push({ student, score });
this.emit("score:submitted", { student, score });
if (score >= 75) this.emit("score:pass", { student, score });
else this.emit("score:fail", { student, score });
}

close() { this.emit("session:closed", { total: this.#scores.length }); }
}

const session = new ExamSession();

// Consumers — completely decoupled from each other and from ExamSession
session.on("score:submitted", ({ student, score }) =>
console.log(`[Logger] ${student}: ${score}`));

session.on("score:pass", ({ student }) =>
console.log(`[Notifier] Congratulations ${student}!`));

session.on("score:fail", ({ student }) =>
console.log(`[Notifier] ${student} needs to resit.`));

session.once("session:closed", ({ total }) =>
console.log(`[Report] Session closed. ${total} submissions.`));

session.submit("Rahul", 82);
session.submit("Priya", 91);
session.submit("Arjun", 44);
session.close();
session.close(); // once() — second close emits nothing from [Report]

Adding a new consumer means calling session.on(...) — nothing else changes. The producer does not know or care who is listening. This is how React's synthetic events, Node's EventEmitter, and every reactive UI framework work underneath.

Strategy — Swap Algorithms at Runtime

The problem: you have a function that does the same thing in different ways depending on context. Stacking if/else or switch for each variant makes the function grow forever and become untestable.

Strategy extracts each algorithm variant into its own object and swaps them at runtime:

JavaScript

Ctrl+Enter to run

// Grading strategies — each is a self-contained algorithm
const strategies = {
  absolute: {
    name: "Absolute",
    grade(score) {
      if (score >= 90) return "A+";
      if (score >= 75) return "A";
      if (score >= 60) return "B";
      if (score >= 50) return "C";
      return "F";
    }
  },

relative: {
name: "Relative (curved)",
grade(score, { mean, stdDev }) {
const z = (score - mean) / stdDev;
if (z > 1.5) return "A+";
if (z > 0.5) return "A";
if (z > -0.5) return "B";
if (z > -1.5) return "C";
return "F";
}
},

passFail: {
name: "Pass/Fail",
grade(score, { threshold = 50 } = {}) {
return score >= threshold ? "PASS" : "FAIL";
}
},
};

class Grader {
#strategy;
constructor(strategy) { this.#strategy = strategy; }
setStrategy(s) { this.#strategy = s; return this; }

grade(score, context = {}) {
return this.#strategy.grade(score, context);
}

gradeAll(scores, context = {}) {
return scores.map(({ name, score }) => ({
name, score,
grade: this.grade(score, context),
}));
}
}

const students = [
{ name: "Rahul", score: 82 },
{ name: "Priya", score: 91 },
{ name: "Arjun", score: 49 },
{ name: "Sneha", score: 67 },
];

const scores = students.map(s => s.score);
const mean = scores.reduce((a, b) => a + b, 0) / scores.length;
const stdDev = Math.sqrt(scores.map(s => (s - mean) ** 2).reduce((a, b) => a + b, 0) / scores.length);

const grader = new Grader(strategies.absolute);

console.log("=== Absolute ===");
grader.gradeAll(students).forEach(({ name, score, grade }) =>
console.log(` ${name}: ${score} → ${grade}`));

console.log("\n=== Relative (mean:", mean.toFixed(1), "σ:", stdDev.toFixed(1), ")===");
grader.setStrategy(strategies.relative)
.gradeAll(students, { mean, stdDev })
.forEach(({ name, score, grade }) => console.log(` ${name}: ${score} → ${grade}`));

console.log("\n=== Pass/Fail (threshold 60) ===");
grader.setStrategy(strategies.passFail)
.gradeAll(students, { threshold: 60 })
.forEach(({ name, score, grade }) => console.log(` ${name}: ${score} → ${grade}`));

// Grading strategies — each is a self-contained algorithm
const strategies = {
  absolute: {
    name: "Absolute",
    grade(score) {
      if (score >= 90) return "A+";
      if (score >= 75) return "A";
      if (score >= 60) return "B";
      if (score >= 50) return "C";
      return "F";
    }
  },

relative: {
name: "Relative (curved)",
grade(score, { mean, stdDev }) {
const z = (score - mean) / stdDev;
if (z > 1.5) return "A+";
if (z > 0.5) return "A";
if (z > -0.5) return "B";
if (z > -1.5) return "C";
return "F";
}
},

passFail: {
name: "Pass/Fail",
grade(score, { threshold = 50 } = {}) {
return score >= threshold ? "PASS" : "FAIL";
}
},
};

class Grader {
#strategy;
constructor(strategy) { this.#strategy = strategy; }
setStrategy(s) { this.#strategy = s; return this; }

grade(score, context = {}) {
return this.#strategy.grade(score, context);
}

gradeAll(scores, context = {}) {
return scores.map(({ name, score }) => ({
name, score,
grade: this.grade(score, context),
}));
}
}

const students = [
{ name: "Rahul", score: 82 },
{ name: "Priya", score: 91 },
{ name: "Arjun", score: 49 },
{ name: "Sneha", score: 67 },
];

const scores = students.map(s => s.score);
const mean = scores.reduce((a, b) => a + b, 0) / scores.length;
const stdDev = Math.sqrt(scores.map(s => (s - mean) ** 2).reduce((a, b) => a + b, 0) / scores.length);

const grader = new Grader(strategies.absolute);

console.log("=== Absolute ===");
grader.gradeAll(students).forEach(({ name, score, grade }) =>
console.log(` ${name}: ${score} → ${grade}`));

console.log("\n=== Relative (mean:", mean.toFixed(1), "σ:", stdDev.toFixed(1), ")===");
grader.setStrategy(strategies.relative)
.gradeAll(students, { mean, stdDev })
.forEach(({ name, score, grade }) => console.log(` ${name}: ${score} → ${grade}`));

console.log("\n=== Pass/Fail (threshold 60) ===");
grader.setStrategy(strategies.passFail)
.gradeAll(students, { threshold: 60 })
.forEach(({ name, score, grade }) => console.log(` ${name}: ${score} → ${grade}`));

Adding a new grading algorithm means adding a new strategy object — the Grader class does not change at all. This is the Open/Closed Principle in action: open for extension, closed for modification.

Command — Encapsulate Operations as Objects

The problem: you need undo/redo, operation history, queued operations, or the ability to retry failed operations. None of these are possible if your operations are just function calls that disappear after execution.

Command turns each operation into an object that can be stored, queued, reversed, and replayed:

JavaScript

Ctrl+Enter to run

class CommandHistory {
  #done   = [];
  #undone = [];

execute(command) {
command.execute();
this.#done.push(command);
this.#undone = []; // new command clears redo stack
}

undo() {
const cmd = this.#done.pop();
if (!cmd) return console.log("Nothing to undo");
cmd.undo();
this.#undone.push(cmd);
}

redo() {
const cmd = this.#undone.pop();
if (!cmd) return console.log("Nothing to redo");
cmd.execute();
this.#done.push(cmd);
}

get history() { return this.#done.map(c => c.description); }
}

// The document being edited
const doc = { text: "", marks: 75 };

// Commands — each knows how to do and undo itself
class SetTextCommand {
#doc; #newText; #oldText;
constructor(doc, text) { this.#doc = doc; this.#newText = text; }
get description() { return `SetText("${this.#newText}")`; }
execute() { this.#oldText = this.#doc.text; this.#doc.text = this.#newText; }
undo() { this.#doc.text = this.#oldText; }
}

class AdjustMarksCommand {
#doc; #delta;
constructor(doc, delta) { this.#doc = doc; this.#delta = delta; }
get description() { return `AdjustMarks(${this.#delta > 0 ? "+" : ""}${this.#delta})`; }
execute() { this.#doc.marks += this.#delta; }
undo() { this.#doc.marks -= this.#delta; }
}

const history = new CommandHistory();
const show = label => console.log(`${label.padEnd(25)} text="${doc.text}" marks=${doc.marks}`);

history.execute(new SetTextCommand(doc, "First draft")); show("after SetText");
history.execute(new AdjustMarksCommand(doc, +5)); show("after +5 marks");
history.execute(new SetTextCommand(doc, "Final draft")); show("after SetText 2");
history.execute(new AdjustMarksCommand(doc, -3)); show("after -3 marks");

console.log("History:", history.history);

history.undo(); show("\nafter undo");
history.undo(); show("after undo");
history.redo(); show("after redo");

class CommandHistory {
  #done   = [];
  #undone = [];

execute(command) {
command.execute();
this.#done.push(command);
this.#undone = []; // new command clears redo stack
}

undo() {
const cmd = this.#done.pop();
if (!cmd) return console.log("Nothing to undo");
cmd.undo();
this.#undone.push(cmd);
}

redo() {
const cmd = this.#undone.pop();
if (!cmd) return console.log("Nothing to redo");
cmd.execute();
this.#done.push(cmd);
}

get history() { return this.#done.map(c => c.description); }
}

// The document being edited
const doc = { text: "", marks: 75 };

// Commands — each knows how to do and undo itself
class SetTextCommand {
#doc; #newText; #oldText;
constructor(doc, text) { this.#doc = doc; this.#newText = text; }
get description() { return `SetText("${this.#newText}")`; }
execute() { this.#oldText = this.#doc.text; this.#doc.text = this.#newText; }
undo() { this.#doc.text = this.#oldText; }
}

class AdjustMarksCommand {
#doc; #delta;
constructor(doc, delta) { this.#doc = doc; this.#delta = delta; }
get description() { return `AdjustMarks(${this.#delta > 0 ? "+" : ""}${this.#delta})`; }
execute() { this.#doc.marks += this.#delta; }
undo() { this.#doc.marks -= this.#delta; }
}

const history = new CommandHistory();
const show = label => console.log(`${label.padEnd(25)} text="${doc.text}" marks=${doc.marks}`);

history.execute(new SetTextCommand(doc, "First draft")); show("after SetText");
history.execute(new AdjustMarksCommand(doc, +5)); show("after +5 marks");
history.execute(new SetTextCommand(doc, "Final draft")); show("after SetText 2");
history.execute(new AdjustMarksCommand(doc, -3)); show("after -3 marks");

console.log("History:", history.history);

history.undo(); show("\nafter undo");
history.undo(); show("after undo");
history.redo(); show("after redo");

Every text editor, design tool, and spreadsheet application is built on this pattern. The history stack is just an array of Command objects — undo walks it backwards, redo walks it forwards.

Decorator — Add Behaviour Without Subclassing

The problem: you want to add capabilities to an object — logging, caching, validation, retrying — without modifying the original class or creating an exponential hierarchy of subclasses.

Decorator wraps an object, implements the same interface, and adds behaviour before or after delegating to the original:

JavaScript

Ctrl+Enter to run

// The core service — simple, focused
class StudentService {
  #db = [
    { id: 1, name: "Rahul",  marks: 82 },
    { id: 2, name: "Priya",  marks: 91 },
    { id: 3, name: "Arjun",  marks: 49 },
  ];

async find(id) {
await new Promise(r => setTimeout(r, 30)); // simulate DB latency
const s = this.#db.find(s => s.id === id);
if (!s) throw new Error(`Student ${id} not found`);
return s;
}
}

// Logging decorator
class LoggingDecorator {
#service;
constructor(service) { this.#service = service; }

async find(id) {
console.log(`[Log] find(${id}) called`);
const result = await this.#service.find(id);
console.log(`[Log] find(${id}) → ${result.name}`);
return result;
}
}

// Caching decorator
class CachingDecorator {
#service;
#cache = new Map();
constructor(service) { this.#service = service; }

async find(id) {
if (this.#cache.has(id)) {
console.log(`[Cache] HIT id=${id}`);
return this.#cache.get(id);
}
const result = await this.#service.find(id);
this.#cache.set(id, result);
console.log(`[Cache] SET id=${id}`);
return result;
}
}

// Retry decorator
class RetryDecorator {
#service; #maxRetries;
constructor(service, maxRetries = 3) {
this.#service = service;
this.#maxRetries = maxRetries;
}

async find(id) {
for (let attempt = 1; attempt <= this.#maxRetries; attempt++) {
try { return await this.#service.find(id); }
catch (err) {
if (attempt === this.#maxRetries) throw err;
console.log(`[Retry] attempt ${attempt} failed — retrying`);
}
}
}
}

// Stack decorators — each wraps the previous
const service = new RetryDecorator(
new CachingDecorator(
new LoggingDecorator(
new StudentService()
)
)
);

async function run() {
await service.find(1);
console.log("---");
await service.find(1); // cache hit
console.log("---");
try { await service.find(99); } catch (e) { console.log("[Error]", e.message); }
}

run();

// The core service — simple, focused
class StudentService {
  #db = [
    { id: 1, name: "Rahul",  marks: 82 },
    { id: 2, name: "Priya",  marks: 91 },
    { id: 3, name: "Arjun",  marks: 49 },
  ];

async find(id) {
await new Promise(r => setTimeout(r, 30)); // simulate DB latency
const s = this.#db.find(s => s.id === id);
if (!s) throw new Error(`Student ${id} not found`);
return s;
}
}

// Logging decorator
class LoggingDecorator {
#service;
constructor(service) { this.#service = service; }

async find(id) {
console.log(`[Log] find(${id}) called`);
const result = await this.#service.find(id);
console.log(`[Log] find(${id}) → ${result.name}`);
return result;
}
}

// Caching decorator
class CachingDecorator {
#service;
#cache = new Map();
constructor(service) { this.#service = service; }

async find(id) {
if (this.#cache.has(id)) {
console.log(`[Cache] HIT id=${id}`);
return this.#cache.get(id);
}
const result = await this.#service.find(id);
this.#cache.set(id, result);
console.log(`[Cache] SET id=${id}`);
return result;
}
}

// Retry decorator
class RetryDecorator {
#service; #maxRetries;
constructor(service, maxRetries = 3) {
this.#service = service;
this.#maxRetries = maxRetries;
}

async find(id) {
for (let attempt = 1; attempt <= this.#maxRetries; attempt++) {
try { return await this.#service.find(id); }
catch (err) {
if (attempt === this.#maxRetries) throw err;
console.log(`[Retry] attempt ${attempt} failed — retrying`);
}
}
}
}

// Stack decorators — each wraps the previous
const service = new RetryDecorator(
new CachingDecorator(
new LoggingDecorator(
new StudentService()
)
)
);

async function run() {
await service.find(1);
console.log("---");
await service.find(1); // cache hit
console.log("---");
try { await service.find(99); } catch (e) { console.log("[Error]", e.message); }
}

run();

Three independent behaviours — logging, caching, retry — each in its own class, each composable with any service that implements .find(). No inheritance anywhere. To add rate limiting, write one more decorator and wrap it in.

Builder — Construct Complex Objects Step by Step

The problem: an object needs many optional parameters. A constructor with twelve arguments is unreadable. A Builder accumulates configuration fluently and constructs only when you call .build():

JavaScript

Ctrl+Enter to run

class QueryBuilder {
  #table;
  #conditions = [];
  #columns    = ["*"];
  #orderBy    = null;
  #limit      = null;
  #offset     = null;

from(table) { this.#table = table; return this; }

select(...cols) { this.#columns = cols; return this; }

where(condition) { this.#conditions.push(condition); return this; }

order(col, dir = "ASC") { this.#orderBy = `${col} ${dir}`; return this; }

take(n) { this.#limit = n; return this; }
skip(n) { this.#offset = n; return this; }

build() {
if (!this.#table) throw new Error("Table is required");
let q = `SELECT ${this.#columns.join(", ")} FROM ${this.#table}`;
if (this.#conditions.length) q += ` WHERE ${this.#conditions.join(" AND ")}`;
if (this.#orderBy) q += ` ORDER BY ${this.#orderBy}`;
if (this.#limit !== null) q += ` LIMIT ${this.#limit}`;
if (this.#offset !== null) q += ` OFFSET ${this.#offset}`;
return q;
}
}

// Each query is independent — no state bleeds between builds
const q1 = new QueryBuilder()
.from("students")
.select("name", "marks")
.where("marks >= 75")
.order("marks", "DESC")
.take(10)
.build();

const q2 = new QueryBuilder()
.from("students")
.where("subject = 'Physics'")
.where("marks >= 50")
.order("name")
.skip(20).take(10)
.build();

const q3 = new QueryBuilder()
.from("exams")
.select("id", "date", "avg_score")
.build();

console.log(q1);
console.log(q2);
console.log(q3);

class QueryBuilder {
  #table;
  #conditions = [];
  #columns    = ["*"];
  #orderBy    = null;
  #limit      = null;
  #offset     = null;

from(table) { this.#table = table; return this; }

select(...cols) { this.#columns = cols; return this; }

where(condition) { this.#conditions.push(condition); return this; }

order(col, dir = "ASC") { this.#orderBy = `${col} ${dir}`; return this; }

take(n) { this.#limit = n; return this; }
skip(n) { this.#offset = n; return this; }

build() {
if (!this.#table) throw new Error("Table is required");
let q = `SELECT ${this.#columns.join(", ")} FROM ${this.#table}`;
if (this.#conditions.length) q += ` WHERE ${this.#conditions.join(" AND ")}`;
if (this.#orderBy) q += ` ORDER BY ${this.#orderBy}`;
if (this.#limit !== null) q += ` LIMIT ${this.#limit}`;
if (this.#offset !== null) q += ` OFFSET ${this.#offset}`;
return q;
}
}

// Each query is independent — no state bleeds between builds
const q1 = new QueryBuilder()
.from("students")
.select("name", "marks")
.where("marks >= 75")
.order("marks", "DESC")
.take(10)
.build();

const q2 = new QueryBuilder()
.from("students")
.where("subject = 'Physics'")
.where("marks >= 50")
.order("name")
.skip(20).take(10)
.build();

const q3 = new QueryBuilder()
.from("exams")
.select("id", "date", "avg_score")
.build();

console.log(q1);
console.log(q2);
console.log(q3);

Every call returns this — enabling method chaining. The actual SQL is assembled only in .build(). ORMs like Knex.js and Prisma's query API are exactly this pattern.

Choosing the Right Pattern

JavaScript

Ctrl+Enter to run

// Pattern decision guide — illustrated

// Use SINGLETON when: one instance must exist globally
// Config, Logger, ConnectionPool

// Use OBSERVER when: one thing changes, many things should react
// UI state updates, domain events, pub/sub messaging

// Use STRATEGY when: same operation, multiple interchangeable algorithms
// Sorting, pricing, validation, formatting

// Use COMMAND when: operations need history, undo, retry, or queuing
// Editors, workflow engines, transactional systems

// Use DECORATOR when: cross-cutting concerns without inheritance
// Logging, caching, auth, retry, rate limiting

// Use BUILDER when: complex object construction with many optional parts
// Query builders, HTTP request builders, test fixtures

// A quick test: combine Observer + Strategy
class Pipeline {
#stages = [];
#emitter;

constructor(emitter) { this.#emitter = emitter; }

addStage(name, strategy) {
this.#stages.push({ name, strategy });
return this;
}

async run(data) {
let result = data;
for (const { name, strategy } of this.#stages) {
result = await strategy(result);
this.#emitter.emit("stage:done", { name, result });
}
return result;
}
}

class Emitter {
#listeners = new Map();
on(e, fn) { if (!this.#listeners.has(e)) this.#listeners.set(e, []); this.#listeners.get(e).push(fn); }
emit(e, d) { this.#listeners.get(e)?.forEach(fn => fn(d)); }
}

const bus = new Emitter();
bus.on("stage:done", ({ name, result }) =>
console.log(` [stage: ${name}]`, typeof result === "object" ? JSON.stringify(result) : result)
);

const pipeline = new Pipeline(bus)
.addStage("parse", data => data.trim().split(",").map(Number))
.addStage("filter", data => data.filter(n => n > 0))
.addStage("sort", data => [...data].sort((a, b) => a - b))
.addStage("summarise",data => ({ count: data.length, sum: data.reduce((a,b)=>a+b,0), max: data[data.length-1] }));

pipeline.run(" 5, -2, 8, 3, -1, 12, 0, 7 ").then(result => {
console.log("Final:", result);
});

// Pattern decision guide — illustrated

// Use SINGLETON when: one instance must exist globally
// Config, Logger, ConnectionPool

// Use OBSERVER when: one thing changes, many things should react
// UI state updates, domain events, pub/sub messaging

// Use STRATEGY when: same operation, multiple interchangeable algorithms
// Sorting, pricing, validation, formatting

// Use COMMAND when: operations need history, undo, retry, or queuing
// Editors, workflow engines, transactional systems

// Use DECORATOR when: cross-cutting concerns without inheritance
// Logging, caching, auth, retry, rate limiting

// Use BUILDER when: complex object construction with many optional parts
// Query builders, HTTP request builders, test fixtures

// A quick test: combine Observer + Strategy
class Pipeline {
#stages = [];
#emitter;

constructor(emitter) { this.#emitter = emitter; }

addStage(name, strategy) {
this.#stages.push({ name, strategy });
return this;
}

async run(data) {
let result = data;
for (const { name, strategy } of this.#stages) {
result = await strategy(result);
this.#emitter.emit("stage:done", { name, result });
}
return result;
}
}

class Emitter {
#listeners = new Map();
on(e, fn) { if (!this.#listeners.has(e)) this.#listeners.set(e, []); this.#listeners.get(e).push(fn); }
emit(e, d) { this.#listeners.get(e)?.forEach(fn => fn(d)); }
}

const bus = new Emitter();
bus.on("stage:done", ({ name, result }) =>
console.log(` [stage: ${name}]`, typeof result === "object" ? JSON.stringify(result) : result)
);

const pipeline = new Pipeline(bus)
.addStage("parse", data => data.trim().split(",").map(Number))
.addStage("filter", data => data.filter(n => n > 0))
.addStage("sort", data => [...data].sort((a, b) => a - b))
.addStage("summarise",data => ({ count: data.length, sum: data.reduce((a,b)=>a+b,0), max: data[data.length-1] }));

pipeline.run(" 5, -2, 8, 3, -1, 12, 0, 7 ").then(result => {
console.log("Final:", result);
});

What You Have Learned

Design patterns are named solutions to problems that repeat across every codebase, every language, every decade. Knowing their names and shapes lets you recognise problems faster and communicate solutions instantly.

The key ideas:

Singleton: one instance, returned by every call to new or getInstance() — use for shared global resources
Observer: producers emit events, consumers subscribe independently — decouples things that change from things that react
Strategy: swap the algorithm, keep the context — eliminates if/else chains that grow forever
Command: operations as objects with execute() and undo() — enables history, queuing, and replay
Decorator: wrap an object, add behaviour, delegate the rest — cross-cutting concerns without inheritance
Builder: accumulate configuration with method chaining, construct only at .build() — readable complex object creation
Patterns compose — the final runner combined Observer and Strategy in twelve lines

In the next lesson: Testing JavaScript — unit tests, property-based testing, mocking, and the discipline that turns "I think this works" into "I can prove this works under these conditions."

Design Patterns in JavaScript

What a Pattern Actually Is

Singleton — One Instance, Global Access

Observer — Decouple Producers from Consumers

Strategy — Swap Algorithms at Runtime

Command — Encapsulate Operations as Objects

Decorator — Add Behaviour Without Subclassing

Builder — Construct Complex Objects Step by Step

Choosing the Right Pattern

What You Have Learned