Observer Pattern

1 min read
Rapid overview

Observer Pattern โ€” Event subscriptions

Observers subscribe to changes from a subject and react when it emits updates.


Example (TypeScript)

type Listener<T> = (value: T) => void;

class Observable<T> {
  private listeners = new Set<Listener<T>>();
  subscribe(listener: Listener<T>) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  }
  next(value: T) {
    this.listeners.forEach((listener) => listener(value));
  }
}

const prices = new Observable<number>();
const unsubscribe = prices.subscribe((value) => console.log('price', value));
prices.next(42);
unsubscribe();

Why it matters

  • Decouples event producers from consumers.
  • Powers UI state updates, event buses, and reactive streams.

Questions & Answers

Q: When do you use Observer?

A: When multiple consumers react to changes without tight coupling.

Q: Whatโ€™s a common pitfall?

A: Memory leaks from forgetting to unsubscribe.