Question about getters and the Team Stats Assignment

Team-Stats Assignment

Hello my code is below;

const team = {
  _players: [
    		{firstName: 'Arif',
    lastName: 'Erdem',
    age: 27},
        {firstName: 'Gheorge',
    lastName: 'Hagi',
    age: 35},
        {firstName: 'Gheorge',
    lastName: 'Popescu',
    age: 35},
  ],
  _games: [
    {
      opponent: 'Leeds',
      teampPoints: 42,
      opponentPoints: 22 
    },
    {
      opponent: 'Chelsea',
      teampPoints: 52,
      opponentPoints: 22 
    },
    {
      opponent: 'Arsenal',
      teampPoints: 62,
      opponentPoints: 22 
    },
  ],
      get players () {
  return this._players
},
  get games() {
    return this._games
  },
  addPlayer(firstName, lastName, age) {
    return this._players.push( {
      firstName,
      lastName,
      age
    })
  }
}

console.log(team._players)
team.addPlayer('Ömer', 'Albulak', 34)
console.log(team._players)

We want to add a new player to your team. Add a method addPlayer to your team object. This method should take in three parameters: firstName , lastName , and age . It should create a player object, and add them to the team ‘s players array.

I have 2 questions:
1- My code works just fine as opposed to the way assignment’s hint leads to. What assignment does is:

const team = {
  ...
  addPlayer(firstName, lastName, age) {
    let player = {
      firstName: firstName,
      lastName: lastName,
      age: age
    };

    this.players.push(player);
  },
  ...
};

Even though I achieved what the assignment wanted from me without following its way, is it correct to solve the assignment in the manner I did? Or did I make a mistake somewhere which will eventually lead me to ruins in my code?

2- I do not understand the reference to the getter in the above coding. this.players.push(player); <-- How does that add the new player into the _players string? Don’t you need to type _ for it? Or does the getter I created fix that? If so how does that actually work?


      get players () {
  return this._players

What does the above code actually do?

Using the getter would be better, is more consistent and should lead to less bugs in the long run. If your codebase grows, and you have places where you use the getter and where you bypass the getter, the code becomes a bit messy

but now you could also consider using a setter.

this.player is the getter, which returns the _player property. Unfortunately Js does not enforce you to use the getter once you defined it, you can bypass the getter using this._players.

4 Likes

Okay I understand it now. I also know why we use getter and setter. There are certain keys that requiers certain type of value. So if people mess that up it can break the code. As such coders use _ to let other coders peeking know that said bit of the program requires a certain value. So people use getter and setter not to upset the code.

I have one more question;
I updated my code to include the getter and it works:

addPlayer(firstName, lastName, age) {
    return this.players.push( {
      firstName,
      lastName,
      age
    })
  }

That’s my code and below is the code hint suggests:

const team = {
  ...
  addPlayer(firstName, lastName, age) {
    let player = {
      firstName: firstName,
      lastName: lastName,
      age: age
    };

    this.players.push(player);
  },
  ...
};

Is there a problem with the way I go about solving this problem? Or is it healthier to add a variable and then assign the new player's keys, values to it? 

Merhaba @meralbulak8877024881,

Jeepers, some questions there.

I am a bit confused how your addPlayer works since you are pushing values and not key-value pairs. Somehow it must know to interpret them correctly and auto fill the keys. @stetim94 can you shed light on this?

Now to your first question, I have implemented this._players.push(player) myself. I am again confused as to why it works without the _. Only thing I can think of is that it gets access to the _player because you accidentally use the getter here.

Which gets me to your second question,

This is your getter method, it returns the content of _players which allows you to for instance print them using console.log(team.players);

4 Likes

Hallo!

Oh over there I was using Property Value Shorthand, a feature of ES6. I don’t need to type
firstName: firstName,

Instead it lets me simply type in
firstName,
.
Basically what it does is:

addPlayer(firstName, lastName, age) {

When you offer an argument inside the brackets and use comma, it considers it to be a key and also value. However if I wanted I could’ve still written:
firstName: firstName,
lastName: lastName,
or
sirName: lastName,

3 Likes

Interesting, did not know of this :wink: . Thanks!

3 Likes

this._players is an array ,so you still need to push the elements into the array.

3 Likes

Am I not pushing it via this code?

return this.players.push( {
firstName,
      lastName,
      age
    })

must have missed it, yes you are. But the push method itself doesn’t return anything so why do you use the return keyword here?

3 Likes

I may have memorized the factory functions. All the ones we used thus far had return in them, so that’s why I wrote return there as well. ie:

const monsterFactory = (name,age,energySource,catchPhrase) => {
return {
name: name,
age: age,
energySource: energySource,
scare () {
console.log(catchPhrase);
}
}
};

but its also important to understand when and why to use return.

4 Likes

return lets us save the outcome of a function or whatever it is we are doing.

With that logic .push already takes action, thus there is no need for a return. I see your point here.

4 Likes