- Chaining Array Methods 3:37
- Method Chaining 1 objective
- Working with Objects in Arrays 7:40
- Working with Objects 1 objective
- Combining filter() and map() 4:13
- Combining filter() and map() 1 objective
- Combining filter() and reduce() 4:42
- Combining filter() and reduce() 1 objective
- Nested Data and Additional Exploration 7:25
- Array Flattening 1 objective
- Nested Data 1 objective
Preview
Video Player
00:00
00:00
Combining filter() and reduce()
4:42Combining filter() with reduce(), you can remove values from an array, using the results to compute some value. Get some practice with this combination.
In the last video we combined filter
with map to alter data in specific ways.
0:00
Let's look at how some other combinations
of array methods can help us process data.
0:06
Here's an array of office
supply products with prices.
0:11
Let's say we need to find the highest
price of all the products under $10.
0:15
See if you can use filter with reduce
to return the product whose price
0:20
is the highest of all
the products under $10.
0:24
In this case the value we want to
return is the object for paper towels.
0:28
I'll give you a hint,
the examples you've seen so
0:33
far use the accumulator
to combine array values.
0:36
In this case you'll need to return either
the accumulator or the array value.
0:40
Pause the video and see if you can do it.
0:45
Now I'll show you my solution.
0:52
Again I'm going to paste the solution
in so you can see it all at once.
0:54
Let's walk through what's happening here.
1:03
First, I filtered the array
of all items over $10.
1:05
Then, I used reduce on
that shortened array.
1:09
The reduced methods accumulator argument
doesn't have to be used to add or
1:14
combine elements.
1:18
In fact, here I'm using it simply
to collect the highest priced item.
1:20
Inside the callback I'm comparing
the current array items price
1:25
to the items stored in highest and
returning whichever one is higher.
1:29
By always choosing the highest price,
1:34
reduce will eventually return the product
with the overall highest price.
1:37
Notice I didn't use an initial
value in this call to reduce.
1:41
That's because I'm not using reduce
to combine the array's values.
1:44
I want to choose between one of
the existing values in the array.
1:49
So it makes sense to start
with the first element
1:54
rather than a value that
isn't part of the array.
1:57
Even though it's impractical I've included
an example of how we might use an initial
2:00
value in the teachers notes in case it
gives further insight into the reduce
2:05
method.
2:09
Let's work another one,
here's your new challenge.
2:11
Using the same array of products,
2:15
return a total of all products
over $10 using filter and reduce.
2:17
Pause the video if you want to
try to solve this yourself.
2:23
The first thing I'll do is rename
my result variable to total.
2:31
And that's just to reflect
the value I want to compute.
2:42
Then I'll reduce this filter, so
2:46
I'll change the lesser than
sign to a greater than sign.
2:48
Now all products below
$10 will be filtered out.
2:56
Then I'll change
the accumulators name to be sum.
3:00
I want to return sum plus the product
price from this call back.
3:07
So I'll replace this function
body with that value.
3:11
Finally, I'll need to
set up an initial value.
3:24
This code won't work without one, because
other wise, the first time through,
3:27
sum would be an object, not a number.
3:32
And adding a number to an object,
makes no sense.
3:35
I'll put a 0 as the second argument.
3:38
Now, I'll save and run this file.
3:42
Notice we get a lot of
zeros in this result.
3:49
This has to do with how numbers
are handled in JavaScript.
3:52
I'll put some information in the teacher's
notes, if you want to find out more.
3:55
This number is basically correct, and
3:59
we can get rid of these numbers by
chaining the toFixed method on the end.
4:01
And passing in the number two.
4:06
Because reduce is returning a number,
chaining toFixed on the end will work.
4:15
Now I'll save, And
run this file again in the console.
4:20
And you can see we're showing
just two decimal places.
4:27
Great work, there's one other way I
wanna show you these methods can be used
4:30
together, as well as how to expand your
knowledge of array methods even further.
4:35
I'll see you in the next video.
4:40