Observer Pattern Using JavaScript

Introduction

The observer pattern is simply a publish/subscribe relationship. Like a person of interest, we have an object of interest, which we call subject or publisher, and then we have interested parties, and these parties are called observers or subscribers. The subject has something to say, and observers are there interested in that saying. When we arrange our code in this way, code not only becomes easy to read, reason about but also less coupled.

We see examples of this pattern all the time. Following someone on Twitter and getting notified is one example. Like that, you might also want to notify different objects about some event so that those objects can react to the event.

This pattern simplifies code a lot, which is then easier to extend or maintain. Many popular programming languages support this, and I have written a post on DZone about implementing this pattern using .NET. However, this time, we will use JavaScript to see one simple implementation of this pattern. I will be using Node.js for JavaScript execution. 

Account Entity

We will start with an Account class that has the following structure:

Account class is elementary. It has a balance property and two methods, Deposit and Withdraw.

Program Execution

Let’s create an index.js file, which will be the entry-point for the program. Here is the code:

So, we create an instance of an Account entity and call deposit and withdraw methods. Following is the output of these operations:

So far, nothing special, and next, we will add our observers.

Observers

Let’s assume we want to log in and sendEmail whenever there is a change in the Account's balance. I have following classes which will act as an observer for the demo:

Emailer class simulates the sending of email. SendEmail is the function, which will react to changes in account balance by sending an email.

Similar to this, the following is the code for Logger, and here the Log method will be invoked whenever there is a change in the account balance.

Turning Account Into Subject

Now, we will turn the Account class into a subject. In this example, I will be making changes directly to the Account class; you can also introduce this functionality by using the decorator pattern. But to keep the discussion simple, I will add the subject-related code to Account class.

The first thing we need in the Account entity is to store all the observers, and I will do this by creating an Array. I will also add two helper methods to add observers to this array and remove observers as well. This way we are allowing client of this class to easily register and de-register observers. And finally there is another helper method called Notify which will notify all the observers in the observers array. Notify method will be called from deposit and withdraw methods thus balance updates will be broadcasted. The following picture shows this code:

and here is the implementation of these methods:

Wiring Observers and Subject

Let's wire these together, and for this, I updated the index.js file as shown below:

So, we create instances of our observer and then wire the corresponding methods to account object using helper method. Next we call the deposit and withdraw methods as before and the following output shows that now observers are being notified and they are executing code as expected:

You can download the code on this git repo.

Summary

Pub/Sub or Observer pattern is a widely known pattern and different programming languages support this. I have written a blog post about .NET implementation of this pattern which you can read on this URL. This pattern helps writing readable, easy to understand and less-coupled code and you shall use it when you think your objects can benefit from this design. If you have some questions or comments, feel free to write to me.

Till next time, Happy Coding.