Observer Pattern using JavaScript

Introduction

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. Subject have 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. Similar to that you might also want to notify different objects about some event so those objects can react to the event etc.

This pattern simplify code a lot which is then easier to extend or maintain. Many popular programming languages support this and I have written a post about how to implement 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 which has following structure:

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

Program Execution

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

So, we create an instance of 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 and sendEmail whenever there is a change in the balance of the Account. I have following classes which will act as observer for the demo:

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

Similar to this, following is the code for Logger and here the Log method will be invoked whenever there is a change in 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 Account class, you can also introduce this functionality by using decorator pattern. But to keep the discussion simple, I will add the subject related code to Account class.

First thing, we need in Account entity is a place to store all the observers and I will do this by creating an Array. I will also add two helper methods to add observer 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

Lets 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.

My Recent Books