ES6 Classes & Constructors

What modern JavaScript feature is used in the StateManager class?

class TextInput {
  constructor() {
    this.value = '';
  }
  
  setValue(value) {
    this.value = value;
  }
}

class StateManager {
  #listeners = new Set();
  #state = {};
  
  setState(newState) {
    this.#state = {...this.#state, ...newState};
    this.#notify();
  }
  
  getState() {
    return {...this.#state};
  }
  
  subscribe(listener) {
    this.#listeners.add(listener);
    return () => this.#listeners.delete(listener);
  }
  
  #notify() {
    for (const listener of this.#listeners) {
      listener(this.#state);
    }
  }
}

Arrow functions
Destructuring
Private class fields and methods
The StateManager class uses private class fields and methods: 1) The # prefix creates truly private class members, 2) #listeners and #state cannot be accessed from outside the class, 3) The #notify method is a private method only callable from within the class, 4) This provides true encapsulation at the language level, 5) This is a newer JavaScript feature (ES2022) that improves information hiding, 6) This ensures that the state can only be modified through the setState method, enforcing the API contract.
Spread operator

Next Question (23/28)