Team stats Project -- how to use getter

Hi,

I encountered the same problem when I am working on both projects in the “Object” section of Javascript. The error looks like this, it is always about “push”

If I take out the getter, it works but if I put it in, It just doesn’t and I really cannot see why… I checked everything. I have the same problem with the other project: meal maker.

Since the Team Stats project is shorter, below is a link to the assignment, I will ask this one:

Team Stats Project

My code:

const team = {
  players :[
    {firstName: 'Pablo',
    lastName: 'Sanchez',
    age: 11, 
  },
    {firstName: 'John',
    lastName: 'Chen', 
    age:  12, 
  },
    {firstName: 'Lily',
    lastName: 'Chan',
    age: 13
  },
  ],

  get players () {
  return this._players;
},
  
addPlayer (firstName, lastName, age) {
    let player = {
      firstName:firstName,
      lastName:lastName,
      age:age,
    };
  
    this.players.push(player);
  },
};

team.addPlayer('Steph', 'Curry', 28);
team.addPlayer('Lisa', 'Leslie', 44);
team.addPlayer('Bugs', 'Bunny', 76);
  
  
console.log(team.players);

Thank you in advance for your help. Really appreciate it!

here:

return this._players;

the getter returns this._players, but there is no this._players, so you get undefined

when using getters, the property is as a convention prefixed with an underscore:

example = {
   _prop = 'abc'
  get prop(){ return this._prop }
} 

now the this._prop within the getter will fetch _prop, which has abc as value

1 Like

omg… Thank you so much!!! Everything makes much more sense now! Thanks again!!

I have one additional question. In this project, the getter for players is very simple. It is just return this._players;. However, in the other project, meal maker, one of the getter was much more specified. I do not understand why.

Please see the code below:

const menu = {
 _courses : {
  _appetizers: [],
  _mains: [],
  _desserts: [],

  get appetizers(){
   return this._appetizers;
  },
  set appetizers(appetizerInfo){
   this._appetizers.push(appetizerInfo);
  },
  get mains(){
   return this._mains;
  },

//I skipped the setters

 	get courses(){
 	return {
    appetizers: this._courses.appetizers,
    mains: this._courses.mains,
    desserts: this._courses.desserts,
   }

Thanks again!!

you are dealing with nested objects, making the getters more complicated.

the solution of meal maker does something tricky, but first lets do the simple example:

# example one
const menu = {
    courses: {
         appetizers: [],
         mains: [],
         desserts: [],
    }
}

example one is without getters and setters, to access mains we need to do:

console.log(menu.courses.mains);

now for the tricky bit:

const menu = {
    _courses : {
        _appetizers: [],
        _mains: [],
        _desserts: [],
    }, // closes courses object

    get appetizers(){
         return this._courses._appetizers; 
    }
}

now we can just do:

console.log(menu.appetizers);

this calls the getter, which access _appetizers property in _courses object

furthermore, this is very interesting:

set appetizers(appetizerInfo){
   this._appetizers.push(appetizerInfo);
  },

you now change the setter behavior, full example:

const menu = {
    _courses : {
        _appetizers: [],
        _mains: [],
        _desserts: [],

        get appetizers(){
            return this._appetizers;
        },
        set appetizers(appetizerInfo){
            this._appetizers.push(appetizerInfo);
        },
        get mains(){
            return this._mains;
        },
        get desserts(){
            return this._desserts;
        }
    },

    //I skipped the setters

    get courses(){
        return {
            appetizers: this._courses.appetizers,
            mains: this._courses.mains,
            desserts: this._courses.desserts,
        }
    }
}

menu._courses.appetizers = 'some dish'
menu._courses.appetizers = 'another dish'

console.log(menu.courses.appetizers);

now you assign to appetizers (using the setter) which will push to the array, which is different from normal assign behavior.

I see I see. So it depends on your needs in the project, whether you need access to those properties.

Thank you so much!! I understand getter and setter much better now!