Computed Properties Exercise

[00:00:00]
>> I've talked a bit about computed properties in Watchers, we're gonna have you go ahead and play around with that. So for your exercise, you will have put a bunch of characters inside of your show. So you probably have certain attributes that you can put basically on those characters, right?

[00:00:15]
Whether it's their age, height, whatever you want, but then based on those, add those attributes to your characters. And then use a computer property to start generating some sort of statistics. So for example, mine is Avatar Last Airbender. I could be like, okay, two of them are waterbenders, three of them are earthbenders, and then I can run computations on the percentage that might be.

[00:00:37]
So just have a play around with that, it's one of those things where we'll be reusing a lot as we go forward. And so, don't worry, you'll get plenty of opportunity to play around with that. Welcome back everyone. I hope that you found that exercise with the computer properties kinda fun to play around with.

[00:00:53]
But again, you'll get plenty of opportunity to practice that cuz I think it's one of the features we need to use more of and see more of in the ecosystem. So definitely we'll be pushing that. But during the exercise there was a great question regarding the differences between computed and watch.

[00:01:09]
Earlier in the example I showed, you notice that the reason why I mentioned that the watch is not a great sort of technique in this particular case is because you're dealing with the reactive data. In other words, you're basically doing a computation that you're manually tracking. This is not to say that watch as a technique is invalid, however.

[00:01:28]
What that really means is that when it comes to computing data, combining those things like we see up here with optimized increment amount. Where you have multiple dependencies, computed will do a lot of work for you right out of the gate. And so that's when you wanna do that, anytime you're modifying something returning it, and you wanna be like, I wanna display something slightly different.

[00:01:45]
And so actually the question earlier regarding the strings and combining them, that would be an example where the character list for example, could be like, let's say, comma separated. This is a bad name. But you could do something like this .characterList.split, you could do your calculation in here, and then just return that in the render thing, and that would already look good.

[00:02:07]
So I will show that later when we're doing it. But to the main plan I wanna make, though, is that watch is really good for when you wanna trigger a side effect on your code base. So in other words, you can imagine, if you might wanna have a specific API call when your reactive data has set a certain state.

[00:02:25]
That would be a great example of when computed wouldn't make any sense at all, because computed is about managing data. Managing, triggering actions, that kind of stuff, watch is perfect for that kind of stuff. Just know that's the main paradigm difference between the two when it comes to using them.

[00:02:40]
Okay, so let's take a look at this example. So I'm gonna go my index to do the solution together Okay, so here, okay, you got my characters here, and this time let's add a property, let's call there element. And so I know that Aang is Air, Earth, Water, and Fire.

[00:03:11]
And we won't get into SQL stuff for anyone who isn't Avatar:The Last Airbender fan. So we have Fire, we won't worry about stuff like lightning and iron metal bending for now, and Water. Okay, so here we have all of our stuff here, and then for the sake of consistency, let's just make sure we go and add an element here.

[00:03:34]
That's an empty array. Great, okay, so from here we could do basically some statistic, shall we? So for now, let's go ahead and actually add a h2 here for just characters. So this is consistent, there you go. Characters up top favorite characters, new character. All right, and then actually just like I did before, I'm gonna go the most recent thing so that it's right at the top, which is easier for people to see.

[00:03:59]
Let's talk about statistics. And so for something like statistics, we wanna figure out, so for example, let's see how many Earthbenders we have. And then we have how many Airbenders? We have Waterbenders, and then we have Firebenders. Okay, a couple of ways to do this, but we'll start with the simple approach first, which is that let's say we wanna track the Earthbenders, right?

[00:04:24]
That was one of the ones I'd mentioned. So let me hide data real quick. So we're gonna do with a computed property cuz we're basically just computing data off of what we already have. So we can do is we say earthBenders, let's say earthBenderlist like that, and so return this .characterList, and we're gonna filter it based on every character.

[00:04:48]
And basically, we wanna know if, actually let me do this the long way. If character.element, and then I realized there are more than ones that no use that name right, but it's fine. .element dot I think contained to do the trick Earth. And then we are just going to, actually, we'll do this one more.

