Event Emitter

An EventEmitter is a small object that lets one piece of code emit named events and any number of other places listen for them. It is the core of the publish-subscribe (pub/sub) pattern and one of the most common ways to decouple producers from consumers in JavaScript.

Where you'll see this pattern in real code

The EventEmitter API shows up across the JavaScript ecosystem:

Node.js streams and core modules. stream.on('data', chunk => ...), process.on('exit', ...), and httpServer.on('request', ...) all use Node's built-in EventEmitter.
Browser EventTarget. Every DOM node is an EventTarget, and addEventListener, removeEventListener, and dispatchEvent follow the same shape. Modern Node and browsers expose EventTarget directly, so most apps no longer need a custom class.
Library hooks. Express middleware events, Socket.io rooms, Redis pub/sub clients, MongoDB change streams, and most CLI tools expose pub/sub on top of an emitter.
In-app decoupling. A small emitter can act as a backbone for cross-component events (for example, a global toast bus, an analytics dispatcher, or a feature-flag refresh signal) when adding global state would be heavy.

When to roll your own emitter vs use a built-in

Option	When to reach for it
`EventTarget` (DOM/Node)	Default for most apps. Built into the platform, supports `AbortSignal` for cleanup, no dependencies.
Node `EventEmitter`	Server-side code that needs Node-specific extras like `setMaxListeners`, error events, or `once`.
Custom emitter (this question)	When you need something the built-ins do not expose, such as listing all listeners, wildcard events, priority ordering, namespaces, or interview practice.
Observer pattern (RxJS, MobX)	One-to-many sync of state rather than discrete named events.
Store-based state (Redux, Zustand)	Global state with subscriptions and time-travel debugging. Do not use an emitter as your state store; you will lose causality.

Implement an EventEmitter class similar to the one in Node.js. The exercise tests how you design a small public API, pick the right data structure, and handle the subtle bugs that most basic implementations get wrong.

Example usage of the EventEmitter class:

const emitter = new EventEmitter();

function addTwoNumbers(a, b) {
  console.log(`The sum is ${a + b}`);
}
emitter.on('foo', addTwoNumbers);
emitter.emit('foo', 2, 5);
// > "The sum is 7"

emitter.on('foo', (a, b) => console.log(`The product is ${a * b}`));
emitter.emit('foo', 4, 5);
// > "The sum is 9"
// > "The product is 20"

emitter.off('foo', addTwoNumbers);
emitter.emit('foo', -3, 9);
// > "The product is -27"

`EventEmitter` API

Implement the following classes and APIs:

`new EventEmitter()`

Creates an instance of the EventEmitter class. Events and listeners are isolated within the EventEmitter instances they're added to, aka listeners shouldn't react to events emitted by other EventEmitter instances.

`emitter.on(eventName, listener)`

Adds a callback function (listener) that will be invoked when an event with the name eventName is emitted.

Parameter	Type	Description
`eventName`	`string`	The name of the event.
`listener`	`Function`	The callback function to be invoked when the event occurs.

Returns the EventEmitter instance so that calls can be chained.

`emitter.off(eventName, listener)`

Removes the specified listener from the list of listeners for the event with the name eventName.

Parameter	Type	Description
`eventName`	`string`	The name of the event.
`listener`	`Function`	Callback function to be removed from the list of listeners for the event.

Returns the EventEmitter instance so that calls can be chained.

`emitter.emit(eventName[, ...args])`

Invokes each of the listeners listening to eventName with the supplied arguments in order.

Parameter	Type	Description
`eventName`	`string`	The name of the event.
`...args`	`any`	Arguments to invoke the list of listener functions with.

Returns true if the event had listeners, false otherwise.

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.

Can emitter.emit() be called without any arguments besides the eventName?
- Yes, it can be.
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.
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.
Can non-existent events be emitted?
- Yes, but nothing should happen and the code should not error or crash.
What should the this value of the listeners be?
- It can be null.
Can listeners contain code that invokes methods on the emitter instance?
- Yes, but we can ignore that scenario for this question.
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 `eventName`s

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

Event Emitter

Where you'll see this pattern in real code

When to roll your own emitter vs use a built-in

`EventEmitter` API

`new EventEmitter()`

`emitter.on(eventName, listener)`

`emitter.off(eventName, listener)`

`emitter.emit(eventName[, ...args])`

Asked at these companies

Event Emitter (Official solution)

Clarification questions

Solution

Data structure

Implementing `EventEmitter.on()`

Implementing `EventEmitter.off()`

Implementing `EventEmitter.emit()`

Built-in object properties colliding with user-provided `eventName`s

Class-based solution

Function prototype-based solution

Edge cases

Techniques

Notes

Resources

You must be signed in to view your submissions

Loading editor

Loading editor

Loading tests

JavaScript Console

Loading tests

Event Emitter

Where you'll see this pattern in real code

When to roll your own emitter vs use a built-in

EventEmitter API

new EventEmitter()

emitter.on(eventName, listener)

emitter.off(eventName, listener)

emitter.emit(eventName[, ...args])

Asked at these companies

Event Emitter (Official solution)

Clarification questions

Solution

Data structure

Implementing EventEmitter.on()

Implementing EventEmitter.off()

Implementing EventEmitter.emit()

Built-in object properties colliding with user-provided eventNames

Class-based solution

Function prototype-based solution

Edge cases

Techniques

Notes

Resources

You must be signed in to view your submissions

Loading editor

Loading editor

Loading tests

JavaScript Console

Loading tests

`EventEmitter` API

`new EventEmitter()`

`emitter.on(eventName, listener)`

`emitter.off(eventName, listener)`

`emitter.emit(eventName[, ...args])`

Implementing `EventEmitter.on()`

Implementing `EventEmitter.off()`

Implementing `EventEmitter.emit()`

Built-in object properties colliding with user-provided `eventName`s