JavaScript Design Patterns: Factory, Singleton, and Observer

JavaScript Design Patterns: Factory, Singleton, and Observer | DevPrep

function createNotification(type, message) {
  const base = { message, timestamp: Date.now(), read: false };
  switch (type) {
    case "error": return { ...base, icon: "❌", priority: "high", color: "red" };
    case "warning": return { ...base, icon: "⚠️", priority: "medium", color: "yellow" };
    case "success": return { ...base, icon: "✅", priority: "low", color: "green" };
    default: return { ...base, icon: "ℹ️", priority: "low", color: "blue" };
  }
}

class Database {
  static #instance = null;
  #connection = null;
  
  static getInstance() {
    if (!Database.#instance) {
      Database.#instance = new Database();
    }
    return Database.#instance;
  }
  
  connect(url) {
    if (!this.#connection) {
      this.#connection = createConnection(url);
    }
    return this.#connection;
  }
}

class EventEmitter {
  #listeners = new Map();
  
  on(event, callback) {
    if (!this.#listeners.has(event)) this.#listeners.set(event, new Set());
    this.#listeners.get(event).add(callback);
    return () => this.#listeners.get(event).delete(callback); // unsubscribe
  }
  
  emit(event, ...args) {
    this.#listeners.get(event)?.forEach(cb => cb(...args));
  }
}

const bus = new EventEmitter();
const unsub = bus.on("userLoggedIn", (user) => console.log(user));
bus.emit("userLoggedIn", { name: "Rahul" });
unsub(); // cleanup

JavaScript Design Patterns: Factory, Singleton, and Observer

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Factory Pattern

Singleton Pattern

Observer Pattern

When to Use What