It's #FrontendFriday - Observer pattern

What is the Observer pattern?

The Observer design pattern can be used to define dependencies between several objects. The object that is observed is called the subject. The observing object is the observer. If the subject changes, the associated observers are automatically updated. [4]

[3]

The major advantage of using the observer design pattern is that the subject does not have to be constantly checked for changes. As soon as the subject changes, the new value is automatically transmitted to all observers. 

Code-Example

What does the Observer pattern look like in Javascript? Here is an example:

function Subject(){
    this.frontendFridayObservers = [];
   }

Subject.prototype = {  
   subscribe: function(fn)  
   {    
     this.frontendFridayObservers.push(fn)  
   },  
   unsubscribe: function(fnToRemove)  
   {    
      this.frontendFridayObservers = this.frontendFridayObservers.filter( fn => {      
         if (fn != fnToRemove)        
               return fn    
      })  
   },  
   itsFrontendFriday: function()  
   {    
      this.frontendFridayObservers.forEach( fn => {
         fn.call()    
    })  
}}

 function FrontendFridayObserver1(){  
    console.log("It's FrontendFriday!")
 } 
 
 function FrontendFridayObserver2(){  
    console.log("It's FrontendFriday again!")
 }

 //subscribing the functions
const subject = new Subject();

subject.subscribe(FrontendFridayObserver1)
subject.subscribe(FrontendFridayObserver2)

//run all subscriptions
subject.itsFrontendFriday()

In the example above, there are 2 Observers - FrontendFridayObserver1 and FrontendFridayObserver2.

The itsFrontendFriday() method is used to call all subscriptions, whereupon the FrontendFridayObserver1 FrontendFridayObserver2 functions are executed. [2]

Issue:

[Running] node "c:\Users\Projekte\FrontendFriday\frontendFriday.js"
It's FrontendFriday!
It's FrontendFriday again!

[Done] exited with code=0 in 0.23 seconds

Relevance in JavaScript

Observers are a very efficient method of sharing information with different components.

However, this can also be a disadvantage, as all observers are always informed as soon as the subject changes. This increases the computing power and can have a negative impact on performance. In addition, the subject itself does not show how many observers exist and are updated.

Nevertheless, the observer pattern is very helpful, especially in front-end development.

One example is the use of Observer for user interfaces. If values change in the background, the display must also be updated accordingly to inform the user of these changes. [1]

 

The Webfrontend-FG wishes everyone a nice weekend!

Learn more about Java programming

 

Sources:

[1] Observer Pattern: What is behind the Observer Design Pattern?

[2] dofactory - Understanding JavaScript Observer Patterns

[3] dofactory - JavaScript Observer - Diagram

[4] dofactory - JavaScript Observer