Observer Design Pattern

The Observer Pattern is a behavioural design pattern where an object (Subject) maintains a list of dependents (Observers) and automatically notifies them of state changes.

Observer pattern has the following characteristics:

1. One-to-Many Relationship:

   A subject (observable) can have multiple observers listening for updates.

2. Decoupled Communication:

   Observers and subjects are loosely coupled. The subject doesn’t know the concrete implementation of observers.

3. Event-Driven Mechanism:

   Observers subscribe to the subject and react when they receive notifications.

4. Push or Pull Mechanism:

   The subject can either push the update to observers or allow them to pull the required data.

5. Scalability:

   New observers can be added dynamically without modifying the subject.

Practical Example

Stock Price Notification using the Observer Pattern in Typescript

Step 1: Define the Observer Interface

Observers define the contract for receiving updates.

Observer interface forces all observers (subscribers) to implement an update method.The update method ensures that when the subject (StockExchange in Step 3 below) notifies observers, they receive the stock symbol and price.

Decoupled Communication - The Observer interface standardises how updates are received but doesn’t dictate how each observer will react.

One-to-Many Relationship - Many observers (investors) can implement this interface and subscribe to updates.

interface Observer {
  update(stockSymbol: string, price: number): void;
}

Step 2: Define the Subject Interface

The subject maintains a list of observers and notifies them about updates.

The Subject interface declares methods for:

• attaching observers (subscribing).

• detaching observers (unsubscribing).

• notifying observers when a change happens.

Loose Coupling - The subject (StockExchange) doesn’t know who the observers are—it only interacts through the Observer interface.

Scalability - We can add/remove observers dynamically without modifying the subject’s core logic.

// Subject interface
interface Subject {
  attach(observer: Observer): void;
  detach(observer: Observer): void;
  notify(stockSymbol: string, price: number): void;
}

Step 3: Implement the Concrete Subject (Stock Exchange)

The StockExchange maintains a list of observers (investors).

When a stock price updates, it calls notify(), looping through all observers and calling update().

class StockExchange implements Subject {
  private observers: Observer[] = [];

  attach(observer: Observer): void {
    this.observers.push(observer);
  }

  detach(observer: Observer): void {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(stockSymbol: string, price: number): void {
    for (const observer of this.observers) {
      observer.update(stockSymbol, price);
    }
  }

  // Simulate stock price updates
  updateStockPrice(stockSymbol: string, price: number): void {
    console.log(`Stock Exchange: ${stockSymbol} updated to $${price}`);
    this.notify(stockSymbol, price);
  }
}

Investors subscribe to stock updates and react to price changes.

Event-Driven Mechanism - The stock price update triggers an automatic notification to all observers.

Push Mechanism - The StockExchange pushes updates to all observers instead of making them request updates.

One-to-Many Relationship - Multiple investors receive updates from a single stock exchange.

Step 4: Implement Concrete Observers (Investors)

class Investor implements Observer {
  constructor(private name: string) {}

  update(stockSymbol: string, price: number): void {
    console.log(`${this.name} received update: ${stockSymbol} is now $${price}`);
  }
}

The Investor class implements the Observer interface.

Every investor reacts to stock price updates with a custom message.

Decoupled Communication - The StockExchange doesn’t know how investors will react—it only sends notifications.

Scalability - We can create more investors without modifying the StockExchange.

Step 5: Demonstrate the Observer Pattern

function main() {

    // Create a stock exchange
const stockExchange = new StockExchange();

// Create investors
const investor1 = new Investor("Markandey Sanap");
const investor2 = new Investor("Gagan Pratap");

// Investors subscribe to stock updates
stockExchange.attach(investor1);
stockExchange.attach(investor2);

// Stock prices change
stockExchange.updateStockPrice("Larsen", 950);
stockExchange.updateStockPrice("KotakBank", 1899);

// Gagan Pratap unsubscribes
stockExchange.detach(investor2);

// Another stock update
stockExchange.updateStockPrice("Larsen", 955);

}
main();

Execution Flow

1. Markandey Sanap and Gagan Pratap (both investors) subscribe to the StockExchange.

2. Larsen and KotakBank prices update → The two investors in ( 1 ) get notified.

3. Gagan Pratap unsubscribes (detached).

4. Larsen price updates → Only Markandey Sanap gets notified.

Salient Features of the Observer Pattern we have discussed so far

Loose Coupling: StockExchange doesn’t care who subscribes or unsubscribe

Scalability: We can add or remove investors at runtime without changing the subject.

Event-Driven Mechanism : Updates happen automatically when a stock price changes.

The Observer Pattern is great for real-time updates and event-driven systems. It enables:

1. Decoupled architecture → Observers and subjects work independently.

2. Dynamic subscriptions → Observers can subscribe/unsubscribe anytime.

3. Automatic notifications → No need for manual polling.

The GITHUB code link is here