Though not as simple as some other languages, there are a few ways to find the largest number in a JavaScript array.
These solutions range from least-to-most convoluted. The first is preferable depending on your application's browser requirements and build process. Check it out:
Use Math.max() to find the largest array number
As the function name implies, Math.max() is handy when finding the max value within an array.
There are several ways to use Math.max(). Depending on your use case, one approach might be more appropriate than others.
Math.max() overview
Calling Math.max() without arguments returns -Infinity.
Math.max()
// -Infinity
If any value passed to Math.max() can not be converted to a number, NaN will be returned.
Math.max(1, 2, 3)
// 3
Math.max(1, 2, undefined, 3)
// NaN
Use Array.reduce()
Use this approach if you're working with a large array. Here's why:
both spread (...) and apply will either fail or return the wrong result if the array has too many elements, because they try to pass the array elements as function parameters.
An entire article could be written on this topic (and I will! I promise it has been added to the backlog). For now, we'll focus on the implementation.
The cut off for when to prefer this approach to others will depend on your application's runtime environment. If you're working with large arrays and your application runs on an end-user's browser, using Array.reduce() to find the maximum array value is a safe bet.
const getMaxValueFromArray = (arr) => {
const maxArrayValue = arr.reduce((maxValue, currentArrayValue) => {
return Math.max(maxValue, currentArrayValue);
}, -Infinity);
return maxArrayValue;
}
getMaxValueFromArray([10, 20, 30]);
// 30
Why use -Infinity as the reducer's initial value?
-Infinity is used as the reducer's initial value as all other possible number values are greater than -Infinity. Also, -Infinity is a number in JavaScript, which ensures getMaxValueFromArray always returns a number value. This is helpful if you're working with TypeScript.
Use the spread syntax
As demonstrated by the above example, Math.max() expects multiple comma-separated number values as arguments. The built-in method doesn't support being passed an array directly.
Here's how to use the spread syntax with Math.max() to find the max value,
const arr = [1, 3, 9999, 5, 6, 7]
const maxArrayValue = Math.max(...arr)
// maxArrayValue: 9999
This approach is decidedly simpler than using the Array.reduce() approach. However, as previously mentioned, using Array.reduce() in conjunction with Math.max() may be a better approach when working with large arrays.
Use the .apply to support Internet Explorer
Internet Explorer doesn't support the spread syntax. The above example may not work depending on your application's build process & browser support requirements.
Here's an approach for finding the max value in an array by using Math.max with .apply,
const arr = [1, 3, 9999, 5, 6, 7]
const maxArrayValue = Math.max.apply(this, arr)
// maxArrayValue: 9999
This approach is appropriate when working with relatively small arrays. If you're concerned that your array is too large, use the above Array.reduce() + Math.max() approach to find the max value in an array.
The spread syntax provides a slightly simpler approach to .apply. However, both approaches return the same value and function in the same manner behind the scenes.
Get the max value in array of objects
For the last example, let's look at how we can grab the maximum value from within an array of objects.
There are a few ways to do this, but the following is among the most concise while maintaining readability.
const arr = [
{ value: 1 },
{ value: 2 },
{ value: 3 },
{ value: 9999 },
{ value: 4 },
{ value: 5 },
];
const getMaxValueFromArrayOfObjects = (arr) => {
const maxArrayValue = arr.reduce((maxValue, currentArrayObject) => {
return Math.max(maxValue, currentArrayObject.value);
}, -Infinity);
return maxArrayValue;
}
getMaxValueFromArrayOfObjects(arr);
// 9999
Bonus: How to find the min value in an array
Finding the minimum value in a JavaScript array is almost the same as finding the max. Instead of using Math.max() to find the value, use Math.min().
Below are the above examples with Math.max() swapped out for `Math.min().
Basic Math.min usage
Math.min(3, 1, 2)
// 1
Using Array.reduce() & Math.min() to get the min value
This solution is similar to the above approach for finding the maximum value. However, note the important difference.
getMinValueFromArray uses Infinity as the initial reducer value. This ensures the function always returns a number.
The above getMaxValueFromArray function uses -Infinity as the initial reducer function.
Infinityis a good initial reducer value when getting the minimum value from an array.-Infinityis the appropriate initial reducer value when finding the max array value.
const getMinValueFromArray = (arr) => {
const minArrayValue = arr.reduce((minValue, currentArrayValue) => {
return Math.min(minValue, currentArrayValue);
}, Infinity);
return minArrayValue;
}
getMinValueFromArray([30, 10, 20]);
// 10
Use the spread syntax to find the min value
const arr = [3000, 2000, 1, 1000, 4000]
const minArrayValue = Math.min(...arr)
// minArrayValue: 1
Use the Math.min.apply to get the min
As previously mentioned, Internet Explorer doesn't support the spread syntax. If your application's build process doesn't support the spread syntax, use Math.min.apply.
const arr = [3000, 2000, 1, 1000, 4000]
const minArrayValue = Math.min.apply(this, arr)
// minArrayValue: 1
References
The MDN Web Docs rock. Check out these handy JavaScript references for more information: