Observer Pattern

Introduction

In the world of software design, patterns emerge as solutions to common problems. The Observer Pattern is one such pattern that addresses a specific challenge in object-oriented programming: defining a dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

This pattern is particularly useful in scenarios where you have a one-to-many relationship between objects, and you want to ensure that the dependent objects are always synchronized with the subject's state. The Observer Pattern promotes loose coupling between the subject and its observers, making the system more modular and easier to maintain.

Concept

The Observer Pattern consists of two main components:

1. Subject: This is the object being observed. It maintains a list of its dependents (observers) and provides methods for adding or removing them. When the state of the subject changes, it notifies all registered observers.
2. Observer: These are the objects that observe the subject. They implement an update method that gets called whenever the subject's state changes.

The key idea is to decouple the subject from its observers so that the subject does not need to know anything about the specific types of observers. This allows for greater flexibility and scalability in the system.

Examples

Let's dive into a practical example to understand how the Observer Pattern works. We'll create a simple weather station application where multiple displays (observers) are updated whenever the temperature or humidity changes (subject).

Step 1: Define the Subject Interface

First, we need to define an interface for the subject that includes methods for registering and removing observers, as well as notifying them of state changes.

1// Subject.js
2class Subject {
3constructor() {
4  this.observers = [];
5}
6 
7registerObserver(observer) {
8  this.observers.push(observer);
9}
10 
11removeObserver(observer) {
12  const index = this.observers.indexOf(observer);
13  if (index > -1) {
14    this.observers.splice(index, 1);
15  }
16}
17 
18notifyObservers() {
19  for (const observer of this.observers) {
20    observer.update(this.temperature, this.humidity);
21  }
22}
23}
24 
25export default Subject;

Step 2: Implement the Concrete Subject

Next, we create a concrete implementation of the subject that maintains the weather data and notifies observers when it changes.

1// WeatherData.js
2import Subject from './Subject';
3 
4class WeatherData extends Subject {
5constructor() {
6  super();
7  this.temperature = 0;
8  this.humidity = 0;
9}
10 
11setMeasurements(temperature, humidity) {
12  this.temperature = temperature;
13  this.humidity = humidity;
14  this.notifyObservers();
15}
16}
17 
18export default WeatherData;

Step 3: Define the Observer Interface

Now, we define an interface for observers that includes an update method.

1// Observer.js
2class Observer {
3update(temperature, humidity) {
4  // This method should be overridden by concrete observers
5}
6}
7 
8export default Observer;

Step 4: Implement Concrete Observers

Finally, we create concrete implementations of the observer that display the weather data.

1 

Step 5: Putting It All Together

Now that we have our subject and observers in place, let's create an instance of the weather station and simulate some changes.

1// main.js
2import WeatherData from './WeatherData';
3import CurrentConditionsDisplay from './CurrentConditionsDisplay';
4import StatisticsDisplay from './StatisticsDisplay';
5 
6const weatherData = new WeatherData();
7const currentDisplay = new CurrentConditionsDisplay(weatherData);
8const statisticsDisplay = new StatisticsDisplay(weatherData);
9 
10weatherData.setMeasurements(80, 65); // Output: Current conditions: 80F degrees and 65% humidity
11                                   //         Statistics: Avg/Max/Min temperature = 80/80/80
12 
13weatherData.setMeasurements(82, 70); // Output: Current conditions: 82F degrees and 70% humidity
14                                   //         Statistics: Avg/Max/Min temperature = 82/82/82

What's Next?

In the next section, we'll explore another behavioral pattern called the State Pattern. The State Pattern allows an object to alter its behavior when its internal state changes. This can be particularly useful for managing complex state transitions in a clean and maintainable way.

Stay tuned!