Observer Design Pattern
Structural: Observer Pattern
Can you explain the observer design pattern?
View Answer:
Interview Response: The Observer is a behavioral JS design pattern that allows you to construct a subscription mechanism that alerts numerous objects (observers) about any events that occur to the object (subject) they're viewing. This pattern is also known as Pub/Sub, which stands for Publication/Subscription. It establishes a one-to-many relationship between items, encourages loose coupling, and aids in effective object-oriented design.
The observer pattern is at the heart of event-driven programming. We create event handler routines that are informed when a specific event occurs.
The observer pattern is at the heart of event-driven programming. We create event handler routines that are informed when a specific event occurs.
Code Example:


The objects participating in this pattern are:
Subject -- example code: Click
- maintains a list of observers. Any number of Observer objects can observe a single Observer object.
- The subject implements an interface through which observer objects can subscribe and unsubscribe.
- When its state changes, it sends a notification to its observers.
Observer -- example code: clickHandler
- includes a function signature that gets called when the Subject changes (i.e., an event occurs)
function Click() {
this.observers = []; // observers
}
Click.prototype = {
subscribe: function (fn) {
this.observers.push(fn);
},
unsubscribe: function (fn) {
this.observers = this.observers.filter(function (item) {
if (item !== fn) {
return item;
}
});
},
fire: function (o, thisObj) {
var scope = thisObj;
this.observers.forEach(function (item) {
item.call(scope, o);
});
},
};
function run() {
var clickHandler = function (item) {
console.log('Fired:' + item);
};
var click = new Click();
click.subscribe(clickHandler);
click.fire('event #1');
click.unsubscribe(clickHandler);
click.fire('event #2');
click.subscribe(clickHandler);
click.fire('event #3');
}
run();
/* OUTPUT:
Fired:event #1
Fired:event #3
*/
The Observer pattern belongs to which pattern category?
View Answer:
Interview Response: The Observer pattern is a type of behavioral design pattern.
Can you explain the Observer Pattern's use case?
View Answer:
Interview Response: Use Cases:
- To improve code management: We break down large programs into a system of loosely connected objects.
- To increase flexibility by allowing a dynamic relationship between observers and subscribers, which would otherwise be impossible due to tight coupling.
- To increase communication between the application's many components.
- To establish a one-to-many dependency between weakly related items.
What are some of the advantages of employing the Observer pattern?
View Answer:
Interview Response: Benefits of the Observer Pattern
- The Open/Closed Principle -- You can add new subscriber classes without modifying the publisher's code (and vice versa if a publisher interface exists).
- At runtime, you can create relationships between objects.
What are some of the Observer pattern's drawbacks?
View Answer:
Interview Response: Drawbacks of the Observer Pattern.
- Sends notifications to subscribers in random order.