Observer Design Pattern using Javascript

Design patterns are used to solve the specific problems in the software. Today we will be discussed about Observer Pattern in javascript.

Observer pattern is a software design pattern in which an object, called subject, maintains a list of its dependencies called observers and notify them automatically of any state changes.

For Example, In react if state changes then components will re-render accordingly. this process is similar to observer pattern functionality.

Below is the sample program for observer pattern.

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

Subject.prototype={
  add:function(fn){
    this.obeservers.push(fn)
  },
  remove:function(fn){
    this.obeservers=this.obeservers.filter(fun=>f!=fn)
  },
  notify:function(){
    this.obeservers.forEach(fun=>{
      fun.call()
    })
  }
}
function observer1(){
  console.log("in the observer1")
}
function observer2(){
  console.log("in the observer2")
}
const subject=new Subject();
subject.add(observer1);
subject.add(observer2);
subject.notify() // It will loop through all the observers.

In the above example, we have created the Subject constructor function. And it has observers list property, add, delete and notify methods.

Observers: It will have no.of observers.
Add: It will add observers(functions) to that list.
Remove: this method will remove the function from the list based on its argument.
Notify: this will notify all the observers in the list.

Comments and suggestions are always welcome.