Design and implement a thread-safe observable/reactive data binding system.

Observable with Copy-on-Notify

Copy the observers list before notifying to prevent concurrent modification issues. Use closure-based unsubscribe for clean cleanup.

class Observable {
  constructor(initialValue) {
    this._value = initialValue;
    this._observers = [];
  }

  get value() {
    return this._value;
  }

  set value(newValue) {
    const oldValue = this._value;
    this._value = newValue;
    // Copy observers to prevent issues if observers are added/removed during notification
    const snapshot = [...this._observers];
    for (const observer of snapshot) {
      try {
        observer(newValue, oldValue);
      } catch (e) {
        console.error('Observer error:', e);
      }
    }
  }

  subscribe(observer) {
    this._observers.push(observer);
    // Return unsubscribe function
    return () => {
      const index = this._observers.indexOf(observer);
      if (index > -1) this._observers.splice(index, 1);
    };
  }
}

// Usage:
const name = new Observable('Alice');
const unsub = name.subscribe((newVal, oldVal) => {
  console.log(oldVal, '->', newVal);
});
name.value = 'Bob'; // logs: Alice -> Bob
unsub(); // clean up