Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find the min/max element of an Array in JavaScript?
In JavaScript, finding the minimum and maximum elements of an array is a common task. The minimum element is the smallest value in the array, while the maximum is the largest. This tutorial covers the most effective approaches to accomplish this.
There are two main approaches to find min/max elements:
- Manual traversal using loops
- Using Math.min() and Math.max() methods
Method 1: Manual Array Traversal
This approach involves iterating through the entire array and comparing each element to keep track of the minimum and maximum values. It has O(n) time complexity and O(1) space complexity.
Example
<html>
<body>
<p>Original array: [28, 45, 69, 20, 15, 7, 98]</p>
<p id="result1"></p>
<script>
let array = [28, 45, 69, 20, 15, 7, 98];
let min = array[0];
let max = array[0];
for (let i = 1; i < array.length; i++) {
if (array[i] > max) {
max = array[i];
}
if (array[i] < min) {
min = array[i];
}
}
document.getElementById('result1').innerHTML =
"Maximum element: " + max + "<br>" +
"Minimum element: " + min;
</script>
</body>
</html>
Maximum element: 98 Minimum element: 7
Method 2: Using Math.min() and Math.max()
JavaScript provides built-in Math.min() and Math.max() methods that accept multiple arguments and return the minimum and maximum values respectively. Since these methods don't directly accept arrays, we need to convert the array elements into individual arguments.
Using apply() Method
Before ES6, the apply() method was used to pass array elements as individual arguments:
<html>
<body>
<p>Array: [49, 58, 22, 17, 79, 6, 92]</p>
<p id="result2"></p>
<script>
let array = [49, 58, 22, 17, 79, 6, 92];
let min = Math.min.apply(null, array);
let max = Math.max.apply(null, array);
document.getElementById('result2').innerHTML =
"Maximum element: " + max + "<br>" +
"Minimum element: " + min;
</script>
</body>
</html>
Maximum element: 92 Minimum element: 6
Using Spread Operator (ES6+)
The spread operator (...) provides a cleaner syntax to destructure array elements as individual arguments:
<html>
<body>
<p>Array: [56, 68, 23, 9, 77, 65, 2, 89]</p>
<p id="result3"></p>
<script>
let array = [56, 68, 23, 9, 77, 65, 2, 89];
let min = Math.min(...array);
let max = Math.max(...array);
document.getElementById('result3').innerHTML =
"Maximum element: <b>" + max + "</b><br>" +
"Minimum element: <b>" + min + "</b>";
</script>
</body>
</html>
Maximum element: 89 Minimum element: 2
Comparison
| Method | Time Complexity | Space Complexity | Readability |
|---|---|---|---|
| Manual Traversal | O(n) | O(1) | Moderate |
| Math.min/max with apply() | O(n) | O(1) | Good |
| Math.min/max with spread | O(n) | O(1) | Excellent |
Conclusion
For modern JavaScript development, using Math.min() and Math.max() with the spread operator provides the cleanest and most readable solution. The manual traversal approach offers more control and is useful when you need additional processing during iteration.
12K+ Views
