Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Array Iteration Methods

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Combining filter() and reduce()

4:42 with Joel Kraft

Combining filter() with reduce(), you can remove values from an array, using the results to compute some value. Get some practice with this combination.

Snippets from the Video

const products = [
  { name: 'hard drive', price: 59.99 },
  { name: 'lighbulbs', price: 2.59 },
  { name: 'paper towels', price: 6.99 },
  { name: 'flatscreen monitor', price: 159.99 },
  { name: 'cable ties', price: 19.99 },
  { name: 'ballpoint pens', price: 4.49 }
];

    // Result: { name: 'paper towels', price: 6.99 }

const products = [
  { name: 'hard drive', price: 59.99 },
  { name: 'lighbulbs', price: 2.59 },
  { name: 'paper towels', price: 6.99 },
  { name: 'flatscreen monitor', price: 159.99 },
  { name: 'cable ties', price: 19.99 },
  { name: 'ballpoint pens', price: 4.49 }
];

    // Result: 239.97

Resources

Creating an initial value for reduce

(Spoiler Alert! Continue reading only if you've watched the whole video!)

The following solution is NOT RECOMMENDED, but will hopefully offer some insight into how the reduce method works. To create an initial value for the first problem, I would have had to construct a dummy object with a price property set to zero, so the highest parameter would have had a price property to read in the if statement.

const product = products
  .filter(product => product.price < 10)
  .reduce((highest, product) => {
    if (highest.price > product.price) {
      return highest;
    }
    return product;
  }, { price: 0 });

Someone else trying to understand my code might have been confused as to why a dummy object was there, and what purpose it served. In this case, it makes more sense to let reduce initialize the highest parameter with the first product from the array.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up