Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Array Iteration Methods Combining Array Methods Combining filter() and reduce()

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,626 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,626 Points

combining filter() and reduce()

Why didn't this worked -- Steven Parker 

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

const totalPrice = products.filter(product => product.price > 10).reduce((total, product) => {
  return (total.price + product.price);
},{price: 0}).toFixed(2);
console.log(totalPrice);

I have used return total.price + product.price . This is not working.
If i am using total.price , it should extract the price and then add it to the product.price but it is not happening. I have also set an initial object with price property to 0

3 Answers

Steven Parker
Steven Parker
220,634 Points
Steven Parker
Steven Parker
220,634 Points

:bell: I was alerted by your tag. But there are many students willing to help; so give the community a chance to respond when you post a question before tagging anyone specifically.

The return from the callback given to "reduce" must be the same type as the accumulator and the initial value, which in this case is an object with a "price" property:

    return { price: total.price + product.price };
//         ^^^^^^^^                             ^

Then, since that is also the return type of the "reduce", you will need to access the "price" property to get the total:

/*...*/).price.toFixed(2);
//      ^^^^^^

But a simpler approach would be to make the accumulator and initial value just numbers:

/*...*/.reduce((total, product) => total + product.price, 0).toFixed(2);
Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,626 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,626 Points

Sorry for tagging you , but I was not getting the answer of this doubt since morning , I posted in slack forum too , but no one replied and this doubt was eating me. So , i reached to you .
In your explanation , What does this mean : /*...*/.reduce(/*...*/) ?

Steven Parker
Steven Parker
220,634 Points
Steven Parker
Steven Parker
220,634 Points

Those comments are just placeholders for parts of the code I left out to shorten the example.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,626 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,626 Points

I am loving the explanation but still not getting 100% . Will you elaborate a little bit more . Please ? What does this will return : return (total.price + product.price); ?

Steven Parker
Steven Parker
220,634 Points
Steven Parker
Steven Parker
220,634 Points

That line from the original code returns an ordinary number, but that's not compatible with the accumulator being an object. So it must return an object also (first example), or the entire thing must be changed to work with plain numbers (second example).