> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/javascript-interview-questions/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/javascript-interview-questions/question-85.md).

# Question 85

### Question

Explain how to implement a basic pub/sub system from scratch.

### Answer

Here's how to build a simple pub/sub (publish-subscribe) system in JavaScript, allowing components to communicate asynchronously:

**Core Concepts:**

* **Publisher:** An object that emits events or "messages" (the "publication").
* **Subscriber:** An object that listens for specific events and executes code when they occur (the "subscription").

**Implementation:**

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

  // Subscribe to an event
  subscribe(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = []; // Create a new list for this event if it doesn't exist
    }
    this.events[eventName].push(callback); 
  }

  // Publish an event (trigger notifications)
  publish(eventName, data) {
    if (this.events[eventName]) {
      const subscribers = this.events[eventName]; // Get the list of subscribers for this event
      subscribers.forEach(callback => callback(data)); // Call each subscriber's function with the provided data
    }
  }
}

// Usage Example:

const pubSub = new PubSub();

// Subscriber 1
pubSub.subscribe('message', (msg) => {
  console.log("Subscriber 1 received:", msg); 
});

// Subscriber 2
pubSub.subscribe('message', (msg) => {
  console.log("Subscriber 2 received:", msg); 
});

// Publisher
pubSub.publish('message', 'Hello from the publisher!'); 



```

**Explanation:**

1. **`PubSub` Class:** This class manages all the events and subscribers.
   * `events`: An object where keys are event names (strings) and values are arrays of callback functions that listen for those events.
2. **`subscribe(eventName, callback)`:**
   * Takes an `eventName` and a `callback` function as arguments.
   * If the event doesn't exist yet, it creates a new array in the `events` object to store subscribers for that event.
   * Adds the `callback` to the appropriate array of subscribers.
3. **`publish(eventName, data)`:**
   * Takes an `eventName` and some optional `data` as arguments.
   * Checks if there are any subscribers for the given `eventName`.
   * If there are, it iterates through the array of subscribers and calls each callback function with the provided `data`.

**Key Points:**

* **Asynchronous Communication:** Subscribers don't execute immediately when an event is published; they run later when their respective callbacks are called.
* **Loose Coupling:** Publishers and subscribers don't directly know about each other. They only interact through events, making your code more modular and maintainable.