Object Descriptors & Property Flags

Why is the 'observers' property defined with a getter that returns a copy?

function Observable() {
  const observers = [];
  
  Object.defineProperty(this, 'observers', {
    get() { return [...observers]; }
  });
  
  this.addObserver = function(observer) {
    observers.push(observer);
  };
  
  this.notifyAll = function(data) {
    observers.forEach(observer => observer(data));
  };
}

To improve performance
To make observers enumerable
To prevent external code from modifying the internal observers array
The 'observers' property is defined with a getter that returns a copy to prevent external code from modifying the internal observers array: 1) It returns a new array with [...observers] to create a defensive copy, 2) This prevents external code from directly adding, removing, or reordering observers, 3) It maintains encapsulation by controlling access to the internal state, 4) Changes to the array must go through the public API (addObserver), 5) This ensures the Observable maintains control over its observer list, 6) It's a common pattern for protecting internal collections while still providing read access, 7) Without this protection, external code could interfere with the observer notification mechanism.
It's a JavaScript requirement for arrays

Next Question (22/40)