All 10 Design Patterns in JavaScript questions
More in Design Patterns in JavaScript
What is the Module pattern and what problem does it solve? What is the Singleton pattern and how is it implemented in JavaScript? What is the Factory pattern, and how does it differ from calling a class constructor directly? How is the Decorator pattern typically implemented in JavaScript? What is the Strategy pattern and how does it help avoid large if/else chains? How do you implement the Proxy pattern using JavaScript's built-in Proxy object? What is the Command pattern and where is it useful in JavaScript apps? What is the Adapter pattern and why is it useful when integrating third-party code? When is it a mistake to force a 'classic' design pattern into idiomatic JavaScript?
Advertisement
Back to results for “Classes & Class Syntax”
JavaScript › Design Patterns in JavaScript

How do you implement the Observer pattern in JavaScript?

Intermediate

Answer

Maintain a list of subscriber callback functions; provide a subscribe() method to add them and a notify() (or emit()) method that loops through and calls each one when an event occurs — this decouples the event source from its consumers.
class EventEmitter {
  #listeners = [];
  subscribe(fn) { this.#listeners.push(fn); }
  emit(data) { this.#listeners.forEach(fn => fn(data)); }
}
Real-world example Powering a custom pub-sub system for decoupled communication between UI components.

Common follow-ups: How does Node's built-in EventEmitter class relate to this pattern?

Classes & Class Syntax
All 10 Design Patterns in JavaScript questions