Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Computed properties: getters and setters" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

ES6 computed properties help you write consistent interfaces for your JavaScript objects.

Get Unlimited Access Now

Transcript from the "Computed properties: getters and setters" Lesson

[00:00:03]
>> Steve Kinney: So, we've like started with doing everything in component state. And then we moved to a flux architecture. And then we moved to redux, which is like an implementational flux. And then we focused on a whole bunch of asynchronous models for dealing with redux. What we're gonna do now is shift gears a little bit.

[00:00:24] We're gonna talk about a different way of thinking about state and managing state in our application in a library called Mobx. We are gonna again dive a little bit into the JavaScript programming language to understand some of the things that we might see along the way. So let's do that.

[00:00:42] First, we are gonna talk a little bit about Computed Properties. Which are technically an ES5 feature, but we'll see why you probably didn't hear of them until ES6. So let's talk about the problem that they're solving first. So here we have a person class and it's got a first name and a last name.

[00:01:03] Seems legit. But if we wanna get the full name, that's weird, right? It's a function. And so now we have this like kind of squirrely API where we can make a new person and we can call up person.firstName and we're gonna get Grace. And we call person.lastName where we got Hopper.

[00:01:23] If we call person.fullName, we're going to get a function signature. Or reference to a function, right? And this kind of breaks what we normally call the universal access principle, right? Where like the person consuming our code shouldn't have to know the difference. And so here they would have to know that this one is a function, and it breaks that principle that we try to adhere to whenever possible, and that's not great.

[00:01:51] And different libraries have done different things to try to get around this. I think about Ruby. Really everything is technically a method call. Right, and you don't need the parenthesis. So you actually always using the parenthesis but they are optional so you never think about the difference. That's one way of like enforcing that.

[00:02:09] But more commonly we see stuff like backbone and amber where no matter what, you have to use a get and a set method, right, and you're not supposed to access stuff directly. That would be true in React if we had a get state on the actual component state, we would never touch the state directly, we'd only set state and use get state.

[00:02:29] But the idea there is even a not great syntax, having to use get and set all the time and passing the string. So the property1 can sometimes be better than inconsistency right? Consistent not great is usually better than inconsistency at large. But it turns out in ES6 we can do this.

[00:02:48] And the only difference here from what we saw previously is, I use this little get keyword before the method. And now, look at that. I can, I got the universal access principle, right? I can just simply go ahead and use it the same way, it's technically gonna call that function and everything is great.

[00:03:08] And I can wear my sunglasses. So I mentioned a little bit earlier that these are actually present in ES5 that you could do this. And like, if you think about working with like, just like vanilla DOM manipulation. We know that we can assign stuff to the inner text and stuff will change.

[00:03:26] We know that there's things that you can keep assigning stuff and they don't change. We know that in a lot of the internal browser APIs. Equal does weird things, right? It'll update the DOM, it will like be ignored in other cases. So a lot of this has been kind of under the hood.

[00:03:41] And so the reason you probably didn't see it a lot in ES5 is cuz this is what it looked like in ES5. [LAUGH] You would create the person constructor, and then you'd use this object to define property. And if it makes you feel any better, there is an object to define properties, so you could do more of these at once.

[00:04:01] And you'd give it a target object, which property you wanted to have some insight into. And then an object full of different options. So here we are implementing the getter that we saw with that three letters in ES6 is a little bit more ceremony in ES5. So now that we have that.

[00:04:21] It's been there previously. And there is other things you can do. But I'm gonna punt on that for a little bit, to a one more JavaScript topic.