Implementing Observables from Events in JS

// Classic prototype style (ES5)
// This version uses constructor functions and prototypes, the style that came before ES6 classes.

function Observable(forEach) {
  // We define the 'Observable' constructor function that takes a 'forEach' argument and creates a new Observable object.
  this._forEach = forEach;
  // We assign the forEach function received as an argument to the '_forEach' property of the Observable object.
}

Observable.prototype = {
  // We define the properties of the 'prototype' object of the 'Observable' constructor function.
  forEach: function (onNext, onError, onCompleted) {
    // We declare a 'forEach' method on the prototype of 'Observable' that takes three arguments: onNext, onError and onCompleted.
    if (typeof onNext === "function") {
      // If the first argument 'onNext' is a function, then...
      return this._forEach({
        // ...we run the function stored in '_forEach' with an object that contains the properties and their values.
        onNext: onNext,
        // 'onNext' is assigned the value passed as the first argument.
        onError: onError || function () {},
        // If 'onError' is provided, it is assigned to the 'onError' property. Otherwise, an empty function is assigned.
        onCompleted: onCompleted || function () {},
        // If 'onCompleted' is provided, it is assigned to the 'onCompleted' property. Otherwise, an empty function is assigned.
      });
    } else {
      // If the first argument 'onNext' is not a function, then...
      return this._forEach(onNext);
      // ...we run the function stored in '_forEach' with the first argument 'onNext' as the parameter.
    }
  },
};

Observable.fromEvent = function (dom, eventName) {
  // We add a static 'fromEvent' method to the 'Observable' object.
  // This method takes two arguments: a DOM element 'dom' and an event name 'eventName'.
  return new Observable(function forEach(observer) {
    // The function creates and returns a new 'Observable' object.
    // The 'forEach' function passed as an argument to the constructor takes an 'observer' as a parameter.
    var handler = (e) => observer.onNext(e);
    // We create a 'handler' that is an arrow function that receives an event 'e' and calls the 'onNext' method of the 'observer', passing it 'e'.
    dom.addEventListener(eventName, handler);
    // We register the 'handler' on the DOM element 'dom' for the event specified in 'eventName'.
    return {
      // We return an object that has a single 'dispose' property.
      dispose: () => {
        // The 'dispose' property is an arrow function that...
        dom.removeEventListener(eventName, handler);
        // ...removes the 'handler' previously registered on the DOM element 'dom' for the event specified in 'eventName'.
      },
    };
  });
};

const button = document.getElementById("button");
// We declare a constant 'button' and assign it the DOM element with the ID "button".

const clicks = Observable.fromEvent(button, "click");
// We declare a constant 'clicks' and assign it the result of calling the static 'fromEvent' method of 'Observable',
// passing it the DOM element 'button' and the event name "click". This creates an 'Observable' object that listens for the
// click event on the button.

const clicksSubscription = clicks.forEach((event) => {
  // We declare a constant 'clicksSubscription' and assign it the result of calling the 'forEach' method on the
  // 'clicks' object. This function takes an arrow function as an argument that receives an 'event'.
  console.log("The user clicked", event);
  // Inside the arrow function, we log a "The user clicked" message followed by the 'event' object.
});

class Observable {
  // We declare an 'Observable' class.
  constructor(subscribe) {
    // We define the class constructor, which takes a 'subscribe' argument.
    this._subscribe = subscribe;
    // We assign the 'subscribe' function received as an argument to the '_subscribe' property of the Observable object instance.
  }
  subscribe(observer) {
    // We declare a 'subscribe' method on the 'Observable' class that takes an 'observer' argument.
    return this._subscribe(observer);
    // We run the function stored in the '_subscribe' property of the Observable object instance,
    // passing it the 'observer' argument and returning the result.
  }
}

class Observable {
  // We declare an 'Observable' class.

  // ...
  // The constructor and other methods that are not shown in this code snippet should be included here.

  static fromEvent(domElement, eventName) {
    // We declare a static 'fromEvent' method on the 'Observable' class that takes two arguments: a DOM element 'domElement' and an event name 'eventName'.
    return new Observable(function subscribe(observer) {
      // The function creates and returns a new 'Observable' object.
      // The 'subscribe' function passed as an argument to the constructor takes an 'observer' as a parameter.
      const handler = (ev) => { observer.next(ev) };
      // We create a 'handler' that is an arrow function that receives an event 'ev' and calls the 'next' method of the 'observer', passing it 'ev'.
      domElement.addEventListener(eventName, handler);
      // We register the 'handler' on the DOM element 'domElement' for the event specified in 'eventName'.
      return {
        // We return an object that has a single 'unsubscribe' property.
        unsubscribe() {
          // The 'unsubscribe' property is a function that...
          domElement.removeEventListener(eventName, handler);
          // ...removes the 'handler' previously registered on the DOM element 'domElement' for the event specified in 'eventName'.
        }
      }
    });
  }
}

// We create a constant called 'button' that stores the HTML element with the ID "button"
const button = document.getElementById("button");

// We create a constant called 'clicks' that uses our own Observable implementation to observe the 'click' event of the HTML element stored in the 'button' constant
const clicks = Observable.fromEvent(button, "click");

// We create a constant called 'clicksSubscription' that subscribes a callback function that runs every time a 'click' event is detected
const clicksSubscription = clicks.subscribe({
  // The 'next' function is called every time a 'click' event is detected and shows a log message in the console
  next(e) {
    console.log("Click in the button");
  },
});

// Old standard
clicksSubscription.dispose();

// New standard
clicksSubscription.unsubscribe();