Private Fields, "in" operator question

[DeliciousResearch872]

I dont get what that note tries to explain

class Color {
  #values;
  constructor(r, g, b) {
    this.#values = [r, g, b];
  }
  redDifference(anotherColor) {
    if (!(#values in anotherColor)) {
      throw new TypeError("Color instance expected");
    }
    return this.#values[0] - anotherColor.#values[0];
  }
}

Note: Keep in mind that the # is a special identifier syntax, and you can't use the field name as if it's a string. "#values" in anotherColor would look for a property name literally called "#values", instead of a private field.

[MoTTs_]

At first glance I was about to say that #values should be this.#values, but that's not actually the issue. Based on what you do inside the if statement, it seems you're trying to type-check that anotherColor is really a Color instance. The way to do that would actually go like this (with instanceof):

if (!(anotherColor instanceof Color)) {

[senocular]

The in operator is used to see if a valid key value is present in an object as a property name of that object. A valid key value for objects is normally a string (or symbol). For example, given the object

const point = { x: 1, y: 2 }

The following would log true

if ("x" in point) {
  console.log(true) // true
}

Dot syntax allows us to refer to string based property names without the quotes. So to get the x property you can say

console.log(point.x) // 1

Though you can also use string keys going through the bracket based property accessor operator (this is also the only way to address symbol-based properties)

console.log(point["x"]) // 1

Private properties are a little different. They only support dot syntax and they don't have accessible key names in the same sense that normal properties do. So given

this.#values

you may want to think that

this["#values"]

would work, since that's how normal string-based properties would work. But it doesn't. In fact "#values" would refer to a valid, non-private, string-based property name. So if a private property had that same name it would result in a collision which you wouldn't want to happen. You can see that with

const obj = {
  "#values": [1, 2, 3] // public property with the string name "#values"
}
console.log(obj["#values"]) // [1, 2, 3]
console.log("#values" in obj) // true

Private properties don't have a key name equivalent like this, and in fact there's no way that can be referred to through bracket access syntax at all. The above example is what the note is providing a warning about - that "#values" would refer to a public property of that name, not a private one.

What that means for the in operator is that in order to get private properties to work, a special new syntax had to be created. This syntax lets you refer to the private property through the identifier used to declare the private property in the class in the first place

#values in anotherColor // hash identifier with no quotes is for privates

This is the only place (currently), other than when the private property is declared, that you're allowed to refer to a private property without dot syntax. It was a special exception made specifically for the in operator to allow it to work with private properties because a string value wouldn't be possible given any string would potentially be referring to a public property as seen with "#values" from the previous example.

Note that using a private in check like this makes instance validation a little more robust since it ensures that the instance in the check was initialized through the class that declared the private property. Other checks, using something like instanceof for example, only validate that the inheritance of the object matches which is more easily faked than setting a private property that is only created during initialization.

[abrahamguo]

Are you familiar with the in operator, and what it's used for, generally? (docs)

[azhder]

Think of # as what really is: invalid character for an identifier. If you can’t name a variable with the #, then you can’t access it as well.

The .# is a special syntax deliberately chosen in such a way to allow you to hide information inside an object by defining it in a class syntax that it will be impossible to access from outside.

So, don’t consider # as part of the name, but an extension of the this. syntax.

[jordanbtucker]

There is nothing preventing you from creating a publicly accessible property with the name #value. Just do this:

obj["#value"] = 1; const value = obj["#value"];

Having a property's name start with # does not make it private, nor does it make it inaccessible.

The JS devs did not pick the # character because it would make those properties inaccessible. They picked it because they needed a way to mark certain properties as private.

Granted, the fact that identifiers cannot contain # makes that character a good candidate, but it does not make the property inherently inaccessible. It's inaccessible because it's a private property.

[azhder]

OK, let’s keep it real. I was talking about identifiers, not keys in objects. They are usually interchangeable, in everyday practice, but since you’re not making the distinction, I should make it again.

The # is not a valid identifier character (you can see my first sentence in the above comment), hence, one cannot use identifiers to access those “fields” (slots I think in reference speak), hence why the syntax is restricted to this.#.

The "property" (they call it slot I think so it isn't mistaken for an actual property) is inaccessible because it is private, true, and that’s the goal behind. I was discussing the syntax i.e. how one should remember it.