Behavioral

Observer

Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

Intent

Establish a subscription mechanism that lets multiple objects listen for and react to events or state changes occurring in another object, without tightly coupling the publisher to its subscribers.

Problem

You have an object whose state changes are relevant to other objects, but you do not want to hard-code those dependencies. Polling for changes is wasteful, and direct method calls create rigid coupling between the subject and every interested party.

Solution

Define a Subject that maintains a list of Observers and provides methods to attach, detach, and notify them. When the Subject's state changes, it iterates through the list and calls an update method on each Observer. Observers register themselves with the Subject and implement a common interface so the Subject does not need to know their concrete types.

Participants

Subject — maintains a list of observers and sends notifications on state change
Observer — defines an update interface for objects that should be notified
ConcreteSubject — stores state of interest and triggers notification when state changes
ConcreteObserver — implements the update interface to keep its state consistent with the subject

Advantages

Loose coupling between the subject and its observers — the subject only knows the observer interface
Support for broadcast communication — any number of observers can subscribe
Observers can be added or removed at runtime without modifying the subject
Encourages a clean separation between the core domain model and the presentation or side-effect layers

Disadvantages

Notification order is not guaranteed, which can cause subtle bugs if observers depend on each other
Memory leaks can occur if observers are not properly detached (lapsed listener problem)
Cascade updates can be expensive or cause unexpected side effects when observers trigger further notifications
Debugging can be harder because the flow of control is implicit rather than explicit

Real-World Analogy

A newspaper subscription service works exactly like the Observer pattern. The publisher (Subject) does not need to know who the subscribers (Observers) are or what they do with the paper. Subscribers sign up and receive every new edition automatically. When they lose interest, they cancel their subscription and stop receiving issues — all without the publisher changing its printing process.

Use Cases

GUI event handling — buttons, inputs, and other widgets notify listeners of user actions
Model-View synchronization in MVC/MVVM architectures
Real-time data feeds such as stock tickers, chat messages, or sensor readings
Pub/sub messaging systems and event buses
Reactive streams and change-detection systems (e.g., RxJS, MobX, Vue reactivity)

Code Examples

observer.ts

// Observer interface
interface Observer<T> {
  update(event: string, data: T): void;
}

// Event data
interface UserData {
  id: number;
  email: string;
}

// Subject that manages subscriptions and notifications
class EventEmitter<T> {
  private observers: Set<Observer<T>> = new Set();

  subscribe(observer: Observer<T>): void {
    this.observers.add(observer);
  }

  unsubscribe(observer: Observer<T>): void {
    this.observers.delete(observer);
  }

  emit(event: string, data: T): void {
    for (const observer of this.observers) {
      observer.update(event, data);
    }
  }
}

// Concrete observer: logs events to the console
class Logger implements Observer<UserData> {
  update(event: string, data: UserData): void {
    console.log(`[Logger] ${event}: user #${data.id} (${data.email})`);
  }
}

// Concrete observer: sends a welcome email
class EmailNotifier implements Observer<UserData> {
  update(event: string, data: UserData): void {
    console.log(`[EmailNotifier] Sending welcome email to ${data.email}`);
  }
}

// Concrete subject: emits events when users register
class UserService {
  private emitter = new EventEmitter<UserData>();

  subscribe(observer: Observer<UserData>): void {
    this.emitter.subscribe(observer);
  }

  unsubscribe(observer: Observer<UserData>): void {
    this.emitter.unsubscribe(observer);
  }

  register(id: number, email: string): void {
    const user: UserData = { id, email };
    console.log(`UserService: registered user #${id}`);
    this.emitter.emit("user_registered", user);
  }
}

// Usage
const userService = new UserService();
const logger = new Logger();
const emailNotifier = new EmailNotifier();

userService.subscribe(logger);
userService.subscribe(emailNotifier);

userService.register(1, "alice@example.com");
// UserService: registered user #1
// [Logger] user_registered: user #1 (alice@example.com)
// [EmailNotifier] Sending welcome email to alice@example.com

A UserService event emitter that notifies Logger and EmailNotifier observers when a user_registered event fires, demonstrating typed subscriptions and observer management.

Related Patterns