THE OBSERVER DESIGN PATTERN IN JAVASCRIPT

Haritha N

March 4, 2024

Last updated: August 16, 2024

An Introduction To Observer Design Pattern In JavaScript

Ever felt like your JavaScript code is a tangled mess of event listeners and callbacks, each desperately trying to react to changes in various parts of your application? Worry not, fellow developers! There’s a design pattern that can help you with this confusion: the Observer Design Pattern in JavaScript.

In this post, we’ll explore the intricacies of the observer design pattern in JavaScript. We’ll delve into its core concepts, see how to implement it effectively, and unlock its potential for building cleaner, more maintainable, and scalable applications. So, grab your coffee, and let’s embark on this journey together!

What Is The Observer Design Pattern In JavaScript?

The Observer design Pattern is a JavaScript design pattern that comes under the Behavioural Design Pattern category. 

The JavaScript Observer pattern allows an object, called the subject, to maintain a list of dependent objects, known as observers. When the subject’s state changes, it automatically notifies all its observers by calling a specific method within them. This pattern promotes loose coupling between objects and is commonly utilized in event-driven and reactive programming paradigms.

In simpler terms, the JavaScript Observer pattern enables one object (subject) to broadcast notifications to multiple other objects (observers) whenever its state changes, ensuring all dependent objects stay updated without directly knowing about each other.

Key Components Of Observer Design Pattern In JavaScript

The key components of observer design pattern in JavaScript are as follows: 

Subject

It has a list of observers to notify of any change in its state and provides methods with which the users can register and unregister themselves. It can either send the update while notifying the observer of its state change or provide another method to get the update. 

Concrete Subject

This is a specific implementation of the subject interface. This class is responsible for maintaining and updating the state and also notifying all the observers if there is any state change.

Observer

These objects are required to be notified when there is a change in the subject’s state. They implement an interface or an abstract class that defines an update method. When they register with a subject, they provide a way for the subject to call their update method when the state changes.

Concrete observer

This particular implementation of the observer interface dictates how observers should react to updates from the subject. Concrete observers are then connected to specific subjects they intend to observe. 

Example Code

Result

Explanation

Subject Class

• This class is the core element of this pattern. This holds the list of observers and provides methods to register, unregister, and notify observers.
• register(observer) method adds an observer to the observers list.
• unregister(observer) method removes an observer from the observer list.
• notify() method iterates through the observers list and calls the update method on each of the observers.

ConcreteSubject Class

• This class inherits from the Subject class.
• It has a state variable that stores its state and also has methods to get and set the state.
• When we set a state with the setState(state) method, it calls the notify() method to update all the observers in the list.

Observer Class

• This serves as a base class for all concrete observers.
• This class has an update() method which should be implemented by concrete observers. This method is called when the subject notifies all the observers of the change.

ConcreteObserver Class

• It inherits from the Observer class.
• The constructor of this class takes a name parameter that uniquely identifies the observer and a subject parameter as a reference to the subject it observes.
• The update method is implemented which displays a message when it receives an update from its subject.

Usage

• An instance ‘subject’ of the ConcreteSubject class is created. Three instances observer1, observer2, and observer3 of ConcreteObserver class are created. These observers are registered to the subject using the register() method.
• The state of the subject is set to “New state 1” using the setState() method. When the state changes, the subject calls the notify() method, which in turn calls the update method of each observer in the list.
• The observer1, observer2, and observer3 display the message saying that they received an update and also display the new state.
• The observer3 is unregistered using the unregister() method. The state of the subject is set to “New state 2” using the setState() method which calls the notify() method. Now it updates only observer1 and observer2 as observer3 is unregistered. The observer1 and observer2 display the updated message.

When this code is run, it demonstrates the Observer pattern, where the subject (ConcreteSubject) notifies its observers (ConcreteObservers) when there is a change in its state and the observers respond accordingly.

Benefits Of Observer Design Pattern In JavaScript

• It allows passing data to other objects efficiently without requiring any changes to the Subject or Observer classes. 
• It promotes loose coupling between objects that interact with each other.
• With the help of the Open/Closed principle, Observers can be registered and unregistered at any point in time without making any changes to the code.

Disadvantages Of Observer Design Pattern In JavaScript

• Implementing the observer pattern carries some risks. It will result in extremely complex code if it is not implemented appropriately.
• The primary drawback of this pattern is that the observers are notified in random order.
• The explicit registering and unregistering of the observer causes a memory leakage issue in this pattern.

Closing Lines

The Observer pattern of software design offers an effective way to manage the relationships between objects in your application. The fundamental approach of this pattern is to promote communication between objects while preventing tight coupling. With the help of this pattern, one object (the subject) can notify multiple dependent objects (the observers) when its state changes. 

The adaptability of the observer pattern is one of its key advantages. It is frequently used in graphical user interfaces, event-driven systems, and architectural paradigms like Model-View-Controller (MVC). Consider a subscription-based news service where subscribers (observers) get updates whenever new articles are published (state changes in the subject). This illustrates how the pattern’s decoupled architecture facilitates seamless interaction.

The Observer pattern is adaptable to meet the unique demands of any application, accommodating either a push model (where observers receive data updates) or a pull model (where observers request data as needed). This flexibility empowers one to build software capable of managing intricate interactions and evolving requirements seamlessly. 

Frequently Asked Questions On The Observer Design Pattern JavaScript

What Problem Does The Observer Pattern Solve?

The Observer Pattern addresses the need for a flexible and decoupled notification system between objects. It solves the problem of tightly coupling objects where changes in one object directly affect another, making them difficult to maintain and modify independently.

When To Use Observer Pattern JavaScript?

Consider The Observer Pattern When:

• You need to implement a one-to-many relationship between objects, where one object (subject) notifies multiple objects (observers) of changes.
• You want to decouple objects from each other, promoting loose coupling and improving maintainability and reusability.
• You’re working with event-driven systems or asynchronous operations where multiple components need to react to the same event.

Haritha N

March 4, 2024

Last updated: August 16, 2024