Loading
Current section: 5. Array Methods 5 exercises
solution

Reduce

Transcript

00:00 Let's jump into this, reducing data. We're accumulating arrays into a single value. And what's interesting about that is actually a single value could be another array or it could be an object or it could be a string or it like it could be any number of things. That's the beauty of reduce where map is gonna take an array and it's gonna give you back an array that has the exact same length and filter is gonna take an array and give you back an array that has a shorter length. What reduce does is it takes an array and it you can do anything you want to with it and then it gets whatever you said you would return.

00:31 So it's just so much more powerful. You can accomplish anything that you can do with filter and map using reduce instead. But it is a little bit more complicated. And so if you can use filter and map, then that's a little bit preferred. But for various reasons, reduce might actually be faster or a for loop is always going to be, well, almost always gonna be the fastest.

00:54 In practical terms, this the performance of this is not going to matter very often. The the differences are pretty minimal. So anyway, let's jump into, actually implementing this. And like I said before, I want to implement this with a for loop first and then we can take a look at how to convert that to reduce. So we wanna accumulate the prices into a total.

01:15 So we're gonna say let total equal zero and then for all the products, we're gonna take that, that total and just continue to accumulate to plus equal that total with the price. And then here, we'll come down here and just log that total. Okay. Great. So, there's the total.

01:33 That's the correct answer. The for loop is really simple. There's not a whole lot going on there. So, that's fine. Now, converting this over to reduce, we're gonna say total is product reduce accumulator product accumulator plus product and then that zero thing.

01:48 Okay. Okay. Maybe I'm gonna, the I was thinking about rewriting this. We could maybe it'll make more sense to rewrite this. So, or, yeah, reduce total.

02:02 There we go. And then we'll turn this into that. Oh, wait. And no arrow. There we go.

02:10 Okay. And then here we're gonna say let or or const initial initial value is zero. There we go. So maybe that helps clear up a little bit of it with all the arrow function and stuff. It kinda can get confusing.

02:24 So, what's going on here is reduce, just like filter and map, is going to accept a function as an argument, but it also accepts as a second argument an initial value. So, when when it comes to reduce, you're gonna take an array and turn it into anything else, and the way that it does that is it does that by calling your callback function, This function here calls it for every item. But, to be able to turn it into something else, you have to receive that something else, for every iteration so that you can modify, that something else. This this something else is what we call the accumulator. So that's what that ACC.

03:03 Let's rename that to accumulator. So this is the thing that we're we're slurping every item into. In our case, we're gonna take that accumulator and, we're going to add the product price. So the initial value of that accumulator for the first time that this function is called is going to be zero because that's what we set the initial value to. And then we're going to, on that first product, we're gonna take that product's price and add it to the accumulator and then we return the value and that turns into the new value of the accumulator.

03:35 So then it gets called again with the second product and we add, and and the current value of the accumulator and then we add, the product price to that. Maybe it would also be helpful if I made a reduce, function here that's gonna take our array and there's our, callback and here's our initial value. There we go. This is the implementation of reduce if we wanted to implement it ourselves. So let's get our total.

04:05 There we go. Reduce products. Here's our, our callback and then, our initial value. So the way that this kind of sort of looks like under the hood is it takes your callback, it has a accumulator and the current, the current item, the current product in our case. And we're going to initialize our accumulator to the initial value And then we're gonna do a for loop over that array.

04:31 And for each item, we're gonna call the callback with the current value of the accumulator and pass the item. We'll assign the return value to the accumulator. And then when it's all done, when all of the items have been iterated over and that accumulator has changed for each one of those, then we're gonna return that accumulator. So, if this part is like, if you need to totally pause the video, maybe talk about it with your AI assistant, to really understand what's going on right here. Alright.

05:01 So with all of that said, let's get this back to what I would actually do. So total is, products reduced, accumulator product, accumulator plus product price started out at zero. And that's gonna get us our total. This is great. So let's apply this to another example.

05:21 This, is all done. There we go. We've got our, start with the initial product and compare prices. So we want to, find the most expensive product. So we're gonna, start with the first product and we're going to compare the price between, the max, that's what we're calling our accumulator, and, the the next product.

