R

E

A

C

T

O

xamples 

epeat

ode

pproach

ptimize

est

{Event-Emitter}

The Question

Implement a familiar Javascript concept -- the EventEmitter. It works like this:

var myEventEmitter = new EventEmitter();

And you can register listeners to different event strings with an on method:

myEventEmitter.on('anImportantEvent', function (eventData) {
  console.log('Something important happened at ', eventData.location);
});

These listeners get called when the created event emitter emits the event with related data:

myEventEmitter.emit('anImportantEvent', { location: 'Fullstack' });

You can also unregister a listener using a removeListener method:

function importantMessage (eventData) {
  console.log('Something important happened at ', eventData.location);
};

// Listener is attached.
myEventEmitter.on('anImportantEvent', importantMessage); 

// Listener is no longer attached and has moved on with its life.
myEventEmitter.removeListener('anImportantEvent', importantMessage); 

You can create an EventEmitter:

 Overview of full functionality

var superbowl = new EventEmitter();

var cheer = function (eventData) {
  console.log('RAAAAAHHHH!!!! Go ' + eventData.scoringTeam);
};

var jeer = function (eventData) {
  console.log('BOOOOOO ' + eventData.scoringTeam);
};

superbowl.on('touchdown', cheer);
superbowl.on('touchdown', jeer);

superbowl.emit('touchdown', { scoringTeam: 'Patriots' }); 
// Both cheer and jeer should have been called with data

superbowl.removeListener('touchdown', jeer);

superbowl.emit('touchdown', { scoringTeam: 'Seahawks' }); 
// Only cheer should have been called

1. Creating the constructor function

var EventEmitter = function () {
    this.events = {};
};

2. Adding Listeners

EventEmitter.prototype.on = function (eventStr, fn) {
    //if there is no eventStr already existing, initialize it
    if (!this.events[eventStr]) { this.events[eventStr] = []; }

    //now you can safely push the function
    this.events[eventStr].push(fn);
};

3. Emitting

EventEmitter.prototype.emit = function (eventStr, eventData) {
    //check that this event exists
    if (!this.events[eventStr]) { return; }
    
    //call each function in the eventStr array
    this.events[eventStr].forEach(fn => fn(eventData));
};

4. Remove Listeners

EventEmitter.prototype.removeListener = function (eventStr, fn) {
    var eventFns = this.events[eventStr];
    //check that this event exists
    if (!eventFns) return;

    var i = eventFns.indexOf(fn);
    //check that this function exists
    if (i === -1) return;
    
    //remove the function specified
    eventFns.splice(i, 1);
};

Solution Code

var EventEmitter = function () {
    this.events = {};
};

EventEmitter.prototype.on = function (eventStr, fn) {
    //if there is no eventStr already existing, initialize it
    if (!this.events[eventStr]) { this.events[eventStr] = []; }

    this.events[eventStr].push(fn);
};

EventEmitter.prototype.emit = function (eventStr, eventData) {
    //check that this event exists
    if (!this.events[eventStr]) { return; }
    
    //call each function in the eventStr array
    this.events[eventStr].forEach(fn => fn(eventData));
};

EventEmitter.prototype.removeListener = function (eventStr, fn) {
    var eventFns = this.events[eventStr];
    //check that this event exists
    if (!eventFns) return;

    var i = eventFns.indexOf(fn);
    //check that this function exists
    if (i === -1) return;
    
    eventFns.splice(i, 1);
};

Conclusion  

EMIT ALLLLL THE EVENTSSSS

repl.it