Pub Sub Pattern in JavaScript: What It Is and How It Works

The pub sub pattern in JavaScript is a way to let parts of a program communicate by sending and receiving messages without knowing about each other directly. Publishers send messages called events, and subscribers listen for these events to react, making code more organized and flexible.

How It Works

Imagine a newspaper system where writers publish articles and readers subscribe to topics they like. The writers don’t need to know who reads their articles, and readers get updates only on topics they care about. This is how the pub sub pattern works in JavaScript.

In this pattern, a publisher sends out messages or events without knowing who will receive them. Meanwhile, subscribers register to listen for specific events and react when those events happen. This separation helps keep code clean and easy to maintain because parts don’t depend directly on each other.

Example

This example shows a simple pub sub system where one part publishes a message and another part listens and responds.

javascript

class PubSub {
  constructor() {
    this.events = {};
  }

  subscribe(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  publish(event, data) {
    if (!this.events[event]) return;
    this.events[event].forEach(callback => callback(data));
  }
}

const pubsub = new PubSub();

// Subscriber listens for 'message' event
pubsub.subscribe('message', (data) => {
  console.log('Received:', data);
});

// Publisher sends a 'message' event
pubsub.publish('message', 'Hello, Pub Sub!');

Output

Received: Hello, Pub Sub!

When to Use

Use the pub sub pattern when you want different parts of your JavaScript app to communicate without being tightly connected. It’s great for event handling, like user actions or data updates, especially in complex apps or when working with modules.

Real-world uses include chat apps where messages are broadcast to many users, or UI components that update independently when data changes. It helps keep your code organized and easier to change later.

Key Points

• Publishers send events without knowing who listens.
• Subscribers listen for events and react when they occur.
• Helps decouple code parts for better organization.
• Common in event-driven and modular JavaScript apps.

Key Takeaways

The pub sub pattern separates event senders and receivers for cleaner code.

Publishers emit events, and subscribers listen and respond to them.

It is useful for managing events in complex or modular JavaScript applications.

This pattern improves flexibility and reduces direct dependencies between code parts.