- Overview
- Transcript
3.4 Getting Creative With Pluck and Mean
The power is going to our heads now! Let's refactor our function to get the average ABV and use some of our new utility functions to do the work. In this lesson, we'll create a mean function using map, reduce, and add, and then we'll take advantage of a common map pattern by turning it into a pluck
utility.
1.Introduction3 lessons, 14:53
1.1Introduction01:13
1.2A Refresher on Functions08:57
1.3Project Walkthrough04:43
2.Some Basic Improvements5 lessons, 36:51
2.1Getting Declarative09:20
2.2Making our Filter Declarative08:21
2.3Becoming Familiar With Higher-Order Functions05:22
2.4Callbacks, the Other Higher-Order Function06:15
2.5A Look at Pure Functions07:33
3.Building a Functional Utility Library4 lessons, 29:00
3.1Functional Filter02:52
3.2Understanding Map and Reduce10:41
3.3Reorganizing Our Collection With GroupBy08:13
3.4Getting Creative With Pluck and Mean07:14
4.Some Existing Tools2 lessons, 14:47
4.1Underscore and Lodash07:55
4.2Native JavaScript Functions in ES506:52
5.Conclusion1 lesson, 02:36
5.1Conclusion02:36
3.4 Getting Creative With Pluck and Mean
So far, we've created a lot of really great useful utilities here. We got filter, map, reduce, group by. I wanna add just two more and start introducing this idea of combining functions together to make better functions. So, let's go down and look at our getAverageAbv function. Now, what we're doing here is we're just taking an array of objects, pulling out one value from each object, and then calculating the average, or the mean, of those values. This seems like a pretty common task, so, let's make it a utility. So, go back up here. And, right below group by, we'll add fp.mean equals function and we are going to take a collection and property. [SOUND] Now, we are going to accept two kinds of collections. One would be just an array of values, in which case we would just want to calculate the mean right on it. And, the other one would be, if it's a collection of objects and we want to actually pull out the property first, okay. So, let's just return fp.reduce collection, fp.add, 0, and lets not end it there. We have to actually divide that by collection.length. And, that will give the mean of a collection of numbers. So, what we need to do is, if there's a property passed in, [SOUND] we're going to assume that you want us to pull that property from each collection, each object in the collection. And, so, to do this, we have to do a map. Okay, so, we have to change the collection. So, collection equals fp.map will map over the collection and then in the function, we'll hit each item and in here, we will return the item property. [SOUND] So, that pops out, each value that's at the property key of each item into a new array, which will be saved over collection, and then that way this line works in both cases. Okay, so, let's change this to use our new fp.mean function. So, here, we'll say, var mean equals fp.mean abvs. And, we won't need this one either, so, we've just gotten rid of two. [SOUND] That's actually the beers and 'abv. So, I'm, let me explain what we just did. All right, so, instead of needing map and reduce inside of the average function, we're now doing the map and they're reduced up in the mean function. So, we are saying, give us the mean of all the beers, their 'abv' values. And, then, since we've already got the mean, [SOUND] you can just times it by 10, divide it by 10. Now, I hate having this in average abv function. Because, to me, this is just not clean and clear. We're, we're now conflating this JavaScript hack that we have to do to get decimal places into the actual getAverageAbv function. So, let's fix that too while we're here. I'm just going to make a regular function because I'm not sure I want to have it in the fp Library. It's gonna be called roundDecimal and we're gonna take a number and some places. So, we can do a trick where we get the places based on a ten to the power of the number of places. So, our factor here that we want to multiply by and then divide by again, is going to equal Math.pow 10 places. If you want one, ten to the one would be ten. If you want two, ten to the two would a hundred and so, however many places you want, we will raise ten to that power and get that number of zeros so that we can multiply by it, do the round, and then divide by it. So, we return Math.round, number times factor and then divide it by factor. And, so, this means we don't need this anymore. Either we can just say roundDecimal and none of this nonsense is there. We just have a nice clean function that says, get the mean by calling fp.mean on the beers. We want the mean of their 'abv' values and then we're going to make whatever that returns into a roundDecimal. And we actually need to say we want one place. So, let's jump back to the website and refresh and let's see we've got our Average ABV at 7%, and just to make sure, here we have 6.3. So, it's still calculating to one decimal place. So, that was really easy to just take our existing functions and make new ones, right? We have fp.mean now, which uses map and reduce and our add function glues them all together and turns them into another function that's also reusable. So, this can happen over and over and over. We're going to do one more. This pattern right here where you map over a collection and pull out one value and set the same key of every single item in the collection, that could be referred to as something called a pluck. We use this a lot. So, we're gonna, actually pull it out as a utility itself. Fp.pluck equals a function and you want the collection, and then you just want the property. [SOUND] So, again, similar to mean. [SOUND] Here, though, we will return fp.map. It's exactly what we're doing here. And, we return the item at the property key. So, now, our collection actually becomes fp.pluck collection property. And, one more time just to verify we're still working, we look, we've got our full beer list separated, Average ABV at the bottom. On ales, we get some 7.4%, 6.3. So, we're still calculating to that first decimal place. But now, we've remixed our functions a couple of different times. And, we have these extra utilities that we can use to glue more and more functions together until we get this whole suite of reusable, powerful utility functions that we can use for anything. And, so, there are actual functions that do the work that we need to do, are small, they're lightweight and they're easy to understand. So, building this fp Library has been fun and interesting. But in the next video, I'm gonna show you two libraries called underscore and low dash. That you may have already heard of, but hopefully now, you'll realize that all they are, is just fp. It's a glorified fp with a bunch more utility functions on them. And, so, we'll look at what it would take to swap in low dash or underscore. And I'll talk a little bit about the differences between the two.