Introduction
Design patterns are proven solutions to common software design problems. They represent best practices evolved over time by experienced developers. Think of them as blueprints you can customize to solve recurring design problems in your code.
Part 1: CREATIONAL PATTERNS
Focus: Object creation mechanisms
1. Factory Method
Problem: Create objects without specifying exact class
Use when: Object type decided at runtime
// Product classes
class Car {
drive() { console.log("Driving car"); }
}
class Bike {
ride() { console.log("Riding bike"); }
}
// Factory
class VehicleFactory {
static create(type) {
if (type === "car") return new Car();
if (type === "bike") return new Bike();
}
}
// Usage
const myCar = VehicleFactory.create("car");
myCar.drive(); // Driving car
2. Abstract Factory
Problem: Create families of related objects
Use when: System needs to be independent of how products are created
// Abstract products
class WinButton { render() { return "Windows Button"; } }
class MacButton { render() { return "Mac Button"; } }
// Abstract factory
class UIFactory {
static getFactory(os) {
if (os === "win") return new WinFactory();
return new MacFactory();
}
}
class WinFactory {
createButton() { return new WinButton(); }
}
// Usage
const factory = UIFactory.getFactory("win");
const button = factory.createButton();
console.log(button.render()); // Windows Button
3. Singleton
Problem: Ensure only one instance exists
Use when: Need single point of control (database connection, config)
class Database {
constructor() {
if (Database.instance) return Database.instance;
this.connection = "Connected to DB";
Database.instance = this;
}
query(sql) { console.log(`Executing: ${sql}`); }
}
// Usage
const db1 = new Database();
const db2 = new Database();
console.log(db1 === db2); // true
4. Prototype
Problem: Create objects by cloning existing ones
Use when: Object creation is expensive
const carPrototype = {
wheels: 4,
start() { console.log("Engine started"); },
clone() { return Object.create(this); }
};
// Usage
const sportsCar = carPrototype.clone();
sportsCar.color = "red";
sportsCar.start(); // Engine started
5. Builder
Problem: Construct complex objects step by step
Use when: Object has many optional parts
class Computer {
constructor() {
this.parts = [];
}
}
class ComputerBuilder {
constructor() {
this.parts = [];
}
addCPU() { this.parts.push("Intel i7"); return this; }
addRAM() { this.parts.push("16GB DDR4"); return this; }
addSSD() { this.parts.push("512GB NVMe"); return this; }
build() { return this.parts; }
}
// Usage
const gamingPC = new ComputerBuilder()
.addCPU()
.addRAM()
.addSSD()
.build();
console.log(gamingPC); // ["Intel i7", "16GB DDR4", "512GB NVMe"]
Part 2: STRUCTURAL PATTERNS
Focus: Class and object composition
6. Adapter
Problem: Make incompatible interfaces work together
Use when: Need to integrate old code with new system
// Old system
class OldAPI {
getUserData() { return { name: "John", age: 30 }; }
}
// New expected format
class UserAdapter {
constructor(oldAPI) {
this.oldAPI = oldAPI;
}
getUser() {
const data = this.oldAPI.getUserData();
return `${data.name} is ${data.age} years old`;
}
}
// Usage
const oldAPI = new OldAPI();
const adapter = new UserAdapter(oldAPI);
console.log(adapter.getUser()); // John is 30 years old
7. Bridge
Problem: Separate abstraction from implementation
Use when: Want to avoid permanent binding between abstraction and implementation
// Implementation
class LEDTV { on() { console.log("LED TV ON"); } }
class OLEDTV { on() { console.log("OLED TV ON"); } }
// Abstraction
class Remote {
constructor(tv) { this.tv = tv; }
powerOn() { this.tv.on(); }
}
// Usage
const ledTV = new LEDTV();
const remote = new Remote(ledTV);
remote.powerOn(); // LED TV ON
8. Composite
Problem: Treat individual and group objects uniformly
Use when: Need tree structure of objects
class File {
constructor(name) { this.name = name; }
display() { console.log(`File: ${this.name}`); }
}
class Folder {
constructor(name) {
this.name = name;
this.children = [];
}
add(item) { this.children.push(item); }
display() {
console.log(`Folder: ${this.name}`);
this.children.forEach(child => child.display());
}
}
// Usage
const file1 = new File("doc.txt");
const file2 = new File("image.jpg");
const folder = new Folder("Documents");
folder.add(file1);
folder.add(file2);
folder.display();
9. Decorator
Problem: Add behavior dynamically without modifying class
Use when: Need to extend functionality at runtime
class Coffee {
cost() { return 5; }
description() { return "Coffee"; }
}
class MilkDecorator {
constructor(coffee) { this.coffee = coffee; }
cost() { return this.coffee.cost() + 2; }
description() { return this.coffee.description() + ", Milk"; }
}
// Usage
let myCoffee = new Coffee();
myCoffee = new MilkDecorator(myCoffee);
console.log(myCoffee.description()); // Coffee, Milk
console.log(myCoffee.cost()); // 7
10. Facade
Problem: Provide simple interface to complex subsystem
Use when: Want to hide system complexity
// Complex subsystems
class CPU { freeze() { console.log("CPU frozen"); } }
class Memory { load() { console.log("Memory loaded"); } }
class HardDrive { read() { console.log("Hard drive reading"); } }
// Facade
class Computer {
constructor() {
this.cpu = new CPU();
this.memory = new Memory();
this.hdd = new HardDrive();
}
start() {
this.cpu.freeze();
this.memory.load();
this.hdd.read();
console.log("Computer started!");
}
}
// Usage
const pc = new Computer();
pc.start(); // Clean, simple interface
11. Flyweight
Problem: Share objects to support large numbers efficiently
Use when: Many similar objects, memory is concern
// Shared object
class Character {
constructor(char) { this.char = char; }
display(x, y) { console.log(`'${this.char}' at (${x},${y})`); }
}
// Factory
class CharacterFactory {
constructor() { this.chars = {}; }
get(char) {
if (!this.chars[char]) {
this.chars[char] = new Character(char);
}
return this.chars[char];
}
}
// Usage
const factory = new CharacterFactory();
const a1 = factory.get('A');
const a2 = factory.get('A');
console.log(a1 === a2); // true (same object)
12. Proxy
Problem: Control access to object
Use when: Need lazy loading, access control, logging
class RealImage {
constructor(filename) {
this.filename = filename;
this.loadFromDisk();
}
loadFromDisk() { console.log(`Loading ${this.filename}`); }
display() { console.log(`Displaying ${this.filename}`); }
}
class ProxyImage {
constructor(filename) {
this.filename = filename;
this.realImage = null;
}
display() {
if (!this.realImage) {
this.realImage = new RealImage(this.filename);
}
this.realImage.display();
}
}
// Usage
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays
image.display(); // Only displays (already loaded)
Part 3: BEHAVIORAL PATTERNS
Focus: Object communication and responsibility
13. Command
Problem: Encapsulate request as object
Use when: Need to parameterize, queue, or log requests
class Light {
on() { console.log("Light ON"); }
off() { console.log("Light OFF"); }
}
class Command {
constructor(receiver) { this.receiver = receiver; }
execute() {}
}
class LightOnCommand extends Command {
execute() { this.receiver.on(); }
}
class Remote {
setCommand(cmd) { this.command = cmd; }
press() { this.command.execute(); }
}
// Usage
const light = new Light();
const onCommand = new LightOnCommand(light);
const remote = new Remote();
remote.setCommand(onCommand);
remote.press(); // Light ON
14. Iterator
Problem: Access elements sequentially without exposing structure
Use when: Need to traverse collection
class Playlist {
constructor() { this.songs = []; }
add(song) { this.songs.push(song); }
[Symbol.iterator]() {
let index = 0;
let songs = this.songs;
return {
next() {
if (index < songs.length) {
return { value: songs[index++], done: false };
}
return { done: true };
}
};
}
}
// Usage
const playlist = new Playlist();
playlist.add("Song 1");
playlist.add("Song 2");
for (let song of playlist) {
console.log(song); // Song 1, Song 2
}
15. Mediator
Problem: Reduce direct communication between objects
Use when: Many-to-many communication needed
class ChatRoom {
constructor() { this.users = []; }
add(user) {
this.users.push(user);
user.room = this;
}
send(message, from) {
this.users.forEach(user => {
if (user !== from) {
user.receive(message, from.name);
}
});
}
}
class User {
constructor(name) { this.name = name; }
send(message) { this.room.send(message, this); }
receive(message, from) {
console.log(`${this.name} got: "${message}" from ${from}`);
}
}
// Usage
const room = new ChatRoom();
const ali = new User("Ali");
const ahmed = new User("Ahmed");
room.add(ali);
room.add(ahmed);
ali.send("Hello!"); // Ahmed got: "Hello!" from Ali
16. Memento
Problem: Save and restore object state
Use when: Need undo/redo functionality
class Editor {
constructor() { this.content = ""; }
write(text) { this.content += text; }
save() { return new Memento(this.content); }
restore(m) { this.content = m.content; }
}
class Memento {
constructor(content) { this.content = content; }
}
// Usage
const editor = new Editor();
editor.write("Hello ");
const saved = editor.save();
editor.write("World");
console.log(editor.content); // Hello World
editor.restore(saved);
console.log(editor.content); // Hello
17. Observer
Problem: Notify multiple objects about state changes
Use when: One-to-many dependency needed
class NewsChannel {
constructor() {
this.subscribers = [];
this.news = "";
}
subscribe(sub) { this.subscribers.push(sub); }
setNews(news) {
this.news = news;
this.notify();
}
notify() {
this.subscribers.forEach(sub => sub.update(this.news));
}
}
class Subscriber {
constructor(name) { this.name = name; }
update(news) { console.log(`${this.name} got news: ${news}`); }
}
// Usage
const channel = new NewsChannel();
const ali = new Subscriber("Ali");
channel.subscribe(ali);
channel.setNews("Breaking: Design Patterns!");
// Ali got news: Breaking: Design Patterns!
18. State
Problem: Change behavior based on internal state
Use when: Object has many states with different behaviors
class TrafficLight {
constructor() { this.state = new RedState(); }
change() {
this.state.handle();
this.state = this.state.next();
}
}
class RedState {
handle() { console.log("RED: Stop"); }
next() { return new GreenState(); }
}
class GreenState {
handle() { console.log("GREEN: Go"); }
next() { return new YellowState(); }
}
class YellowState {
handle() { console.log("YELLOW: Wait"); }
next() { return new RedState(); }
}
// Usage
const light = new TrafficLight();
light.change(); // RED: Stop
light.change(); // GREEN: Go
light.change(); // YELLOW: Wait
19. Strategy
Problem: Select algorithm at runtime
Use when: Multiple algorithms for same task
class Payment {
constructor(strategy) { this.strategy = strategy; }
pay(amount) { this.strategy.pay(amount); }
}
class CreditCard {
pay(amount) { console.log(`Paid $${amount} with Credit Card`); }
}
class PayPal {
pay(amount) { console.log(`Paid $${amount} with PayPal`); }
}
class Crypto {
pay(amount) { console.log(`Paid $${amount} with Bitcoin`); }
}
// Usage
const payment = new Payment(new CreditCard());
payment.pay(100); // Paid $100 with Credit Card
payment.strategy = new PayPal();
payment.pay(50); // Paid $50 with PayPal
20. Template Method
Problem: Define skeleton with customizable steps
Use when: Steps are same but implementations differ
class DataProcessor {
process() {
this.loadData();
this.processData();
this.saveData();
}
loadData() { console.log("Loading data..."); }
saveData() { console.log("Saving data..."); }
}
class CSVProcessor extends DataProcessor {
processData() { console.log("Processing CSV data"); }
}
class JSONProcessor extends DataProcessor {
processData() { console.log("Processing JSON data"); }
}
// Usage
const csv = new CSVProcessor();
csv.process(); // Loading > Processing CSV > Saving
21. Visitor
Problem: Add operations to objects without modifying them
Use when: Many unrelated operations on same objects
class Car {
accept(visitor) { visitor.visitCar(this); }
}
class Bike {
accept(visitor) { visitor.visitBike(this); }
}
class TaxCalculator {
visitCar(car) { console.log("Car tax: $200"); }
visitBike(bike) { console.log("Bike tax: $50"); }
}
class InsuranceCalculator {
visitCar(car) { console.log("Car insurance: $500"); }
visitBike(bike) { console.log("Bike insurance: $100"); }
}
// Usage
const car = new Car();
const tax = new TaxCalculator();
car.accept(tax); // Car tax: $200
Quick Reference Table
| Need | Pattern |
|---|---|
| Need one instance only | Singleton |
| Need to create objects | Factory / Abstract Factory |
| Need to add features dynamically | Decorator |
| Need to notify others of changes | Observer |
| Need to choose algorithm at runtime | Strategy |
| Need to undo/redo actions | Command / Memento |
| Need to traverse a collection | Iterator |
| Need to simplify complex subsystem | Facade |
| Need to handle many similar objects | Flyweight |
| Need to control access to object | Proxy |
When to Use What?
- Need one instance only? → Singleton
- Need to create objects? → Factory / Abstract Factory
- Need to add features? → Decorator
- Need to notify others? → Observer
- Need to choose algorithm? → Strategy
- Need to undo actions? → Command / Memento
- Need to traverse collection? → Iterator
- Need to simplify complex system? → Facade
Conclusion
Design patterns are not templates to copy-paste, but guidelines to solve common problems. Master these 23 patterns, and you'll:
- Write more maintainable code
- Communicate better with other developers
- Solve design problems faster
- Build more flexible systems
Remember: Don't force patterns where they're not needed. Use them when they genuinely solve a problem! 🎯
Resources
Written by Kashaf Abdullah
Software Engineer | MERN Stack | Web Development
Top comments (1)
Really clean breakdown, love the quick reference table at the end — super useful to have bookmarked.
One thing I've learned though,
The tricky part isn't learning the patterns, it's knowing when to actually use them. I've seen codebases where everything is wrapped in factories and facades for no real reason, and it just makes the code harder to read.
What worked for me is waiting until I actually feel the pain like "why is this so hard to change" and then reaching for a pattern.
They should solve problems, not create new ones.
Also JS/TS already handles a few of these natively now iterators, modules, async/await.
Sometimes the language already has your back.
Great post Kashaf 🔥