How do I implement the Observer pattern in JavaScript?

How do I implement the Observer pattern in JavaScript?

The Observer pattern is a design pattern where an object, called the subject, maintains a list of dependents, called observers, and notifies them of state changes. Would you like a code example?

Yes, please provide a code example.

Here's a simple implementation:

class Subject {
    constructor() {
        this.observers = [];
    }
    addObserver(observer) {
        this.observers.push(observer);
    }
    removeObserver(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }
    notifyObservers(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class Observer {
    update(data) {
        console.log(`Observer received data: ${data}`);
    }
}

// Usage
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notifyObservers('Hello Observers!');

This code defines a Subject that can add, remove, and notify observers.

What are some real-world applications of the Observer pattern?

The Observer pattern is commonly used in event handling systems, like in UI frameworks where changes in data models need to update the UI automatically. It's also used in publish-subscribe systems, like messaging apps.