What is the Observer pattern?

Question

Accepted Answer

The **Observer** pattern defines a **one-to-many dependency** where multiple objects (observers) are notified automatically when another object (the subject) changes state. It enables decoupled, event-driven communication — widely used in UIs, event systems, and reactive programming.

## What the Observer pattern does

```text
OBSERVER → a SUBJECT maintains a list of OBSERVERS and NOTIFIES them on state changes:
  → observers SUBSCRIBE to the subject
  → when the subject changes → it notifies ALL subscribed observers automatically
  → observers react to the notification (update themselves)
→ one-to-many: one subject, many observers; DECOUPLED (subject doesn't know observer details)
```

## Example

```js
class Subject {
  observers = [];
  subscribe(obs) { this.observers.push(obs); }
  notify(data) { this.observers.forEach(obs => obs.update(data)); }  // notify all
}
// observers implement update(); they subscribe and get notified on changes
subject.subscribe({ update: (data) => console.log('notified:', data) });
subject.notify('state changed');   // all observers are called
```

## Where it's used (very common)

```text
✓ UI EVENTS → event listeners (click handlers) are observers of UI events
✓ REACTIVE programming / state management → components observe state changes (re-render)
✓ PUB/SUB and event systems → subscribers react to published events
✓ MVC → views observe the model; notifications (e.g. RxJS, signals, event emitters)
→ one of the most widely-used patterns (event-driven systems everywhere)
```

## Why it matters

Understanding the Observer pattern is valuable because it's **one of the most widely-used patterns**, underlying event-driven and reactive systems everywhere, so it's important, broadly-applicable design knowledge.

The Observer pattern — a one-to-many dependency where a subject notifies its observers automatically when its state changes — enables **decoupled, event-driven communication**, which is fundamental to how much modern software works.

Understanding the mechanism (observers subscribing to a subject, the subject notifying all of them on changes, observers reacting — with the subject decoupled from observer details) is the foundational knowledge.

Most importantly, understanding **where it's used** reveals its pervasiveness: **UI events** (event listeners and click handlers are observers), **reactive programming and state management** (components observing state changes to re-render — central to frameworks like React), **pub/sub and event systems** (subscribers reacting to events), and MVC (views observing models), plus reactive libraries (RxJS, signals, event emitters).

Recognizing that the Observer pattern underlies these ubiquitous mechanisms makes it one of the most practically important patterns to understand, since event-driven and reactive programming are everywhere in modern software (UIs, state management, event systems).

Understanding it helps you recognize and reason about these patterns throughout the code you work with.

Since the Observer pattern is one of the most widely-used patterns (underlying UI events, reactive programming, state management, and pub/sub — pervasive in modern software) and enables the decoupled, event-driven communication central to how much software works, and since understanding it helps you recognize and use these ubiquitous mechanisms, understanding the Observer pattern is valuable, broadly-applicable design knowledge — one of the most important and widely-used patterns, underlying the event-driven and reactive systems pervasive in modern software, and essential for understanding how UIs, state management, and event systems work.