JavaScript Array reduce() Method

Below is the example of Array reduce() method.

Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        JavaScript Array reduce() Method 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color: green;">GeeksforGeeks</h1> 
      
    <p> 
        Click here to get the Subtract 
        of array elements from the left side 
    </p> 
      
    <button onclick="myGeeks()"> 
        Click Here! 
    </button> 
      
    <br><br> 
      
    Subtract: <span id="GFG"></span> 
      
    <!-- Script to use reduce method -->
    <script> 
        var arr = [175, 50, 25]; 
  
        function subofArray(total, num) { 
            return total - num; 
        } 
        function myGeeks(item) { 
            document.getElementById("GFG").innerHTML 
                    = arr.reduce(subofArray); 
        } 
    </script> 
</body> 
  
</html>           

Output:

The arr.reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left-to-right) and the return value of the function is stored in an accumulator.

Syntax:

array.reduce( function(total, currentValue, currentIndex, arr), 
initialValue )

Parameter: This method accepts five parameters as mentioned above and described below:

function(total, currentValue, index, arr): It is the required parameter and used to run for each element of array. It contains four parameter which are listed below:
- total: It is required parameter and used to specify the initialValue, or the previously returned value of the function.
- currentValue: It is required parameter and used to specify the value of the current element.
- currentIndex: It is optional parameter and used to specify the array index of the current element.
- arr: It is optional parameter and used to specify the array object the current element belongs to.
initialValue: It is optional parameter and used to specify the value to be passed to the function as the initial value.

Example 1: This example use reduce() method to return the sum of all array elements.

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        JavaScript Array reduce() Method 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color: green;">GeeksforGeeks</h1> 
      
    <p> 
        Click here to get the sum 
        of array elements 
    </p> 
      
    <button onclick="myGeeks()"> 
        Click Here! 
    </button> 
      
    <br><br> 
      
    Sum: <span id="GFG"></span> 
      
    <!-- Script to use reduce method -->
    <script> 
        var arr = [10, 20, 30, 40, 50, 60]; 
   
        function sumofArray(sum, num) { 
            return sum + num; 
        } 
        function myGeeks(item) { 
            document.getElementById("GFG").innerHTML 
                    = arr.reduce(sumofArray); 
        } 
    </script> 
</body> 
  
</html>                     

Output:

Example 2: This example use reduce() method to return the round sum of all array elements.

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        JavaScript Array reduce() Method 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color: green;">GeeksforGeeks</h1> 
      
    <p> 
        Click here to get the sum 
        of array elements 
    </p> 
      
    <button onclick="myGeeks()"> 
        Click Here! 
    </button> 
      
    <br><br> 
      
    Sum: <span id="GFG"></span> 
      
    <!-- Script to use reduce method -->
    <script> 
        var arr = [1.5, 20.3, 11.1, 40.7]; 
   
        function sumofArray(sum, num) { 
            return sum + Math.round(num); 
        } 
        function myGeeks(item) { 
            document.getElementById("GFG").innerHTML 
                    = arr.reduce(sumofArray, 0); 
        } 
    </script> 
</body> 
  
</html>                     

Output:

Supported Browsers: The browsers supported by JavaScript Array reduce() method are listed below:

Google Chrome
Microsoft Edge 9.0
Mozilla Firefox 3.0
Safari 4.0
Opera 10.5

My Personal Notes

Recommended Posts: