What if.. 🤔 We reordered the array.

I have not progressed past this because this has got me (perhaps unnecessarily) flustered.

I don't give up. I just go through all 7 stages of grief repeatedly until I'm done.

My understanding of the callback passed into the reduce() method is as such:

• "The returned value is passed to the next iteration of the callback function." I learned this myself (the docs I think)
• A return will escape a loop.

For the life of me I could not work out how to traverse the array twice to compare the value of the accumulator against every single value without creating some infinite chain of if statements.

Turns out the problem is the problem.

If you take a look at this: I simply reordered the array, What I really need clarity on is why 'ballpoint pens' isn't returned, given the previous iterations' price is higher. I feel like I have missed a fact.

const products = [
  { name: 'hard drive', price: 59.99 },
  { name: 'ballpoint pens', price: 4.49 },
  { name: 'lighbulbs', price: 2.59 }, // higher > current -> return higher and end loop
  { name: 'paper towels', price: 6.99 },
  { name: 'flatscreen monitor', price: 159.99 },
  { name: 'cable ties', price: 19.99 },
];

    // Result: { name: 'paper towels', price: 6.99 }
highestU10 = products
    .filter(product => product.price < 10)
    .reduce((higher, current) => {
        if (higher.price > current.price) {
            return higher;
        }
        return current;
}, {})

console.log(highestU10);

Edit: I suspect this is how it works – the return value is returned every iteration of the callback, so every time it discovers something bigger than before, the bigger value is returned as the accumulator.

Here's a better way to put it:

highestU10 = products
    .filter(product => product.price < 10)
    .reduce((higher, current) => higher.price > lower.price? : higher : lower, {})