Object-Oriented JavaScript — Observers and Tests

The observer pattern and why tests are important?

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at some basic design patterns and tests.

Observer Pattern

The observer pattern is where we observe the changes from the one source by subscribing to an object and publish the changes to the observers that subscribed when there’re changes.

We can create an object that takes observers and publish changes to them by writing:

const observer = {
  subscribers: [],
  addSubscriber(callback) {
    if (typeof callback === "function") {
      this.subscribers.push(callback);
    }
  },
  removeSubscriber(callback) {
    const index = this.subscribers.findIndex(s => s === callback);
    this.subscribes.splice(index, 1);
  },
  publish(obj) {
    for (const sub of this.subscribers) {
      if (typeof sub === 'function') {
        sub(obj);
      }
    }
  },
};

We create an observer object that takes callbacks.

callback is a function that we add to the subscribers array.

Also, we have the removeSubscriber array to remove a callback.

publish takes an object with something to publish and callbacks the callbacks in the this.subscribers array to publish the changes.

Then we can use it by writing:

const callback = (e) => console.log(e);
const callback2 = (e) => console.log(2, e);
observer.addSubscriber(callback);
observer.addSubscriber(callback2);
observer.publish('foo')

We created 2 callbacks and add them to the subscribers array with the addSubscriber method.

Then we call publish to call the callbacks, which log the changes.

We should see:

foo
2 "foo"

logged in the console log.

The observer pattern is good since there’s not much coupling between the callbacks and the observer object.

We just call the callback when there’s some information to send to them.

The callbacks know nothing about the observer .

technology javascript programming

Exercise from Eloquent JavaScript. Today, we will write a function that forms a chessboard. You can find the exercise in the Eloquent Javascript book (3rd edition, chapter 2; Program Structure). Write a program that creates a string that represents an 8×8 grid, using newline characters to separate lines. At each position of the grid there is either a space or a “#” character. The characters should form a chessboard.

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.

Async callbacks or promises. Introduction to JavaScript Async Programming