Observer Pattern

A software design pattern where an object (subject) maintains a list of its dependents (observers) and notifies them of state changes.

Key Concepts

  • Subjects maintain observer lists
  • Observers register to receive updates
  • Changes trigger automatic notifications

Implementation Example

Subject Class

class Subject {
  constructor() {
    this.observers = [];
  }

  // Register observer
  subscribe(observer) {
    this.observers = [...this.observers, observer];
  }

  // Unsubscribe observer
  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  // Notify all observers
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

Observer Class

class Observer {
  constructor(id) {
    this.id = id;
  }

  // Handle update
  update(data) {
    console.log(`Observer ${this.id} received:`, data);
  }
}

Usage Example


                    

                

            

        


        
        

            
Frequently Asked Questions

            
            

                

                    

                        
What are common use cases?

                        
                    

                    
                


                

                    

                        
How is it different from Publish/Subscribe?

                        
                    

                    
                


                

                    

                        
Can we use observers in React?