How to Get the Max or Min Value from an Array of Objects in JavaScript
When working with an array of objects, a common task is to find the maximum or minimum value of a specific property, like finding the highest id, the most expensive price, or the earliest date. This can involve two distinct goals: getting the extreme value itself, or getting the entire object that contains that value.
This guide will teach you the modern and standard methods for achieving both of these goals. You will learn how to use Math.max() for a quick and readable solution, and the powerful reduce() method for a more efficient, single-pass approach.
Goal 1: Get the Maximum or Minimum Value Itself
If you only need the highest or lowest value of a property (e.g., just the number 14), the most intuitive approach is a two-step process using map() and Math.max() or Math.min().
For example, we have an array of objects and we want to find the highest id value.
// Problem: How to find the highest 'id' value from this array?
const items = [{id: 1}, {id: 7}, {id: 3}, {id: 14}];
Recommended Solution:
map(): First, create a new array containing only the values of the property you're interested in.Math.max()/Math.min(): Then, use the spread syntax (...) to pass all the elements of this new array toMath.max()orMath.min().
const items = [{id: 1}, {id: 7}, {id: 3}, {id: 14}];
// 1. Create an array of just the ID values
const ids = items.map(item => item.id); // -> [1, 7, 3, 14]
// 2. Find the max and min from that new array
const maxValue = Math.max(...ids);
const minValue = Math.min(...ids);
console.log('Max ID:', maxValue); // Output: Max ID: 14
console.log('Min ID:', minValue); // Output: Min ID: 1
This method is highly readable because it breaks the problem down into two simple, logical steps.
Goal 2: Get the Object That Contains the Maximum or Minimum Value
More often, you need the entire object that has the extreme value. For this, the Array.prototype.reduce() method is the most concise and efficient functional approach, as it finds the result in a single pass.
For example, we want to find the entire object that has the highest id.
// Problem: How to find the object { id: 14 }?
const items = [{id: 1}, {id: 7}, {id: 3}, {id: 14}];
Recommended Solution: the reduce() method iterates through an array and "reduces" it to a single value. In this case, that single value is the object with the highest ID.
const items = [{id: 1, name: 'A'}, {id: 14, name: 'D'}, {id: 7, name: 'B'}];
// --- Find the object with the MAX ID ---
const maxObject = items.reduce((best, current) => {
return (current.id > best.id) ? current : best;
});
console.log('Object with max ID:', maxObject);
// Output: Object with max ID: { id: 14, name: 'D' }
// --- Find the object with the MIN ID ---
const minObject = items.reduce((best, current) => {
return (current.id < best.id) ? current : best;
});
console.log('Object with min ID:', minObject);
// Output: Object with min ID:{ id: 1, name: 'A' }
How it works:
reduce((best, current) => ...): Thereducemethod iterates over the array.bestis the "accumulator" (the best object found so far), andcurrentis the element being inspected.- By default,
beststarts as the first element in the array. return (current.id > best.id) ? current : best;: In each step, we compare the current object'sidto theidof the best one we've found. If the current one is better, we return it; otherwise, we keep the existing best. This new "best" is then passed to the next iteration.
An Alternative for Goal 2: The for...of Loop
While reduce() is very powerful, a traditional for...of loop can be more readable for developers who prefer an imperative style. It is also a single-pass and highly efficient solution.
Solution:
const items = [{id: 1, name: 'A'}, {id: 14, name: 'D'}, {id: 7, name: 'B'}];
let maxObject = items[0]; // Assume the first object is the largest
for (const item of items) {
if (item.id > maxObject.id) {
maxObject = item;
}
}
console.log('Object with max ID:', maxObject);
// Output: Object with max ID: { id: 14, name: 'D' }
Conclusion
Finding the max or min value in an array of objects is a common task with clear, modern solutions.
- If you only need the extreme value itself (e.g., the number
14), the most readable method is the two-stepmap()followed byMath.max(). - If you need the entire object that contains the extreme value, the
reduce()method is the most concise and powerful functional solution, while afor...ofloop provides a clear imperative alternative.