Object Descriptors & Property Flags

How does a computed getter property respond to dependency changes?

const settings = { darkMode: false };

Object.defineProperty(settings, 'theme', {
  get() {
    return this.darkMode ? 'dark' : 'light';
  },
  enumerable: true
});

console.log(settings.theme);
settings.darkMode = true;
console.log(settings.theme);

'light', 'light'
'light', 'dark'
The console will log 'light' then 'dark' because: 1) The 'theme' property is a getter that computes its value based on the darkMode property, 2) Initially darkMode is false, so the first call returns 'light', 3) After changing darkMode to true, the getter recalculates and returns 'dark', 4) This demonstrates how accessor properties can create computed/derived values, 5) The property dynamically reflects the current state without needing explicit updates, 6) This pattern is useful for values that depend on other properties, 7) It maintains the DRY principle by computing values rather than duplicating state.
'dark', 'light'
'dark', 'dark'

Next Question (29/40)