Skip to main content

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.

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) {

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) {, o);

function run() {
var clickHandler = function (item) {
console.log('Fired:' + item);

var click = new Click();

click.subscribe(clickHandler);'event #1');
click.unsubscribe(clickHandler);'event #2');
click.subscribe(clickHandler);'event #3');



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.