JS: Team Stats project, why does an underscore do this?

Can someone explain the functionality of an underscore? In the Team Stats project. I set the properties to be _games and _players

I then created my getter methods, defining them as get _games and get _players. However this seemed to create an endless loop.

RangeError: Maximum call stack size exceeded
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:36:18)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)
    at Object.get _players [as _players] (c:\Users\munro\Documents\Codecademy Projects\TeamStats\app.js:37:21)

Changing the method name to get games and get players returned the expected array. I’m just wondering why the underscore caused that range error? I thought an underscore only had a cosmetic effect in that it lets people reading the code know to not modify that property.

giving the property the same name as the getter will lead to the getter endlessly calling itself. Has recursion for function already been explained? That is also what is happening with the getter.

this:

myObj = {
  a: 3,
  get b()
  { 
     return this.a;
  }
}

console.log(myObj.b)

is valid syntax. But very confusing. getter named b return property a. Confusing. And you don’t instantly see that a uses a getter (especially if the object contains more properties).

so the underscore is pretty useful convention.

But we always have to avoid the recursion.

1 Like

Ah k that’s helpful to know thanks. Does JS prioritise methods over (non-method) properties?

I initially had:

const team = {
  _players: [],
  get _players () {
        return team._players;
    }
}

Which resulted in the loop. I’ve now had it changed to:

const team = {
  _players: [],
  get players () {
        return this._players;
    }
}

But just wondering.

getters are special, according to mdn:

The get syntax binds an object property to a function that will be called when that property is looked up.

so yes, the case getters, doing:

  get _players () {
        return team._players;
    }

because team._players (or this._players) will attempt to look up the property. But because of the binding, the getter will called. Which leads to recursion (a function endlessly invoking itself).