🧠 When to Use Which Design Pattern in JavaScript

Choosing the right design pattern depends on the problem you're solving, not on the pattern itself. Patterns are just tools — and like all tools, their value lies in applying them at the right time.

🧭 Step-by-Step Guide: How to Choose the Right Design Pattern

1. ✅ Understand the Problem Domain First

Ask yourself:

• Are you managing object creation?
• Are you restructuring or connecting objects?
• Are you responding to runtime behavior changes?
• Do you need encapsulation or reusability?

These lead you to the right pattern category:

2. 🔍 Map Real-World Scenarios to Common Patterns

3. 🧪 Evaluate Trade-offs and Codebase Needs

Ask:

• 🔄 Reusability: Do I want to share this logic?
• 🧪 Testability: Can I mock or isolate this easily?
• ⚙️ Complexity: Is this overengineering or adding clarity?
• 🚀 Performance: Do I need to optimize memory or execution?

You're absolutely right — the article structure is solid, but the "Quick Examples by Use Case" section only includes a subset of the full list of patterns mentioned. Let's extend that section to include examples for all 18 patterns covered in the summary table.

🧩 Quick Examples by Use Case

🔹 Use the Factory Pattern when:

function createUser(name, role) {
  return { name, role };
}

🔹 Use the Builder Pattern when:

function CarBuilder() {
  const car = {};
  return {
    setModel: m => (car.model = m, this),
    setColor: c => (car.color = c, this),
    build: () => car
  };
}

const myCar = CarBuilder().setModel('Tesla').setColor('Red').build();

🔹 Use the Singleton Pattern when:

const Settings = (() => {
  let instance;
  return {
    getInstance: () => instance || (instance = { theme: 'dark' })
  };
})();

🔹 Use the Module Pattern when:

const Counter = (() => {
  let count = 0;
  return {
    increment: () => ++count,
    value: () => count
  };
})();

🔹 Use the Observer Pattern when:

const createPubSub = () => {
  const subs = [];
  return {
    subscribe(fn) { subs.push(fn); },
    notify(data) { subs.forEach(fn => fn(data)); }
  };
};

🔹 Use the Strategy Pattern when:

const filters = {
  byAge: a => a.age > 18,
  byName: a => a.name.startsWith('A')
};

function filterUsers(users, strategy) {
  return users.filter(filters[strategy]);
}

🔹 Use the Command Pattern when:

function Command(action, data) {
  return () => action(data);
}

const log = Command(console.log, 'Run');
log();

🔹 Use the Adapter Pattern when:

function OldAPI() {
  this.get = () => 'old format';
}

function Adapter(oldApi) {
  return {
    fetch: () => oldApi.get()
  };
}

const adapted = Adapter(new OldAPI());

🔹 Use the Decorator Pattern when:

function addLogging(obj) {
  return {
    ...obj,
    log: () => console.log('Logging...')
  };
}

🔹 Use the Facade Pattern when:

function fetchData() {
  return fetch('/api').then(res => res.json());
}

const ApiFacade = { getData: fetchData };

🔹 Use the Proxy Pattern when:

const user = { name: 'Tushar' };
const proxy = new Proxy(user, {
  get: (target, prop) => prop in target ? target[prop] : 'Not found'
});

🔹 Use the Chain of Responsibility Pattern when:

function handler1(req, next) {
  if (req === 'pass') next(req);
}

function handler2(req) {
  console.log('Handled:', req);
}

handler1('pass', handler2);

🔹 Use the Memento Pattern when:

function createEditor() {
  let content = '';
  const history = [];
  return {
    type: txt => content += txt,
    save: () => history.push(content),
    undo: () => content = history.pop() || '',
    getContent: () => content
  };
}

🔹 Use the Mediator Pattern when:

function Mediator() {
  const channels = {};
  return {
    subscribe: (event, fn) => {
      (channels[event] = channels[event] || []).push(fn);
    },
    publish: (event, data) => {
      (channels[event] || []).forEach(fn => fn(data));
    }
  };
}

🔹 Use the State Pattern when:

function Light() {
  let state = 'off';
  return {
    toggle: () => state = (state === 'off' ? 'on' : 'off'),
    status: () => state
  };
}

🔹 Use the Visitor Pattern when:

function accept(visitor, node) {
  if (node.type === 'Text') visitor.visitText(node);
  if (node.type === 'Element') visitor.visitElement(node);
}

🔹 Use the Composite Pattern when:

function Node(name) {
  return {
    name,
    children: [],
    add(child) { this.children.push(child); },
    print(indent = '') {
      console.log(indent + this.name);
      this.children.forEach(c => c.print(indent + '  '));
    }
  };
}

🔹 Use the Flyweight Pattern when:

const CircleFactory = (() => {
  const cache = {};
  return {
    getCircle: color => cache[color] || (cache[color] = { color })
  };
})();

📌 Summary Cheat Sheet

🧠 General Advice

1. Let the problem drive the pattern — don’t force it.
2. Refactor into patterns — write code naturally, optimize later.
3. Use patterns to reduce complexity, not increase it.

📚 Final Tip

Design patterns are best learned through real coding experience. Keep solving problems, and you'll begin to recognize patterns as intuitive solutions, not abstract theory.