Difference between Javascript property with and without underscore

Question

I saw the below code at https://javascript.info/class

Its constructor is taking the name parameter and assigning it to this.name. Then in the getter named name it is returning this._name. Why does this code work even when the constructor is not using this._name to set the value?

class User {

  constructor(name) {
    // invokes the setter
    this.name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short.");
      return;
    }
    this._name = value;
  }

}

let user = new User("John");
alert(user.name); // John

user = new User(""); // Name is too short.

They are two different properties, because they have different names. In this code, the "_name" property is an ordinary property, while "name" is a getter/setter property. — Pointy, Jul 06 '23 at 00:33
The "_" itself means nothing; it is not special, just another character that can be used in an identifier. — Pointy, Jul 06 '23 at 00:33
JS variables names follow JS variable naming rules. That's it. Everrything matters: `name` is not `Name`, `_name` is not `name`, `$name` is not `name`, the end. — Mike 'Pomax' Kamermans, Jul 06 '23 at 00:39
Does this answer your question? [Is the underscore prefix for property and method names merely a convention?](https://stackoverflow.com/questions/4484424/is-the-underscore-prefix-for-property-and-method-names-merely-a-convention) — InSync, Jul 06 '23 at 00:58

jabaa · Accepted Answer · 2023-07-06T00:40:26.517

6

The underscore is a normal character and doesn't have a special meaning in JavaScript. You could replace it with p for private or something else.

The property this.name has a getter and a setter.

this.name = name; in the constructor calls the setter. There is even a comment // invokes the setter.

The setter set name(value) sets this._name = value;.

edited Jul 06 '23 at 00:40

answered Jul 06 '23 at 00:32

jabaa

5,844
3
9
30

does parameter value get passed to the setter automatically in the line this.name = name? – vaichidrewar Jul 06 '23 at 01:13
@vaichidrewar I don't understand your question. Read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set – jabaa Jul 06 '23 at 01:14
I am still trying to understand details of how this.name = name is working. In this.name = name, is “this.name” referring to the setter method or name after the = is referring to the setter method or name after = is referring to parameter name? – vaichidrewar Jul 06 '23 at 01:55
1

@vaichidrewar `this.name` has a setter. When you assign a value with `=`, the setter is called. `this.name = value` calls the setter `name` with the argument `value`. – jabaa Jul 06 '23 at 08:44

score 1 · Answer 2 · answered Jul 06 '23 at 00:48

The get and set keywords mean those funcs are invoked automagically, so when you create the new User and call alert(user.name), you're accessing _name and never name. You could rename _name to foo or _foo and it would work the same way.

...
  get name() {
    return this.foo;
  }

  set name(value) {
    ...
    this.foo = value;
  }

}

let user = new User("John");
alert(user.name); // John (still works)

Difference between Javascript property with and without underscore

2 Answers2