The Observer Pattern<\/strong> is a design pattern used to manage and notify multiple objects when the state of an observable object changes. It\u2019s widely used in JavaScript to implement event-driven systems such as event listeners and publish-subscribe (pub\/sub) systems. This article will explain the concept, show how to implement it in JavaScript, and provide real-world examples.<\/p>\n\n\n\n The Observer Pattern follows a one-to-many relationship<\/strong> between objects. There\u2019s one subject (observable) that keeps track of its state, and multiple observers waiting for updates. Whenever the subject changes, it notifies all observers.<\/p>\n\n\n\n This pattern is common in:<\/p>\n\n\n\n Here\u2019s a simple implementation of the Observer Pattern in JavaScript. We\u2019ll create a Every time you attach a click event listener to a button, you\u2019re using the observer pattern under the hood. Here’s how it works:<\/p>\n\n\n\n JavaScript libraries like Node.js\u2019s In state management libraries<\/strong>, the app\u2019s state is the subject, and components act as observers. When the state changes, the observers (components) update automatically.<\/p>\n\n\n\nWhat is the Observer Pattern?<\/h2>\n\n\n\n
\n
How the Observer Pattern Works<\/h2>\n\n\n\n
\n
Example: Building a Custom Observer Pattern from Scratch<\/h2>\n\n\n\n
Subject<\/code> class that allows observers to subscribe, unsubscribe, and receive notifications when something changes.<\/p>\n\n\n\nCode Example<\/h3>\n\n\n\n
\/\/ Subject (Observable) Class\nclass Subject {\n constructor() {\n this.observers = []; \/\/ List of observers\n }\n\n \/\/ Add an observer\n subscribe(observer) {\n this.observers.push(observer);\n console.log(`Observer subscribed.`);\n }\n\n \/\/ Remove an observer\n unsubscribe(observer) {\n this.observers = this.observers.filter(obs => obs !== observer);\n console.log(`Observer unsubscribed.`);\n }\n\n \/\/ Notify all observers about a change\n notify(data) {\n console.log(`Notifying observers...`);\n this.observers.forEach(observer => observer.update(data));\n }\n}\n\n\/\/ Observer Class\nclass Observer {\n constructor(name) {\n this.name = name;\n }\n\n \/\/ Each observer handles updates differently\n update(data) {\n console.log(`${this.name} received data: ${data}`);\n }\n}\n\n\/\/ Usage Example\nconst subject = new Subject(); \/\/ Create a subject\n\nconst observer1 = new Observer('Observer 1'); \/\/ Create observers\nconst observer2 = new Observer('Observer 2');\n\n\/\/ Subscribe observers to the subject\nsubject.subscribe(observer1);\nsubject.subscribe(observer2);\n\n\/\/ Notify all observers with some data\nsubject.notify('New Update Available');\n\n\/\/ Unsubscribe an observer and notify again\nsubject.unsubscribe(observer1);\nsubject.notify('Another Update');\n<\/code><\/pre>\n\n\n\nExplanation<\/h3>\n\n\n\n
\n
\n
subscribe<\/code>, unsubscribe<\/code>, and notify<\/code> observers.<\/li>\n<\/ul>\n<\/li>\n\n\n\n\n
update<\/code> method to respond to changes.<\/li>\n<\/ul>\n<\/li>\n\n\n\n\n
Practical Use Cases of Observer Pattern in JavaScript<\/h2>\n\n\n\n
1. DOM Event Listeners<\/strong><\/h3>\n\n\n\n
const button = document.querySelector('#myButton');\nbutton.addEventListener('click', () => {\n console.log('Button clicked!');\n});\n<\/code><\/pre>\n\n\n\n\n
2. Custom Event Emitters (Pub\/Sub Model)<\/strong><\/h3>\n\n\n\n
EventEmitter<\/code> follow the observer pattern, enabling custom events. Here\u2019s a simplified implementation:<\/p>\n\n\n\nclass EventEmitter {\n constructor() {\n this.events = {};\n }\n\n on(event, listener) {\n if (!this.events[event]) {\n this.events[event] = [];\n }\n this.events[event].push(listener);\n }\n\n emit(event, data) {\n if (this.events[event]) {\n this.events[event].forEach(listener => listener(data));\n }\n }\n}\n\n\/\/ Usage\nconst emitter = new EventEmitter();\nemitter.on('dataReceived', (data) => console.log(`Received: ${data}`));\nemitter.emit('dataReceived', 'Hello World!');\n<\/code><\/pre>\n\n\n\n3. State Management Systems (Redux and MobX)<\/strong><\/h3>\n\n\n\n
Advantages of the Observer Pattern<\/h2>\n\n\n\n