Implement an event emitter

The question

A staple, because it exercises data structures, closures and the observer pattern at once. Expect it in stages:

1. on, off and emit.
2. once, which unsubscribes itself after firing.
3. "What happens if a listener removes itself while the event is dispatching?"

That last question is the one that separates candidates.

The solution

A Map rather than a plain object, so event names like "constructor" or "__proto__" can’t collide with anything on the prototype.

class EventEmitter {
  constructor() {
    this.listeners = new Map();
  }

  on(eventName, listener) {
    if (!this.listeners.has(eventName)) {
      this.listeners.set(eventName, []);
    }
    this.listeners.get(eventName).push(listener);
    return this;
  }

  off(eventName, listener) {
    const handlers = this.listeners.get(eventName);
    if (!handlers) return this;
    const index = handlers.indexOf(listener);
    if (index !== -1) handlers.splice(index, 1);
    return this;
  }

  emit(eventName, ...args) {
    const handlers = this.listeners.get(eventName);
    if (!handlers || handlers.length === 0) return false;
    // Copy first: a listener may remove itself while the event is dispatching.
    for (const handler of [...handlers]) {
      handler.apply(this, args);
    }
    return true;
  }
}

How it works

A Map of name to listener array. Duplicate subscriptions are allowed and each one fires, which is what Node does. off removes by identity, so the caller has to keep a reference to the exact function it subscribed; this is why passing an inline arrow to on makes a listener impossible to remove later.

emit iterates a copy of the array. Without that copy, a listener that removes itself shifts the array underneath the loop and the next listener is silently skipped. It returns a boolean saying whether the event had any listeners at all.

The tests it has to pass

This is the part most explanations leave out. "It works" is not a claim you can check by reading. These are the 2 cases Practice Pad runs against your solution, and the implementation above passes all of them.

const emitter = new EventEmitter();
let total = 0;
emitter.on("total", (a, b) => { total = a + b; });
expectEqual(emitter.emit("total", 2, 5), true);
expectEqual(total, 7);

const emitter = new EventEmitter();
let calls = 0;
const listener = () => { calls += 1; };
emitter.on("tick", listener);
emitter.emit("tick");
emitter.off("tick", listener);
emitter.emit("tick");
expectEqual(calls, 1);

Edge cases to watch out for

Iterating the live array during emit

If a listener calls off on itself, splice shifts every later element down while the loop index moves up, so the following listener never runs. Iterating a copy costs one allocation and removes the whole class of bug.

Using a plain object for the listener store

{} inherits from Object.prototype, so an event named "toString" or "constructor" finds an inherited value instead of a listener array. A Map, or Object.create(null), avoids it.

Removing every matching listener instead of one

If the same function was subscribed twice, off should remove one subscription, not both. Using indexOf and splice(index, 1) gets this right; filter removes all of them.

Implementing once by wrapping without storing the original

A once that wraps the listener must still be removable by the original reference, so the wrapper needs to record what it wraps. Otherwise off(name, originalFn) silently does nothing.

Follow up questions

See all 24 questions