Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find the min/max element of an Array in JavaScript?
In this tutorial, we will learn different ways of finding the maximum and minimum elements of an array in JavaScript. The minimum element is the smallest element among all the elements present in the array, while the maximum is the largest among them
Below are the approaches we can use to find the min/max elements of an array.
- Traverse the whole Array
- Using the Math.min() and Math.max() Methods.
Let us discuss these approaches with help of program examples.
Approach 1: Traverse the whole Array
In this approach, we will traverse the whole array using the for loop and compare the current element with the previous value of the smaller element; if the current element is smaller than the previous value of the smaller element then we will update its value. Similarly, for the largest or the maximum element, if the current element is larger than the previous value of the largest element we will update its value. It will take linear or the O(n) time to solve the problem.
Let us see an example of the above approach to better understand its implementation −
Steps
- Step 1 − In the first step, we will define an array of numbers in which we will search for the min and the max elements and also declare the min and max variables with initial value as the first element of the array assigned to both.
- Step 2 − In the next step, we need to use a for loop to traverse the array with the logic of updating the values of min and max variables.
- Step 3 − In this step, we will write the logic to display the output on the user screen using JavaScript
Example 1
The below example will illustrate the simple traversal method with O(1) extra space.
<html> <body> <p>The original array: [28, 45, 69, 20, 15, 7, 98]</p> <p id="result"></p> <script> let array = [28, 45, 69, 20, 15, 7, 98]; let min = array[0], 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('result').innerHTML = "The maximum or the largest element of the array is: " + max + "<br>" + "The minimum or the smallest element of the array is: " + min; </script> </body> </html>
In this example, we declared an array of numbers as array, and then declare two variables as min and max with initial values as the first element of the array, both of these variables will denote the minimum and the maximum element in the array. After performing these steps, we will use for loop to traverse the array elements and update the values of min and max with each iteration to the current minimum and the maximum element in the array.
Approach 2: Using the Math.min() and Math.max() Methods
In this approach of finding the maximum and the minimum element in the array, we will use the in-built Math.max() and Math.min() methods of JavaScript with the apply() method or array destructuring syntax.
The Math.max() and Math.min() methods will work only for multiple numerical values at a time. The Math.max() method returns the maximum number of all the digits passed to it, while Math.min() returns the minimum value. But both of these methods will not work for the array as they are only used with distinct digits.
So, to use these methods to find min/max elements in the array we need to convert the array to a set of distinct digits. To convert an array into a set of distinct digits were using apply() method before ES6 or ES2015. But after ES6, when the array destructuring syntax was introduced to destructure the array, we started using that syntax for the same purpose.
Let us see the implementation of both the above methods to find the min/max element in an array in JavaScript.
Using the apply() Method
In JavaScript, apply() method is invoked with two arguments first as the this value and another is the array in which we are searching for the min/max elements.
Syntax
let arr=[]; let min=Math.min.apply(null, arr); let max=Math.max.apply(null, arr);
In the above syntax, we used null instead of this value, because we do not need this variable in this case.
Example 2
The below example will explain how we can use Math.max() and Math.min() methods with apply() method of JavaScript.
<html> <body> <p>The array : [49, 58, 22, 17, 79, 6, 92]</p> <p id="result"></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('result').innerHTML = "The max element: " + max + "<br>" + "The min element: " + min ; </script> </body> </html>
Using the array destructuring syntax method
The array destructuring was introduced first with the introduction of ES6. Array destructuring is a very useful method. It can be used to distinguish the elements of an array, merge two arrays, to individually access the array elements.
In this case, we will use this syntax to distinguish the digits of the array
Syntax
Following is the syntax of the array destructuring.
let arr=[]; console.log(…arr); // logs the array elements distinctly in the console
We use array destructuring with three dots(…) before the name of the array we want to destructure.
Example 3
The below example will illustrate the use of array destructuring with the Math.max() and the Math.min() methods of JavaScript to find min/max in the array −
<html> <body> <p>The array is: [56, 68, 23, 9, 77, 65, 2, 89]</p> <p id="result"></p> <script> let array = [56, 68, 23, 9, 77, 65, 2, 89]; let min = Math.min(...array); let max = Math.max(...array); document.getElementById('result').innerHTML = "The maximum element of the array is: <b>" + max + "</b><br>" + "The minimum element of the array is: <b>" + min + "</b>"; </script> </body> </html>
In both the above examples, we have seen how we can use the Math.min() and Math.max() methods of JavaScript in two ways with two different syntaxes to find the min/max element in an array in JavaScript.
In this tutorial, we discussed about the two different methods to find the min/max elements in an array in JavaScript in deep understanding with code examples for each method.
10K+ Views
