Event Emitter

Prompt

Your task is to build a basic EventEmitter class in JavaScript. Event emitters are a common pattern used in Node.js and the browser to handle asynchronous actions (like responding to a user click or a network response).

Your class must implement the following three methods:

• on(eventName, listener): Subscribes a listener function to a specific eventName. Multiple listeners can be subscribed to the same event.
• off(eventName, listener): Unsubscribes a specific listener function from the eventName. If the listener isn't subscribed, it should do nothing.
• emit(eventName, ...args): Triggers all listeners subscribed to the eventName in the order they were added, passing any provided args to each listener. If no listeners are subscribed to the event, it should do nothing.

Requirements:

• You should handle the case where multiple functions are registered to the same event.
• You should handle emitting events that have no listeners gracefully (without throwing an error).
• Listeners might need to receive an arbitrary number of arguments when an event is emitted.

Playground

Solution

Explanation

I will walk you through this challenge as it was asked at Airbnb. We will go through the solution step by step. I will show you what an ideal solution looks like, where candidates go wrong, and how interviewers decide between "Strong No", "No", "Yes", and "Strong Yes".

Before writing a single line of code, read the prompt carefully. This question asks for three methods — on, off, and emit. Make sure you understand each one.

Now, most candidates read the prompt and jump straight into coding the happy path — on adds a listener, emit calls it, off removes it. That's fine. But senior candidates think one step further before they start. There are two edge cases in this problem that the prompt mentions but most candidates either miss or only add later when their code throws:

• What if off is called for an event that was never registered?
• What if emit is called when there are no listeners?

You do not need to ask the interviewer about these — the prompt already tells you to handle them gracefully. The point is to proactively identify them yourself and mention them out loud before you code. Something like: "I'm also going to make sure emit and off handle missing events without throwing, since that's a realistic edge case in production." That small moment of forward thinking is what separates a "Yes" from a "Strong Yes" before you have written a single line of code.

Setting Up the Constructor

We will start by creating the EventEmitter class with just the constructor. Before we can register or emit anything, we need somewhere to store our subscriptions.

Copy
class EventEmitter {
  constructor() {
    this.events = {};
  }
}

this.events is a plain JavaScript object that acts as our database of subscriptions. The keys will be event names (strings like 'newMessage'), and the values will be arrays of listener functions. Here is what it looks like when populated:

Copy
this.events = {
  newMessage: [bobListener, aliceListener],
  userJoined: [someOtherListener],
};

We chose an object because it gives us O(1) lookup by event name — just this.events[eventName] and we instantly know who is subscribed. The array preserves insertion order, so listeners are called in the order they were added, exactly as the prompt requires.

Implementing on

Now let's add the on method. When someone calls emitter.on('newMessage', bobListener), we need to add bobListener to the list of subscribers for 'newMessage'.

Copy
on(eventName, listener) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(listener);
}

The guard on the first line is critical. Before pushing, we check if an array already exists for this event name. If it does not, we create an empty one. Only then do we push the listener.

Implementing off

Next, the off method. When someone calls emitter.off('newMessage', aliceListener), we need to remove aliceListener from the subscription list — and only that listener.

Copy
off(eventName, listener) {
  if (!this.events[eventName]) return;
  this.events[eventName] = this.events[eventName].filter(
    (fn) => fn !== listener
  );
}

The guard at the top handles the case where off is called for an event that was never registered. Without it, we would throw on the next line. After the guard, we use .filter() to create a new array that excludes the specific listener being removed.

Implementing emit

Finally, emit. When someone calls emitter.emit('newMessage', 'Hello!'), we need to call every listener subscribed to 'newMessage' and pass them the arguments.

Copy
emit(eventName, ...args) {
  if (!this.events[eventName]) return;
  this.events[eventName].forEach((listener) => {
    listener(...args);
  });
}

We guard first — if no one is subscribed to this event, we return early without doing anything. Then we loop through the array of listeners and call each one, spreading the args so any number of arguments can be passed through.

The Complete Solution

Here is the full class put together:

Copy
class EventEmitter {
  constructor() {
    this.events = {};
  }
  on(eventName, listener) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(listener);
  }
  off(eventName, listener) {
    if (!this.events[eventName]) return;
    this.events[eventName] = this.events[eventName].filter(
      (fn) => fn !== listener
    );
  }
  emit(eventName, ...args) {
    if (!this.events[eventName]) return;
    this.events[eventName].forEach((listener) => {
      listener(...args);
    });
  }
}