How to find the largest number contained in a JavaScript array?

Javascript Web Development Front End Technology

In this tutorial, we will learn about the different methods or ways of finding the largest number contained inside a JavaScript array. An array is a collection of different values. We will define an array of numbers in which we will search for the largest number.

There are three ways of finding the largest number in a JavaScript array that is listed below −

Traversing the Whole Array
Using the reduce() Method
Using the Math.max() and apply() methods

Traversing the Whole Array

This is the easiest or the most naive approach to find the largest number in the array, where we will traverse each element of the array one by one and compare it with the previous one; if the current element is larger, then we will update the value of the largest element.

Steps

Step 1 − In the first step, we will declare a numeric array and the variable with the name largest which is initially assigned with the value of the first element of the array.
Step 2 − In the second step, we declare a function that evaluates the largest number in the array.
Step 3 − In next step, we will use a for loop to traverse the array from the second element to the last element and compare all of them with their corresponding previous elements to update the value of the largest.
Step 4 − In this step, we will call the function that was declared in the second step, so that it evaluates the largest number and prints it on the user screen.

Let us see a coding example to implement the above approach −

Example 1


<html>
<body>
   <h3>Finding the largest number contained in a JavaScript array</h3>
   <p>The Dummy array is: [5, 10, 20, 3, 98, 95]</p>
   <p id="result"></p>
   <script>
      let arr = [5, 10, 20, 3, 98, 95];
      let largest = arr[0];
      function largestNumber() {
         for (let i = 1; i < arr.length; i++) {
            if (arr[i] > largest)
            largest = arr[i];
         }
         document.getElementById('result').innerHTML = "The largest element of the array is: " + largest;
      }
      largestNumber();
   </script>
</body>
</html>

In this example, we have declared a number array as arr, then traverse it using for loop to update the value of largest to the largest number in the array.

Using the reduce() Method

The reduce() method in JavaScript accepts a function that acts as a reducer function for the array and returns a single value that will be the result of the function’s calculations. It will not affect the original array and will not work for empty array elements.

Steps

Step 1 − We need to declare the numeric array as the first step of the algorithm.
Step 2 − In the second step, we will define a variable that stores the value returned by the reduce() method.
Step 3 − In the last step, we will write the logic to display the largest number in the array on the user screen.

Let us understand with the help of a code example −


<html>
<body>
   <h3>Finding the largest number contained in a JavaScript array</h3>
   <p>The Dummy array is: [20, 22, 18, 25, 75, 62, 88]</p>
   <p id="result"></p>
   <script>
      let arr = [20, 22, 18, 25, 75, 62, 88];
      let largest = arr.reduce(function (a, b) {
            return (a > b) ? a : b;
         }
      );
      document.getElementById('result').innerHTML = "The largest element of the array using reduce() method is: " + largest;
   </script>
</body>
</html>

In above example, we used the reduce() method on the numeric array arr, and returning the value that is largest in the array using the ternary operator inside the reducer function of reduce() method.

Using the Math.max() and apply() Methods

In this approach, we are using two JavaScript methods together to solve this problem. Let us see what is the role of each of these functions in solving this problem.

The Math.max() Method − this method is used to find the largest values among the numeric values from zero and so on. We can pass any number of values inside it. But it will not work in case of an array as it executes for individual digit passed inside it not for all digits at a time.

Syntax

console.log(Math.max(8, 2, 3, 9)); // logs largest value i.e. 9

Above code will log the largest value among the passed values in the console.

Syntax

var array=[6, 23, 9, 5];
console.log(Math.max(array)); // logs NaN in the console

If you try to run the above code, it will print NaN (Not a Number) in the console as it does not work for the arrays.

The apply() Method − To solve the above problem or to make Math.max work for the arrays we use apply() method with it. The apply() method is invoked using two arguments one is the given this value, and another is the array to which we want to operate operations.

Syntax

var array=[6, 23, 9, 5];
console.log(Math.max.apply(null, array));

The code written above will log the largest number of array that is 23 in this case. Here, we are passing the null to the apply() method, because the first argument to the apply() method that was this is not used here, so we use null in place of that.

Steps

Step 1 − In this step, we will define the array of numbers in which we will search for the largest number.
Step 2 − The next step involves the use of Math.max.apply() methods as discussed above and stores the returned value in a variable
Step 3 − As the last step of algorithm, we will show the largest number we get from previous steps on the user screen

Let us see a code example to completely understand things −

Example 3

Below example will explain the use of the Math.max() and apply() methods to find the largest number in the array −


<html>
<body>
   <h3>Find the largest number contained in a JavaScript array</h3>
   <p>The Dummy array is: [44, 28, 18, 55, 68, 11, 70]</p>
   <p id="result"></p>
   <script>
      let arr = [44, 28, 18, 55, 68, 11, 70];
      let largest = Math.max.apply(null, arr);
      document.getElementById('result').innerHTML = "The largest element of the array using Math.max() and apply() method together is: " + largest;
   </script>
</body>
</html>

In this example, we used the Math.max.apply() on the array arr that returns the largest number in the array which will be stored in a new variable largest.

NOTE − In the discussion above, You must notice that we have not used the filter() and map() methods of JavaScript for finding the largest number in the array, and the reason for not using them is that they take a callback function and returns a modified array according to the defined condition in the function, that affects the original array.

In this tutorial, we learned about the three different ways to find the largest number in the JavaScript array, which always returns only a single value and that will be the largest number of all the array elements.