Field, getter and setter with the same name

Question

Could you explain why I get

Uncaught RangeError: Maximum call stack size exceeded

in this example. What's the sequence of actions?

"use strict";

let myClass = class myClass{
  constructor(name){ 
    this.name = name;
  } 
  get name() { return this.name; } 
  set name(name){ this.name = name; }
}  

let myObj = new myClass("John");

Answer 1

You're calling the setter from the setter, infinitely looping.

set name(name) {
  this.name = name; // <-- ⛔ `this.name` calls the `set`ter again
}

You should use a differently named backing variable of some sort. Unfortunately the "TC39 Private Fields" proposal for JS is not finalized so they will be public, and a naming convention is needed for now.

Here's a modern example:

class Person {
  _name = ""; // 'private' by convention, see also: https://github.com/tc39/proposal-class-fields#private-fields
  get name() {
    return this._name;
  }
  set name(value) {
    this._name = value;
  }

  constructor(name) {
    this.name = name;
  }
}

Or following the Question's structure:

"use strict";

let myClass = class myClass {
  constructor(name) {
    this.name = name;
  }

  get name() {
    return this._name;
  }

  set name(name) {
    this._name = name;
  }
}

let myObj = new myClass("John");

console.log(myObj);

To my surprise it's not trivial to have variables private to a class.