Observer

Observer is a behavioral design pattern that lets you define a subscription mechanism to notify multiple objects about any events that happen to the object they’re observing.

The Observer pattern is a behavioral design pattern where an object, known as the subject, maintains a list of dependents, called observers, and notifies them of any changes in state, usually by calling one of their methods.

This pattern is commonly used to implement distributed event handling systems.

In JavaScript, you can implement the Observer pattern using plain JavaScript or libraries/frameworks like RxJS or even built-in features like addEventListener.

// Subject (or Observable)
class NewsAgency {
  constructor() {
    this.news = [];
    this.subscribers = [];
  }

  // Method to add subscribers
  subscribe(observer) {
    this.subscribers.push(observer);
  }

  // Method to remove subscribers
  unsubscribe(observer) {
    this.subscribers = this.subscribers.filter(subscriber => subscriber !== observer);
  }

  // Method to notify subscribers about new news
  notify() {
    this.subscribers.forEach(subscriber => subscriber.update(this.news));
  }

  // Method to add news
  addNews(newsItem) {
    this.news.push(newsItem);
    this.notify();
  }
}

// Observer
class NewsSubscriber {
  constructor(name) {
    this.name = name;
  }

  // Method to update with latest news
  update(news) {
    console.log(`${this.name} received latest news: ${news}`);
  }
}

// Creating instances of subject and observers
const agency = new NewsAgency();
const subscriber1 = new NewsSubscriber('Subscriber 1');
const subscriber2 = new NewsSubscriber('Subscriber 2');

// Subscribing observers to the subject
agency.subscribe(subscriber1);
agency.subscribe(subscriber2);

// Adding news
agency.addNews('New technology breakthrough!');
// Output:
// Subscriber 1 received latest news: New technology breakthrough!
// Subscriber 2 received latest news: New technology breakthrough!

// Unsubscribing one observer
agency.unsubscribe(subscriber2);

// Adding more news
agency.addNews('Important political update!');
// Output:
// Subscriber 1 received latest news: Important political update!

In this example:

• NewsAgency is the subject (or observable) that holds news and manages subscribers.

• NewsSubscriber is the observer that receives news updates.

• subscribe, unsubscribe, and notify methods are used by the subject to manage subscribers and notify them of changes.

• When news is added using addNews, it triggers the notify method, which informs all subscribers about the latest news.

• Observers (NewsSubscriber) implement the update method, which is called by the subject when there are updates.

This demonstrates how the Observer pattern allows for decoupling between subjects and observers, enabling a flexible notification system.