> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/javascript-interview-questions/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/javascript-interview-questions/question-82.md).

# Question 82

### Question

Describe the implementation of the Observable pattern in JavaScript.

### Answer

The Observable pattern in JavaScript enables you to create objects that can notify multiple subscribers (observers) about changes or events happening within them.

**Key Concepts:**

1. **Observer:** A component that wants to be notified of changes. It implements a `next`, `error`, and `complete` callback function.
2. **Observable:** An object that emits values over time and allows observers to subscribe and unsubscribe.
3. **Subscription:** The mechanism by which an observer registers with the observable, receiving notifications about emitted values.

**Implementation (Simple Example):**

```javascript
class Observable {
  constructor() {
    this._observers = [];
  }

  subscribe(observer) {
    this._observers.push(observer);
    return { unsubscribe: () => this._observers = this._observers.filter(o => o !== observer) }; 
  }

  notify(value) {
    this._observers.forEach(observer => observer.next(value));
  }
}

class Observer {
  constructor() { }

  next(value) {
    console.log('Received value:', value); // Handle new data
  }

  error(err) {
    console.error('Error:', err);
  }

  complete() {
    console.log('Observable completed.'); 
  }
}

// Usage:
const observable = new Observable();
const observer1 = new Observer();
const observer2 = new Observer();

const subscription1 = observable.subscribe(observer1);
const subscription2 = observable.subscribe(observer2);

observable.notify('Hello!'); // Both observers receive "Hello!"


subscription1.unsubscribe(); 
observable.notify('World!'); // Only observer2 receives "World!"
```

**Explanation:**

1. **`Observable` Class:**
   * Stores an array of `observers`.
   * `subscribe()` adds a new observer to the list and returns a function (`unsubscribe`) for later removing it.
   * `notify()` iterates through all observers and calls their `next()` function with the emitted value.
2. **`Observer` Class:**
   * Defines callbacks: `next`, `error`, and `complete`. These methods handle different events from the observable.

**Benefits of Observables:**

* **Asynchronous Handling:** Streamline processing of data that arrives over time (e.g., network requests, user input).
* **Reactive Programming:** Make your code more responsive to changes in data, enabling efficient updates and visualizations.
* **Modular Design:** Observables allow you to break down complex logic into smaller, reusable components.

**Popular Libraries:**

* RxJS: A powerful and widely used library for reactive programming in JavaScript based on the Observable pattern.