How to Create Your Own Event Emitter in JavaScript

Build a simple event emitter based on ES6 classes

What’s it For?

First of all, for your understanding and knowledge. To get the full picture of how something works, write it yourself.

Secondly, to write cleaner code. We’ll give you a real example.

Last but not least: you might be asked to write your own small and simple EventEmitter in an interview — it would be nice to be prepared!

Hello World!

Let’s start with the documentation. The Node.js documentation answers all the questions you may have but, like much documentation, it’s a bit complicated. That’s why you may want a quick guide.

Creating

As I mentioned, we’re going to use ES6 Classes.

class MyEventEmitter {}

We need a constructor to initialize our store for events and callbacks.

constructor() {
    this._events = {};
  }

Let’s describe our first method, on. It takes two arguments: the event’s name, and the listener, which will be fired.

From the code above we can see that if the object _events doesn’t have the property, it creates it and assign an empty array. After that, a new listener will be added to the array. If the property exists, we just add a listener.

The next method is removeListener. As before, it takes two arguments: the event’s name and the listener, which must be removed.

What is going on here? It’s simple. If we don’t have such an event we throw a new error with the related message. Otherwise, we filter an array of listeners.

The last method is emit. No exceptions, this method also takes two arguments: the event’s name and params, which must be passed to a listener.

It’s simple. If the event’s name is wrong we throw an error. Otherwise, we use forEach to loop through all callbacks and call each of them with necessary data.

Here’s the final version of our event emitter:

How Do We Use It?

Create an instance:

const myEventEmitter = new MyEventEmitter();

Create a handler:

const handleMyEvent = (data) => {
 console.log('Was fired: ', data);
};

Add it to the instance:

myEventEmitter.on('testEvent', handleMyEvent);

Finally, emit an event:

myEventEmitter.emit('testEvent', 'hi'); // Was fired: hi

We can emit events as many times as we want and pass different values. It will trigger the related listener every time:

myEventEmitter.emit('testEvent', 'trigger'); // Was fired: trigger

myEventEmitter.emit('testEvent', 'again'); // Was fired: again

However, if we try to emit non-existing event we will get an error:

myEventEmitter.emit('fakeEvent', {}); // Error: Can't emit an event. Event "fakeEvent" doesn't exits.

Also, we can remove a listener:

myEventEmitter.removeListener("testEvent", handleMyEvent);

The following emit will do nothing. At the same time, it won’t trigger the error, since property testEvent exists on this._event object.

Example From a Real Project

The following code was taken from a Chrome extension. Whether you familiar with it or not, I will briefly explain how it works. To cut a long story short, different parts of the extension communicate with each other by sending messages. In the beginning, it was something like this:

switch(action) {
 case 'open':
  openPopup(payload);
  break;
...

Somewhere in the other part of the code we created this message:

const msg = {
 action: 'open',
 payload,
};

chrome.runtime.sendMessage(msg);

As you can imagine, with the extension growing this “switch case” became bigger and bigger. We decided to create a connector which totally works as an event emitter:

connector.addListener("open", openPopup);
...

And to trigger it:

const msg = {
 action: 'open',
 payload,
};

connector.sendToBackground(msg)

Summary

This is my first piece in English! I hope you find it useful.

Finally, I believe that knowledge of EventEmitter will motivate you to write better code. It did for me!