[00:05:15]
Let's see, return the filter. Yeah, yap, okay, we can do it this way if it's contains element Earth, and then return true. And then we're returning the length of this thing. So this is a little bit convoluted. I wanna go ahead and refactor this real quick. So we can basically say that this contains to the earthBenders, is what this filter does, it goes through all the characters, checks if they have it, and if they have it, then it returns true.

[00:05:43]
So the easier way to actually write this is to return since the logic is not complicated. We can actually just do it like this. One more. There you go. So there we go and then, once we have earthBenders we can return earthBenders, actually we can just return the list itself.

[00:06:04]
I'm actually overthinking this. Okay, here we go. So to show that this actually does work, I'm gonna go ahead and render out the earthBenders first. So earthBenderList, right. If we refresh, something broke, contains, I missed that. Is contains, okay, that's fine. Contains always kind of throws me off.

[00:06:33]
Greater than -1 that should be. There we go much better. Okay, so we'll see here now is that it's gone ahead and taken our list of characters and it's refined it down to the array with only the characters that have like the Earth element. And so again, this is useful because then we could do is we can say, okay, well then in this case we have .length, and there we go.

[00:07:00]
We have the number of earthBenders. And so you could basically duplicate this down as far as doing each one. So I think though, for the sake of making this a programmatic exercise, we can just say see benderStatistics. And rather than break it up each time we'll have, we know the list of elements we want.

[00:07:22]
So we have our elements which is gonna be Air, Earth, Fire, and Water. And so what we can do is then actually just, we're gonna return an object where each of these are gonna contain the updated value. That way it's easier to display water and fire, okay. Finally, we will loop through every single element so, this.characterlist.forEach, for every character, and then elements.forEach(element).

[00:08:10]
If character.element.index of, the naming on this is gonna be a little wonky. And it's greater than -1. Then we will say, const statistics equals this thing. So, actually, you know what? I think I can do this one better. We can say, statistics (element) +=1. Yes, so then we just need to make sure that is good, just like that.

[00:09:05]
And then we return statistics. Okay, that should do the trick. I think, no wait, if this, we're missing a parenthesis. Okay, that should do it.
>> Index of is so off.
>> Index of, you're totally right, indexof element that's what was off, good call, thank you. Okay, now let's give this a shot.

[00:09:38]
So we just render out the statistics now, what I call benderStatistics then we could say, ForEach is not liking it, cuz I can't spell, there we go. So we can see here there's one of each, and the reason you get 2 here is because for those that don't know, Aang has all the different elements, so that's how we get that.

[00:10:06]
And you can see we have that computed property. I see there's a question.
>> Should we use reduce here and pass statistics object as a default parameter?
>> [LAUGH] Reduce is certainly an option. I just went with what was kind of easier to do since I know reduce can be kind of confusing sometimes for those who don't use it a lot.

[00:10:25]
But reduce would be a great option in this point where we could reduce the array and get the numbers that we want. And for those who haven't used the reduce a lot in JavaScript, reduce it's pretty magical that you can do basically everything that you would want it to do.

[00:10:38]
But in that regard, the API can get a little bit complex sometimes. So that's why is not my go to when teaching these things. So definitely a number of ways to do this. To be clear, this was just like a quick code together of how you could cobble together the statistics.

[00:10:52]
But I'm sure there are many ways we could optimize for this. But I just wanted to show that here. Now that we actually have everything, we can show that we can li and v-for through this bender list, so I'll say stat in benderStatistics. And you'll see something interesting, though, is that if we just do this, just bender or stat, you'll notice here that it's only rendering out the right side.

[00:11:18]
And that's because, well, guess what? We're in a for loop for an object, and that's JavaScript. So that means that if we want the key as well, we need to actually just open it up cuz its value then key. So I would say type is probably what I would name that.

[00:11:31]
And then that way we can do type, colon, space, refresh, there we go. We have all our elements, and it's being computed as you would expect. And so as you can imagine, you can even extend on this to be like percentages and all that fun stuff, and you just keep building on your computer properties.

[00:11:51]
And so what's nice about that because computed properties can be composed, it allows you to approach it in basically kind of like a functional programming way. You code the very small chunk that does this one computation, then depend on other chain on that. And then that way you have actually a very clean sort of setup when it comes to managing those individual calculations.

[00:12:10]
So, that said, does anyone have any questions regarding what they just saw?