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()

Madeline Yao
seal-mask
.a{fill-rule:evenodd;}techdegree
Madeline Yao
Full Stack JavaScript Techdegree Student 9,611 Points

How does the Reduce Method Works to compare different objects' common factor?

Hello everyone, I just worked on the problem in the video for the comparison between different products' prices and here is my code: 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 towel = products.filter(product => product.price<10) .reduce((highest, product) =>{ if(highest.price> product.price){ return highest; } return product; }); console.log(towel); I wonder how the reduce method works to get the highest price. Could anyone please explain it to me? Thank you!

2 Answers

Steven Parker
Steven Parker
220,634 Points

The "reduce" function calls the function provided for each element in the array.:

if (highest.price > product.price) {  // is "highest" still the one with the highest price?
    return highest;                   // yes, so return it
}
return product;                       // no, make the new one the "highest"

Where "highest" is the item carried over from the last cycle, and "product" is the current one being compared. It simply returns the one with the highest price each time.

SY Lee
SY Lee
8,389 Points

Hi Steven, I am blur, I still couldn’t understand this part. What “highest.price” does here? Does it define as max value? After the filter method, I should have all products with price lower than $10. Can I use Math.max method to reduce?

Steven Parker
Steven Parker
220,634 Points

The term "highest.price" accesses the price value on the object currently considered to have the highest.

You could use Math.max in the comparison expression, but it would make it more complicated than it is now.

Hello Steven Parker , I too am having a lot of trouble understanding "highest.price" ... Is this supposed to be the accumulator? How does it know which is the highest price? Is this storing each price as it runs through the array? This doesn't seemed to be explained well in the video.

Steven Parker
Steven Parker
220,634 Points

The accumulator is "highest". But the "price" property is being used as the value for comparison.