Bug in example of use of getter/setter methods in JavaScript "using classes" guide

[ye10dux]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes#private_fields

What specific section or headline is this issue about?

Private Fields

What information was incorrect, unhelpful, or incomplete?

Text describes abstracting implementation, gives example against using values[0] in favour of getRed/setRed. Constructor sets values from rgbToHSL but getRed/setRed still use values[0]

What did you expect to see?

Implementation of getRed/setRed should be in terms of hslToRGB

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

[EAM11x]

The code example provided there is between two paragraphs , read them you'll know why the code is that way :

There is a philosophy in object-oriented programming called "encapsulation". This means you should not access the underlying implementation of an object, but instead use well-abstracted methods to interact with it. For example, if we suddenly decided to represent colors as HSL instead:

class Color {
  constructor(r, g, b) {
    // values is now an HSL array!
    this.values = rgbToHSL([r, g, b]);
  }
  getRed() {
    return this.values[0];
  }
  setRed(value) {
    this.values[0] = value;
  }
}

const red = new Color(255, 0, 0);
console.log(red.values[0]); // 0; It's not 255 anymore, because the H value for pure red is 0

The user assumption that values means the RGB value suddenly collapses, and it may cause their logic to break. So, if you are an implementor of a class, you would want to hide the internal data structure of your instance from your user, both to keep the API clean and to prevent the user's code from breaking when you do some "harmless refactors". In classes, this is done through private fields.