How to Implement Event Emitter in JavaScript: Simple Guide

To implement an EventEmitter in JavaScript, create a class that stores event listeners in an object and provides methods like on to add listeners and emit to trigger them. This allows different parts of your code to communicate by listening and responding to events.

Syntax

An EventEmitter class typically has:

• on(event, listener): Adds a listener function for the specified event.
• emit(event, ...args): Calls all listeners for the event, passing any arguments.
• listeners object: Stores arrays of listener functions keyed by event names.

javascript

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

  on(event, listener) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(listener);
  }

  emit(event, ...args) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(listener => listener(...args));
    }
  }
}

Example

This example shows how to create an EventEmitter, add listeners for events, and emit those events with data.

javascript

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

  on(event, listener) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(listener);
  }

  emit(event, ...args) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(listener => listener(...args));
    }
  }
}

const emitter = new EventEmitter();

emitter.on('greet', name => {
  console.log(`Hello, ${name}!`);
});

emitter.on('greet', name => {
  console.log(`How are you, ${name}?`);
});

emitter.emit('greet', 'Alice');

Output

Hello, Alice!
How are you, Alice?

Common Pitfalls

Common mistakes include:

• Not initializing the listeners array for new events, causing errors when adding listeners.
• Forgetting to check if listeners exist before emitting, which can cause runtime errors.
• Not using the spread operator ...args to pass event arguments properly.

Always ensure your on method initializes arrays and your emit method safely calls listeners.

javascript

class EventEmitterWrong {
  constructor() {
    this.listeners = {};
  }

  on(event, listener) {
    // Wrong: does not initialize array
    this.listeners[event].push(listener); // Error if event not present
  }

  emit(event, args) {
    // Wrong: does not check if listeners exist
    this.listeners[event].forEach(listener => listener(args));
  }
}

// Correct approach is shown in previous sections.

Quick Reference

EventEmitter Methods Cheat Sheet:

Method	Purpose
on(event, listener)	Adds a listener function for an event
emit(event, ...args)	Calls all listeners for the event with arguments

Key Takeaways

Create an object to store event names and their listener arrays.

Use the on() method to add listeners safely initializing arrays.

Use the emit() method to call all listeners with any arguments.

Always check if listeners exist before calling them to avoid errors.

Event emitters help decouple code by enabling event-driven communication.