JavaScript Array reduce() Method

Below is the example of Array reduce() method.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>          

    chevron_right

    
    

  • 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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.