ReviseAlgo Logo

Design Patterns

Mediator Pattern

Master the Mediator Pattern in JavaScript. Learn to centralize complex communications between objects, reduce coupling, and design clean message routers.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

The Mediator Pattern is a behavioral design pattern that reduces coupling between objects by forcing them to communicate via a central mediator object instead of interacting with each other directly.

2. Why It Matters

In complex interfaces (like a chat room or dashboard grid), multiple components need to update each other. If every component holds references and calls methods on every other component, it creates a tangled web of dependencies (often called spaghetti code). A mediator centralizes these communications, decoupling components.

3. Real-World Analogy

Think of an Airport Air Traffic Control Tower:

  • Direct Communication (Spaghetti code): Pilots flying different planes talk to each other directly to coordinate landings: "Hey plane A, are you landing? Yes, I'm landing. Okay, I'll wait." This is highly dangerous and chaotic.
  • Mediator (Control Tower): Pilots do not talk to each other directly. Instead, they communicate exclusively with the Control Tower (the Mediator). The tower receives landing requests, determines the queue, and instructs planes when to land, centralizing communications.

4. Implementing the Mediator

Here is an implementation of a chat room using the Mediator pattern:

5. Practical Example

This script demonstrates using a Mediator to coordinate interactions between form inputs inside a control panel UI:

6. Common Mistakes

  • • Creating a God Object mediator: If a mediator coordinates too many components, it can grow massive and collect too many responsibilities, becoming a monolithic God Object that is difficult to maintain. Keep mediators focused and split them into smaller controllers when needed.

7. Quick Quiz

Q1: What is the primary role of the Mediator object in software architecture?

A) To store data locally inside components

B) To centralize communications between objects, reducing direct coupling

Answer: B — The Mediator pattern centralizes communication pathways, allowing components to interact with the mediator instead of holding references to each other directly.

8. Scenario-Based Challenge

The Centralized Control Panel Coordinator:

An admin panel contains multiple components: a search input, a user list grid, and a stats counter widget. When a user searches, the list must filter, and the stats widget must update. Design a mediator DashboardMediator to coordinate these updates.

9. Debugging Exercise

Explain why this direct components communication structure creates a circular reference bug, and how a mediator resolves it:

class ComponentA {
  constructor(sibling) { this.sibling = sibling; }
  update() {
    this.sibling.notify(); // direct call
  }
}

class ComponentB {
  constructor(sibling) { this.sibling = sibling; }
  notify() {
    this.sibling.update(); // circular dependency!
  }
}
View Solution

Diagnosis: The components hold direct references to each other. Calling notify() and update() triggers circular references, leading to infinite call stacks and direct coupling.

Fix: Route all events through a central mediator class that handles updates without creating circular references between components:

class ComponentMediator {
  constructor(a, b) {
    this.compA = a;
    this.compB = b;
    a.mediator = this;
    b.mediator = this;
  }


handleEvent(sender, eventName) {
    if (sender === this.compA && eventName === 'change') {
      this.compB.notify(); // Mediator updates B without B needing to know A
    }
  }
}

10. Interview Questions

🟢 Q1: Compare the Mediator Pattern and the Publish-Subscribe (PubSub) pattern.

Answer:
• Mediator Pattern: Centralizes communication between a specific group of components. The mediator often holds references to the components and coordinates their actions explicitly.
• Publish-Subscribe: A more decoupled, generic pattern. Publishers and subscribers communicate anonymously over event channels without knowing about each other or the channel coordinator's logic.
Use the Mediator pattern to coordinate complex interactions between a fixed, related set of components. Use PubSub for global, application-wide event dispatching.

11. Production Considerations

  • • Keep it Focused: Avoid creating a single "global mediator" that manages all events on the site. Instead, create localized mediators for specific modules or pages, keeping controllers clean and maintainable.