Observer-Pattern | Javascript Design Pattern Simplified | Part 3
Tags: webdev, javascript, programming, tutorial
Published: 2024-07-02 09:00:00

As a developer, understanding various JavaScript design patterns is crucial for writing maintainable, efficient, and scalable code. Here are some essential JavaScript design patterns that you should know:

##Observer Pattern

The Observer pattern allows objects to notify other objects about changes in their state.

**Example**

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

  addObserver(observer) {
    this.observers.push(observer);
  }

  notifyObservers(message) {
    this.observers.forEach(observer => observer.update(message));
  }
}

class Observer {
  update(message) {
    console.log(`Observer received: ${message}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyObservers('Hello Observers!');`

##Real World Example

###Stock Market

**Real-World Scenario:** A stock market application where investors subscribe to stock updates. When the stock price changes, all subscribed investors are notified.

**Define the Subject Class:**
```
class Stock {
  constructor(symbol) {
    this.symbol = symbol;
    this.price = 0;
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(sub => sub !== observer);
  }

  setPrice(price) {
    this.price = price;
    this.notifyObservers();
  }

  notifyObservers() {
    this.observers.forEach(observer => observer.update(this.symbol, this.price));
  }
}
```
**Define the Observer Class:**
```
class Investor {
  constructor(name) {
    this.name = name;
  }

  update(symbol, price) {
    console.log(`${this.name} notified: ${symbol} is now $${price}`);
  }
}
```

**Use the Observer Pattern:**

```
const googleStock = new Stock('GOOGL');

const investor1 = new Investor('Alice');
const investor2 = new Investor('Bob');

googleStock.subscribe(investor1);
googleStock.subscribe(investor2);

googleStock.setPrice(1200);
// Alice notified: GOOGL is now $1200
// Bob notified: GOOGL is now $1200
```

##Use Cases of the Observer Pattern

**1.Event Handling Systems:** Used in systems that handle various events and notify subscribers about these events (e.g., event listeners in UI frameworks).

**2.Real-time Data Streaming:** Useful in applications that need to react to real-time data updates (e.g., stock price tickers, live sports scores).

**3.MVC Architecture:** Often used in the Model-View-Controller architecture to synchronize the view when the model changes.

**4.Notification Systems:** Implementing systems that notify users of changes or updates (e.g., social media notifications, email alerts).

**5.State Management:** Useful in state management libraries to manage and propagate state changes across components (e.g., Redux, MobX).


### Conclusion

Understanding these design patterns and knowing when to apply them can greatly improve your coding skills and make you a more effective full-stack developer. They help in creating robust and maintainable code.

Mastering these patterns will help you build better software.

Happy Coding! 🧑‍💻

**Connect with Me 🙋🏻: [LinkedIn](https://www.linkedin.com/in/aakash-kumar-182a11262?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app)**