Mediator Pattern in JavaScript: Practical JS Example

The Mediator pattern routes collaboration through a central object so peers talk to the mediator instead of importing each other directly—handy when a UI or module graph would otherwise tangle into bidirectional imports. Think “air traffic control”: components send intent upward, the mediator decides who reacts next. When you need broadcast notifications instead, compare with the Observer pattern in JavaScript.

Environment: Node.js v20.18.2. After each runnable snippet, the following paragraph states the expected console output (order and values).

What Is the Mediator Pattern?

A mediator object receives messages from one part of an application and forwards them to interested parts. This reduces direct coupling between components.

Without a mediator, component A may call component B directly. With a mediator, component A sends a message to the mediator, and the mediator decides what should happen next.

Method 1: Create a Simple JavaScript Mediator

const channel = {
  handlers: {},
  on(event, fn) {
    (this.handlers[event] ??= []).push(fn);
  },
  send(event, message) {
    this.handlers[event]?.forEach((fn) => fn(message));
  },
};

channel.on("order", (message) => {
  console.log(message);
});

channel.send("order", "created");

You should see one line logging created.

The sender does not need to know which function receives the message. It only sends an order event to the mediator.

Method 2: Use a Mediator Between Components

function inventory(mediator) {
  mediator.on("order", (status) => {
    console.log(`Inventory saw order: ${status}`);
  });
}

function checkout(mediator) {
  return {
    submit() {
      mediator.send("order", "created");
    },
  };
}

The checkout component does not import or call inventory directly. Both depend on the mediator contract.

Mediator Pattern vs Observer Pattern

The Mediator and Observer patterns are related, but they are not identical.

A mediator can internally use observer-style subscriptions, but its role is broader: it can contain workflow rules and route messages between multiple components.

Common Questions About Mediator Pattern JavaScript

When should I use a mediator in JavaScript?

Use it when multiple components need to communicate but direct references would create tangled dependencies.

Is an event bus a mediator?

It can be. A simple event bus is often a lightweight mediator when it centralizes message routing.

What is the downside of mediator pattern?

Too much logic can accumulate inside the mediator, making it a large central object if you do not keep responsibilities clear.

Summary

The JavaScript Mediator pattern helps decouple components by routing communication through a central object. It works well for UI components, workflow coordination, forms, modules, and event-driven code. Use it when direct component-to-component calls are becoming hard to maintain, and keep mediator responsibilities focused so it does not become a catch-all object.

Official Documentation

• Refactoring.Guru: Mediator pattern