Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Find the min/max element of an Array using JavaScript

  • Difficulty Level : Basic
  • Last Updated : 18 May, 2019

The minimum and maximum element in an array can be found using 2 approaches:

Method 1: Using Math.min() and Math.max()
The min() and max() methods of the Math object are static functions that return the minimum and maximum element passed to it. These functions could be passed an array with the spread(…) operator. The spread operator allows an iterable to expand in places where multiple arguments are expected. In this case, it automatically expands array and gives the numbers to the functions.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Syntax:

minValue = Math.min(...array);
maxValue = Math.max(...array);

Example 1:






<!DOCTYPE html>
<html>
  
<head>
    <title>
      Find the min/max element
      of an Array using JavaScript
  </title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>Find the min/max element of 
      an Array using JavaScript</b>
    
    <p>Click on the button below t
      o find out the minimum and
      maximum of the array 
      [50, 60, 20, 10, 40]</p>
    
    <p>Minimum element is: <span class="min">
      </span>
        <br>Maximum Element is: <span class="max">
      </span></p>
    <button onclick="findMinMax()">
      Click to check
  </button>
    <script>
        function findMinMax() {
            array = [50, 60, 20, 10, 40];
            minValue = Math.min(...array);
            maxValue = Math.max(...array);
            document.querySelector(
              '.min').textContent = minValue;
            document.querySelector(
              '.max').textContent = maxValue;
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking the button:
    max-min-before
  • After clicking the button:
    max-min-after

Method 2: Iterating through the array and keeping track of the minimum and maximum element

The minimum and maximum element can be kept track by iterating through all the elements in the array and updating the minimum and maximum element upto that point by comparing them to the current minimum and maximum values. Initially, the minimum and maximum values are initialized to Infinity and -Infinity.

Syntax:

minValue = Infinity;
maxValue = -Infinity;

for (item of array) {
    // find minimum value
    if (item < minValue)
    minValue = item;
                
    // find maximum value
    if (item > maxValue)
    maxValue = item;
}

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
      Find the min/max element 
      of an Array using JavaScript
  </title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
      Find the min/max element
      of an Array using JavaScript
  </b>
    <p>
      Click on the button below to
      find out the minimum and 
      maximum of the array 
      [50, 60, 20, 10, 40]
  </p>
    
    <p>Minimum element is: <span class="min">
      </span>
        <br>Maximum Element is: <span class="max">
      </span></p>
    <button onclick="findMinMax()">
      Click to check
  </button>
    <script>
        function findMinMax() {
            array = [50, 60, 20, 10, 40];
            minValue = Infinity;
            maxValue = -Infinity;
  
            for (item of array) {
                // find minimum value
                if (item < minValue)
                    minValue = item;
  
                // find maximum value
                if (item > maxValue)
                    maxValue = item;
            }
  
            document.querySelector(
              '.min').textContent = minValue;
            document.querySelector(
              '.max').textContent = maxValue;
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking the button:
    traditional-before
  • After clicking the button:
    traditional-after



My Personal Notes arrow_drop_up
Recommended Articles
Page :