Day 42

Design Patterns — Observer Pattern

11 min
JavaScript 100 Days

Observer pattern mein ek subject multiple observers ko notify karta hai jab state change hoti hai. Yahi pattern Node.js EventEmitter, React state updates, aur browser DOM events ke andar use hota hai.

Observer Pattern Implementation

Custom EventEmitter banao.

observer.js
javascript
class EventEmitter {
  constructor() {
    this.events = {};
  }
  
  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
    return this; // chaining ke liye
  }
  
  off(event, listener) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(l => l !== listener);
    }
  }
  
  emit(event, ...args) {
    this.events[event]?.forEach(listener => listener(...args));
  }
}

// Usage
const store = new EventEmitter();

store.on("userLogin", (user) => {
  console.log(`Welcome, ${user.name}!`);
});

store.on("userLogin", (user) => {
  console.log(`Logging login for ${user.email}`);
});

store.emit("userLogin", { name: "Zohaib", email: "z@test.com" });
// Both listeners fire!

🎯 Practice Challenge

Stock price tracker banao. StockMonitor mein subscribe karo — agar price 10% se zyada change ho to alert karo.