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.