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