Learn JavaScript: Objects Team Stats


#1

Hello,
I have been having a hard time understanding objects, mostly the getter and setter methods.

While working on the Team Stats project I have found myself at a road block and can not seem to find what my problem is.

Can anyone please take a look at my code and provide me with not just the answer but a way to better understand it for future situations.

[Team Stats free form project]

const team = {
  _players: [
    {firstName: "James", lastName: "McD", age: 27},
    {firstName: "Jan", lastName: "Pat", age: 31},
    {firstName: "Elijah", lastName: "McD", age: .75}
  ],
  _games: [
    {opponent: "Bulls", teamPoints: 65, opponentPoints: 42},
    {opponent: "Celtics", teamPoints: 71, opponentPoints: 35},
    {opponent: "Allstars", teamPoints: 85, opponentPoints: 32}
  ]
  
  get players() {
  	return this._players;
	}
  get games() {
  	return this._games;
	}
	
	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);`

Thanks in advance


#2

you miss a lot of commas (,) to separate properties of the object:

_games: [
    {opponent: "Bulls", teamPoints: 65, opponentPoints: 42},
    {opponent: "Celtics", teamPoints: 71, opponentPoints: 35},
    {opponent: "Allstars", teamPoints: 85, opponentPoints: 32}
  ] // missing ,
get players() {
  	return this._players;
	}  // missing ,
  get games() {
  	return this._games;
	} // missing ,

see the comments.

well, when we have an object:

const myObject = {
    myProperty: [1, 2, 3]
}

we could get the property doing and log it doing:

console.log(myObject.myProperty)

this would display the array, bit ugly so we could do:

const myObject = {
    _myProperty: [1, 2, 3],
    
    get myProperty(){
        return this._myProperty.join(" ");
    },
}

console.log(myObject.myProperty);

the _ before the myProperty indicates we want to use getters and setters methods to manipulate the property. So now when we try to read (get) the myProperty, the getter method is used, which gives us a nice string representation of our array.

for the setter method, we could for example force to append to array rather then overwriting the array:

const myObject = {
    _myProperty: [1, 2, 3],
    
    get myProperty(){
        return this._myProperty.join(" ");
    },
    
    set myProperty(number){
        return this._myProperty.push(number)
    }
}

console.log(myObject.myProperty);
myObject.myProperty = 4;
console.log(myObject.myProperty);

so getters and setters are called when we try to get or set a property of the object

feel free to play with these examples on sites like repl.it or jsbin.com


How do I properly use the syntax for a setter method?
#3

Thank you very much, I have a better understanding of the two methods now. I will take a look at the two sites because I can definitely use the practice.


#4

jsbin also support es6/babel to transpile, quit useful. Something i learned to do. Click the blue javascript with arrow on the top of the jsbin file


#5

A post was split to a new topic: Getters and setters


#6

when I try to add join to my getter methods, it keeps coming back as a system error. Why is this?

get players() {
  	return this._players.join(" ");
	},

#7

i only used .join() as an example to show how getter method works?

.join() is a method for an array, this._players is not an array


#8

ok, so how can I change the way the method prints to the console?

{ firstName: ‘Steph’, lastName: ‘Curry’, age: 28 },
{ firstName: ‘Lisa’, lastName: ‘Leslie’, age: 44 },
{ firstName: ‘Bugs’, lastName: ‘Bunny’, age: 76 } ]

is how it is printing.


#9

that is up to you, the point of join in my example was to show how getters work

What have you learned so far what could help you make an object display nicer?


Is my hypothesis for Getter's and setter's correct?
#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.