JS.Next: ES6 / ES2015

JS.Next: ES6 / ES2015 Getters, Setters, and Class Properties


This course has been updated! We now recommend you take the ES6: The Right Parts course.

Check out a free preview of the full JS.Next: ES6 / ES2015 course:
The "Getters, Setters, and Class Properties" Lesson is part of the full, JS.Next: ES6 / ES2015 course featured in this preview video. Here's what you'd learn in this lesson:

Developers use getters and setters to expose private properties in an API. Aaron adds a getter and setter to his Monster class. He also demonstrates how to create public properties and methods and static types on a class.

Get Unlimited Access Now

Transcript from the "Getters, Setters, and Class Properties" Lesson

>> [MUSIC]

>> Aaron Frost: So when we get the health. So the health is not protected behind this obscurity pattern where people won't be able to see what the key is to get the health out or to manipulate it. So they'll set the health. You know, they'll be able to get the health out.

[00:00:23] And then they can say get.isAlive. So they'll be able to just say, monster.isAlive, and it will return if the health is greater than 0. So you'll be able to know if it's alive or not, right? And like, you could make it an attack method that could pick some random number between zero and the amount of points remaining.

[00:00:49] And it does some calculation to subtract some of the health left, and then isAlive could fire something else, or. And you could, anyway, yeah. So does that make sense? Like, you could make one that says, alert when dead, that returns a promise. We didn't talk about promises yet.

[00:01:11] Anyways, this is the syntax. Sorry, I'm nerding out on the monster concept, I apologize. I've got a three year old, and we talk a lot about it at my house. Okay.
>> Speaker 2: And how do you call that get function now [INAUDIBLE]?
>> Aaron Frost: Yeah, yeah, yeah. Good call. Let's copy this back over.

[00:01:28] Copy, Traceur. And then we're gonna change this to var so it doesn't freak. And then we're gonna say, var kevin = new Monster Kevin and we'll give him more hit points this time, right? And then we'll say, alert(kevin.isAlive).
>> Aaron Frost: So when you use that get syntax, you specify it as like a method call, but you treat it like a property.

[00:02:09] And this is part of ES5 spec, they have like a define on property. And it's kind of like getters and setters for JavaScript. And you could do the same thing if you wanted to. You could be like, set isAlive.
>> Aaron Frost: Alive. Bloody thing. Hold on, I've got to kill him.

>> Aaron Frost: And then we'll just be like, if not alive.
>> Aaron Frost: This sub monsterHealth is equal to 0. And then we could say kevin.isAlive = false and then we can say alert kevin.isAlive. And he's dead. We killed him with one Voldemort thing.
>> Speaker 2: Hope you feel better.
>> Aaron Frost: Yeah, I do.

[00:03:33] Anyway, does that make sense? Anyone, if you're not super familiar with getters and setters properties, check them out. They're pretty cool. You should start using them. But yeah. Good question. Thanks for asking that, cuz I didn't include it in the slide.
>> Speaker 2: I'm sorry. And one more. [INAUDIBLE] Can you also do it with this.isAlive?

[00:03:51] Does it work from within the class, or does it only work externally?
>> Aaron Frost: No, no, no. It totally works for me from within the class. So yeah, let's do that. I'll actually show you a weakness in the current implementation, if you want, that they're not going to fix.

[00:04:05] [LAUGH] How awesome is that?
>> Speaker 2: [LAUGH]
>> Aaron Frost: Shh, quiet down, you.
>> Aaron Frost: You go away. And you come out, okay. And you go away. Okay, so we're just gonna make a property. What did you want me to do, what was your question again, sorry?
>> Speaker 2: So I asked, you already answered, if you can do this.isAlive instead of just [INAUDIBLE]?

>> Aaron Frost: Yeah, totally, so we'll say foo.
>> Aaron Frost: So now we have a method foo our on our prototype, right? And we're gonna say console.log foo and this.isAlive. And then for that.
>> Aaron Frost: Someone wants to know I'm alive, and then.
>> Aaron Frost: So we're just gonna call kevin.foo. So when we called this, it was like, am I alive?

[00:05:40] And he's like, someone wants to know if I'm alive, and then he logged foo.true. So you can totally do that. Awesome, right? Who's ready for an endless loop?
>> Speaker 2: [LAUGH]
>> Aaron Frost: Okay, I'm ready. I'll show you, cuz we're friends, okay?
>> Aaron Frost: All right. [COUGH] All right, I'm gonna delete these, just because we're done with them.

[00:06:05] Okay, so I'm going to say set name.
>> Aaron Frost: Name.
>> Aaron Frost: this.name = name. Who can see the problem? I mean, it's down here in red. Who can tell why that's happening? Can you guys see it? Sorry. If I blow it up, it's going to go off the bottom.

[00:06:38] So you pretty much got to get what I can show you.
>> Speaker 3: Because it already have a name property assigned to it, and you're assigning to it.
>> Aaron Frost: So when you call set name, yeah. So right here, he's going to, he assigns this.name equals set name. Well, this.name is a call to this function right here.

[00:07:08] So he sets name. He does the same thing, he's like, well, this.name is equal to whatever name is being passed to me. So I'm going to call this and pass that, which is going to do this and call that, which is going to do this. So you're in an endless loop, all right?

[00:07:24] So that sucks. Can you do it? Yeah, you can totally do it. You could probably do it in ES5 today anyway, so It's probably not a thing you need classes. I just noticed it when I was testing this out, because I'm not smart, and I did this, and I was like, yeah, that was stupid of me.

[00:07:45] And I did it, so, good question. You can do this stuff and end up in the cyclical death trap. So we good? Okay.
>> Aaron Frost: All right.
>> Aaron Frost: Okay, set health, and I can pass in the value. And then this is how you set it, by using that same key that we talked about above.

[00:08:19] So you would call monster.health=100 and it would pass in a new health. Attack, you could you could pass in another monster and you could say, so, Kevin attacks whoever our second monster is, right? And it would log that if you called Kevin.attack and passed it another person. Which we may attack Kevin if he keeps it up with the thick arrow thing, right?

[00:08:45] Or was that not Kevin? That was like Seth or somebody? Okay. So, yeah. You can have static properties. Like, every time you create a monster, if you wanted to add yourself to the allMonsters array. You can go and push yourself into the allMonsters array. So that's a static property onto the class.

[00:09:11] Okay, so you can have static class properties if you wanted to do that.