05:43 So if the price is greater than the max price, then we're going to take, the price from the Or or we're gonna take that product. Otherwise, we're going to do, whatever the last max was. So as we're iterating, we're, like, we're going through the array and we're saying, oh, here's one, a product. Let's compare. Is that product's price greater than the last product's price?

06:06 It's not, so okay. We'll just go to the next one. Is it greater than the last product's price? Oh, it is. Great.

06:11 Now that is the max product, and then we'll go on to the next one, and we'll continue through all of them. And that's how we can find the most expensive, product. So that's nice. And here, if we get rid of that name, this ends up giving us the full and the full object itself because we're not reducing this to the product's name or anything. We are, our accumulator and our initialized value is actually a product.

06:38 What we return is going to be either the max which is what our initialize was for that first iteration, or the product which is what we're iterating over is those products And so that's why most expensive is going to be a product. If you wanted to, just get the name, now you just take this dot name and there you go. You just get the name. Okay. Great.

06:59 So then we return a new accumulator object, or sorry. That's Marty's instruction. So we're gonna use reduced account products by their category. So this one's pretty interesting, because, well, first of all, the types are kinda funny. Hopefully, your AI assistant helps you with this, this little bit.

07:17 That's one of the funny things about types with reduce, is sometimes it could be a little tricky. But what this is doing is, we're map or we're converting this array into an object. And this is our initial value for that object. It's just an empty object. If we were to look at this differently, this would be our initial value like this, an initial value.

07:39 So it's an object. We're using some TypeScript syntax you might not be familiar with. Yeah. Just because Here. Let's let's do this differently.

07:48 Record string. Yeah. You haven't seen record yet either. We'll get into the typescript stuff later. Don't worry too much about that.

07:55 You could also just say as, any and that will work, as well. It doesn't help you a whole lot but, for the purposes of what we're trying to do here, we'll just go with that. So our initial value and then, that accumulator is going to be this object right here. And so we're going to, set the object, product category. So that's gonna be electronics or kitchen.

08:19 And we're going to assign that to, the accumulator at that, product category or zero. So if it hasn't yet been set, then there are zero items in there. And so we're gonna set it to zero. Then we're gonna add one for this product's category and then we'll return that object. So it might be helpful if I actually add a console log, console dot log, and we'll say adding, no.

08:50 No. No. Where it's do this. Adding product category to that. There we go.

08:57 So adding electronics to undefined. So we don't have that defined yet, and so it's going to start out at zero and, and so we'll add one to that. And then adding kitchen unifying, we don't have anything in the product, or in the accumulator yet. You know what? Maybe it would be even easier if we just said accumulator.

09:15 There we go. So on the first iteration, the accumulator is empty and then second iteration, we have one electronic And then the third iteration, we have an electronic and a kitchen. And then, on the next iteration, we've got electronic two electronics and a kitchen and we continue on until we end up with three electronics and two kitchen. So, feel free to, like, stick console logs all over the place to understand how all of this works and I recommend also rewriting this as a for loop to kind of understand how all of this is working as well. It just is gonna take reps.

09:47 The more repetitions that you do of this, the easier it will become for you. So, that is, all of that put together with reduce. Now, like I said, reduce you can do all the filter stuff you want, all of the map stuff you want with reduce but you can also reduce things down to a single value which is that accumulator. There are other methods. There's also reduce right which will have it start at the the bottom of the array or the right side of the array and work its way backward, which is kinda nice.

10:18 You have map and flat map and you've got fill, you've got find index, you've got for each. We don't ever use for each. Don't use it. Just use for loops if you need for each. And yeah.

10:30 Bunch of other methods in here that are all very fun and interesting. But map filter and reduce, those are the the primary ones that I find myself using. And frankly, I don't use a reduce a ton. I will typically jump into a a four of loop if I need to do something that requires a reduce because I just find that to be typically a little easier unless I'm doing something as simple as this. So, alright.

10:54 That was fun. Thank you for, joining me on this to reduce data, exercise step. We'll see you in the next one.