JavaScript Array reduce() Method – GeeksforGeeks

by


Improve Article

Save Article

Like Article

Improve Article

Save Article

The Javascript 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 )

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

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

Below are examples of the Array reduce() method.

Example 1: In this example, we will write a reduce function to simply print the difference of the elements of the array.

html

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

        var arr = [175, 50, 25];

         

        function subofArray(total, num) {

            return total - num;

        }

        function myGeeks(item) {

            document.getElementById("GFG").innerHTML

                    = arr.reduce(subofArray);

        }

    </script>

</body>

Output: 

 

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

html

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

        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>

Output: 

 

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

html

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

        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>

Output: 

 

We have a complete list of Javascript Array methods, to check those please go through this Javascript Array Complete reference article.

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

  • Google Chrome 3 and above
  • Microsoft Edge 12 and above
  • Mozilla Firefox 3.0 and above
  • Safari 5 and above
  • Opera 10.5 and above

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.



Source link

Leave a Comment