# JavaScript: Get Min and Max Element of Array - JavaScript

Categories:
Viewed: 74 - Published at: 6 months ago

### Introduction

When working with JavaScript, we oftentimes encounter situations that require us to obtain the minimum and maximum elements of an array - be it for setting boundaries for a slider or displaying the statistics to a user.

In this article, we'll take a look at how to get the minimum and the maximum element of an array in JavaScript. We'll also look at four different methods and compare their speeds when dealing with large arrays.

### How to Get Min and Max Elements of an Array Using the Math Object

`Math` is JavaScript's built-in global convenience object containing a lot of methods and constants you might need when performing mathematical operations. Two methods that we'll use in this article are `Math.min()` and `Math.max()` - both of them accept a list of numbers as arguments. As their names suggest, one returns the element with the lowest value, and the other returns one whose value is the highest:

``````console.log(Math.min(20, 23, 27)); // 20
console.log(Math.max(20, 23, 27)); // 27

console.log(Math.min(-20, -23, -27)); // -27
console.log(Math.max(-20, -23, -27)); // -20
``````

If at least one of the passed elements is not a number or cannot be converted to a number, both `Math.min()` and `Math.max()` returns `NaN`:

``````console.log(Math.min('-20', -23, -27)); // -27
console.log(Math.max('number', -23, -27)); // NaN
``````

Similarly, if we try to pass an array as an argument of the `Math.min()` function, we get a `NaN`, since it's treated as a single element, which can't be converted to a scalar value:

``````const myArray = [2, 3, 1];
console.log(Math.min(myArray)); // NaN
``````

However, a quick fix for this is to use the spread operator to unwrap the elements:

``````const myArray = [2, 3, 1];
console.log(Math.min(...myArray)); // 1
``````

#### Get Max and Min Element with reduce()

Reduction operations, sometimes known as folding, are some of the most powerful operations from functional programming, with a wide variety of applications. The `reduce()` function, runs a reducer function (defined in a callback) on each array element and returns a single value in the end. It's worth covering the method due to how universally it can be applied:

``````const myArray = [20, 23, 27];

let minElement = myArray.reduce((a, b) => {
return Math.min(a, b);
});

console.log(minElement); // 20
``````

#### Find Min and Max Element with apply()

The `apply()` method is used to invoke a function with a given `this` value and an array of arguments. This makes it possible for us to enter arrays into the `Math.min()` static function:

``````const myArray = [20, 23, 27];

let minElement = Math.min.apply(Math, myArray);
console.log(minElement); // 20
// Or
let minElement = Math.min.apply(null, myArray);
console.log(minElement); // 20
``````

### Getting Min and Max Elements With Standard Loops - Fastest Performance

Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions return `true` or `false`. A loop will continue running until the defined condition returns `false`. In our case, we will be making use of the `for` loop - it is commonly used to run code a number of times.

#### Get Minimum Element

First, we'll initialize the minimum element to the first element of an array. Then, we loop through the entire array to see if the value of any other element is less than the current minimum value - if it is, we'll set the new minimum value to the value of the current element:

``````const myArray = [20, 23, 27];

let minElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
if (myArray[i] < minElement) {
minElement = myArray[i];
}
}

console.log(minElement); // 20
``````

#### Get Maximum Element

We'll first initialize the maximum element to the first element in the array. Then we will loop through the entire array to see if any other element is greater than the initialized element, so it replaces it:

``````const myArray = [20, 23, 27];

let maxElement = myArray[0];
for (let i = 1; i < arrayLength; ++i) {
if (myArray[i] > maxElement) {
maxElement = myArray[i];
}
}

console.log(maxElement); // 27
``````

### Performance Benchmark

Using JS Benchmark - we've run all of these approaches on varying input, from 100 to 1000000 elements in the array. The performance is relative, and depends on the length of the array.

• For small arrays (100), the `reduce()` method performed the best, followed by standard loops, the spread operator and then the `apply()` method. The runner ups are almost equal in performance.
• For medium arrays (1000), the standard loops perform the best, followed by `reduce()`, the spread operator and the `apply()` method. Standard loops significantly faster than `reduce()` here, which in turn, is fairly faster than the runner ups.
• For really large arrays (1000000), the standard loops outperform all other methosds to such a large degree that the case for standard loops is very strong.

Standard loops scale really well, and only lose out to the competition when applied to small arrays. If you're dealing with a few items, or smaller arrays, all of the methods will be fairly seamless. The larger the array, the bigger the benefit of using standard loops.

Note: Don't take benchmarks at face value! They're run on different machines, with likely different browser versions and JS engines. Test these out in your application and choose the scalable, fastest option for your own usecase.
``````        <h3 id="conclusion">Conclusion</h3>
``````

In this guide, we've taken a look at how to get the minimum and maximum elements of an array in JavaScript. We've taken a look at the `Math.min()` and `Math.max()` methods, the spread operator, the `reduce()` method, the `apply()` method and wrote a custom approach to getting the elements through a `for` loop. Finally, we've benchmarked the results, noting that it doesn't really matter which approach you use for small arrays, while you should tend to use standard for loops for larger arrays.

Reference: stackabuse.com