1 00:00:00,380 --> 00:00:06,110 In the last video we combined filter with map to alter data in specific ways. 2 00:00:06,110 --> 00:00:11,710 Let's look at how some other combinations of array methods can help us process data. 3 00:00:11,710 --> 00:00:15,470 Here's an array of office supply products with prices. 4 00:00:15,470 --> 00:00:20,390 Let's say we need to find the highest price of all the products under \$10. 5 00:00:20,390 --> 00:00:24,440 See if you can use filter with reduce to return the product whose price 6 00:00:24,440 --> 00:00:28,000 is the highest of all the products under \$10. 7 00:00:28,000 --> 00:00:32,760 In this case the value we want to return is the object for paper towels. 8 00:00:33,760 --> 00:00:36,460 I'll give you a hint, the examples you've seen so 9 00:00:36,460 --> 00:00:40,470 far use the accumulator to combine array values. 10 00:00:40,470 --> 00:00:45,430 In this case you'll need to return either the accumulator or the array value. 11 00:00:45,430 --> 00:00:47,670 Pause the video and see if you can do it. 12 00:00:52,643 --> 00:00:54,940 Now I'll show you my solution. 13 00:00:54,940 --> 00:00:58,970 Again I'm going to paste the solution in so you can see it all at once. 14 00:01:03,484 --> 00:01:05,917 Let's walk through what's happening here. 15 00:01:05,917 --> 00:01:09,200 First, I filtered the array of all items over \$10. 16 00:01:09,200 --> 00:01:14,640 Then, I used reduce on that shortened array. 17 00:01:14,640 --> 00:01:18,738 The reduced methods accumulator argument doesn't have to be used to add or 18 00:01:18,738 --> 00:01:20,130 combine elements. 19 00:01:20,130 --> 00:01:25,100 In fact, here I'm using it simply to collect the highest priced item. 20 00:01:25,100 --> 00:01:29,360 Inside the callback I'm comparing the current array items price 21 00:01:29,360 --> 00:01:34,770 to the items stored in highest and returning whichever one is higher. 22 00:01:34,770 --> 00:01:37,220 By always choosing the highest price, 23 00:01:37,220 --> 00:01:41,630 reduce will eventually return the product with the overall highest price. 24 00:01:41,630 --> 00:01:44,700 Notice I didn't use an initial value in this call to reduce. 25 00:01:44,700 --> 00:01:49,990 That's because I'm not using reduce to combine the array's values. 26 00:01:49,990 --> 00:01:54,030 I want to choose between one of the existing values in the array. 27 00:01:54,030 --> 00:01:57,070 So it makes sense to start with the first element 28 00:01:57,070 --> 00:01:59,430 rather than a value that isn't part of the array. 29 00:02:00,790 --> 00:02:05,489 Even though it's impractical I've included an example of how we might use an initial 30 00:02:05,489 --> 00:02:09,600 value in the teachers notes in case it gives further insight into the reduce 31 00:02:09,600 --> 00:02:10,140 method. 32 00:02:11,750 --> 00:02:15,180 Let's work another one, here's your new challenge. 33 00:02:15,180 --> 00:02:17,973 Using the same array of products, 34 00:02:17,973 --> 00:02:23,472 return a total of all products over \$10 using filter and reduce. 35 00:02:23,472 --> 00:02:26,379 Pause the video if you want to try to solve this yourself. 36 00:02:31,169 --> 00:02:35,250 The first thing I'll do is rename my result variable to total. 37 00:02:42,809 --> 00:02:46,710 And that's just to reflect the value I want to compute. 38 00:02:46,710 --> 00:02:48,950 Then I'll reduce this filter, so 39 00:02:48,950 --> 00:02:51,910 I'll change the lesser than sign to a greater than sign. 40 00:02:56,014 --> 00:03:00,570 Now all products below \$10 will be filtered out. 41 00:03:00,570 --> 00:03:03,350 Then I'll change the accumulators name to be sum. 42 00:03:07,207 --> 00:03:11,302 I want to return sum plus the product price from this call back. 43 00:03:11,302 --> 00:03:14,410 So I'll replace this function body with that value. 44 00:03:24,532 --> 00:03:27,830 Finally, I'll need to set up an initial value. 45 00:03:27,830 --> 00:03:32,460 This code won't work without one, because other wise, the first time through, 46 00:03:32,460 --> 00:03:35,130 sum would be an object, not a number. 47 00:03:35,130 --> 00:03:38,600 And adding a number to an object, makes no sense. 48 00:03:38,600 --> 00:03:40,490 I'll put a 0 as the second argument. 49 00:03:42,658 --> 00:03:44,690 Now, I'll save and run this file. 50 00:03:49,296 --> 00:03:52,280 Notice we get a lot of zeros in this result. 51 00:03:52,280 --> 00:03:55,950 This has to do with how numbers are handled in JavaScript. 52 00:03:55,950 --> 00:03:59,750 I'll put some information in the teacher's notes, if you want to find out more. 53 00:03:59,750 --> 00:04:01,680 This number is basically correct, and 54 00:04:01,680 --> 00:04:06,190 we can get rid of these numbers by chaining the toFixed method on the end. 55 00:04:06,190 --> 00:04:08,130 And passing in the number two. 56 00:04:15,052 --> 00:04:20,750 Because reduce is returning a number, chaining toFixed on the end will work. 57 00:04:20,750 --> 00:04:26,190 Now I'll save, And run this file again in the console. 58 00:04:27,840 --> 00:04:30,658 And you can see we're showing just two decimal places. 59 00:04:30,658 --> 00:04:35,400 Great work, there's one other way I wanna show you these methods can be used 60 00:04:35,400 --> 00:04:40,540 together, as well as how to expand your knowledge of array methods even further. 61 00:04:40,540 --> 00:04:41,700 I'll see you in the next video.