An event-based interaction model is the most common way of building user interfaces. The DOM is also built around this model with the document.addEventListener() and document.removeEventListener() APIs to allow responding to events like click, hover, input, etc.

Clarification questions

The following are good questions to ask the interviewer to demonstrate your thoughtfulness. Depending on their response, you might need to adjust the implementation accordingly.

1. Can emitter.emit() be called without any arguments besides the eventName?
   • Yes, it can be.
2. Can the same listener be added multiple times with the same eventName?
   • Yes, it can be. It will be called once for each time it is added when eventName is emitted in the order they were added.
3. Following up on the question above, what should happen if a listener is added multiple times and emitter.off() is being called once for that listener?
   • The listener will only be removed once.
4. Can non-existent events be emitted?
   • Yes, but nothing should happen and the code should not error or crash.
5. What should the this value of the listeners be?
   • It can be null.
6. Can listeners contain code that invoke methods on the emitter instance?
   • Yes, but we can ignore that scenario for this question.
7. What if the listener callbacks throw an error during emitter.emit()?
   • The error should be caught and not halt the rest of the execution. However, we will not test for this case.

We will handle all the above cases except for the last two cases.

Solution

Data structure

The clean default is a map from eventName to an array of listeners.

Conceptually:

events = {
  foo: [Function1, Function3],
  bar: [Function2],
};

That structure makes all three operations direct:

• on() appends to one event bucket
• off() searches inside one event bucket
• emit() reads one event bucket and iterates it in order

A flat list of { eventName, listener } pairs also works, but it forces every off() and emit() call to scan unrelated entries.

Because eventName comes from user input, the implementation stores these buckets in Object.create(null) instead of a normal object literal. That avoids collisions with inherited keys like toString.

Implementing EventEmitter.on()

Create the listener array if this is the first time the event name appears, then push the new listener and return this for chaining.

Implementing EventEmitter.off()

If the event does not exist, do nothing. Otherwise, find the first matching listener with findIndex() and remove only that single occurrence with splice().

Removing one occurrence matters because the same function can be registered multiple times and should be removed in registration order.

Implementing EventEmitter.emit()

If the event does not exist or has no listeners, return false.

Otherwise, clone the listener array with slice() and call each listener with the emitted arguments. Cloning protects the current emission from listeners that add or remove handlers while emit() is running.

Built-in object properties colliding with user-provided eventNames

If you store listeners in a plain JavaScript object, user-provided names such as valueOf or toString can collide with inherited properties.

const emitter = new EventEmitter();
emitter.emit('toString');

Two common fixes are:

• Use a Map instead of an object. This is the modern approach.
• Create your plain JavaScript object with Object.create(null) so that the object does not have a prototype and no additional properties.

Class-based solution

export default class EventEmitter {
  constructor() {
    // Avoid creating objects via `{}` to exclude unwanted properties
    // on the prototype (such as `.toString`).
    this._events = Object.create(null);
  }

  /**
   * @param {string} eventName
   * @param {Function} listener
   * @returns {EventEmitter}
   */
  on(eventName, listener) {
    // Group listeners by event name so emit/off only touch one bucket.
    if (!Object.hasOwn(this._events, eventName)) {
      this._events[eventName] = [];
    }

    this._events[eventName].push(listener);
    return this;
  }

  /**
   * @param {string} eventName
   * @param {Function} listener
   * @returns {EventEmitter}
   */
  off(eventName, listener) {
    // Ignore non-existing eventNames.
    if (!Object.hasOwn(this._events, eventName)) {
      return this;
    }

    const listeners = this._events[eventName];

    // Find only first instance of the listener.
    const index = listeners.findIndex(
      (listenerItem) => listenerItem === listener,
    );

    if (index < 0) {
      return this;
    }

    this._events[eventName].splice(index, 1);
    return this;
  }

  /**
   * @param {string} eventName
   * @param {...unknown} args
   * @returns {boolean}
   */
  emit(eventName, ...args) {
    // Return false for non-existing eventNames or events without listeners.
    if (
      !Object.hasOwn(this._events, eventName) ||
      this._events[eventName].length === 0
    ) {
      return false;
    }

    // Make a clone of the listeners in case one of the listeners
    // mutates this listener array.
    const listeners = this._events[eventName].slice();
    listeners.forEach((listener) => {
      listener.apply(null, args);
    });

    return true;
  }
}

Function prototype-based solution

interface EventEmitter {
  _events: Record<string, Array<Function>>;
  on(eventName: string, listener: Function): EventEmitter;
  off(eventName: string, listener: Function): EventEmitter;
  emit(eventName: string, ...args: Array<any>): boolean;
}

export default function EventEmitter(this: EventEmitter) {
  // Avoid creating objects via `{}` to exclude unwanted properties
  // on the prototype (such as `.toString`).
  this._events = Object.create(null);
}

EventEmitter.prototype.on = function (
  this: EventEmitter,
  eventName: string,
  listener: Function,
): EventEmitter {
  // Group listeners by event name so emit/off only touch one bucket.
  if (!Object.hasOwn(this._events, eventName)) {
    this._events[eventName] = [];
  }

  this._events[eventName].push(listener);
  return this;
};

EventEmitter.prototype.off = function (
  this: EventEmitter,
  eventName: string,
  listener: Function,
): EventEmitter {
  // Ignore non-existing eventNames.
  if (!Object.hasOwn(this._events, eventName)) {
    return this;
  }

  const listeners = this._events[eventName];

  // Find only first instance of the listener.
  const index = listeners.findIndex(
    (listenerItem) => listenerItem === listener,
  );

  if (index < 0) {
    return this;
  }

  this._events[eventName].splice(index, 1);
  return this;
};

EventEmitter.prototype.emit = function (
  this: EventEmitter,
  eventName: string,
  ...args: Array<any>
): boolean {
  // Return false for non-existing eventNames or events without listeners.
  if (
    !Object.hasOwn(this._events, eventName) ||
    this._events[eventName].length === 0
  ) {
    return false;
  }

  // Make a clone of the listeners in case one of the listeners
  // mutates this listener array.
  const listeners = this._events[eventName].slice();
  listeners.forEach((listener) => {
    listener.apply(null, args);
  });

  return true;
};

Edge cases

• The same listener function can be added more than once for the same event. Removal should be done in order of adding.
• emitter.emit() is called without any arguments.
• Methods are called with non-existing eventNames.
• eventNames are built-in object properties like valueOf, toString.

Techniques

• Object-oriented programming.
• Using the right data structures.
• Handling of variadic arguments.
• Object chaining.

Notes

• Instance methods should not be arrow functions if they need to return this, because arrow functions do not get their own method receiver.
• Node.js' real EventEmitter supports more features, such as symbol event names, but they are intentionally out of scope here.

Resources

• EventEmitter | Node.js