How to use Array.prototype.reduce() method in JavaScript ?

The Array.prototype.reduce() method is used in an array to return a single value from an array after executing the user-supplied callback function on each element of the array. It transverses from the left-most-element to the right-most-element of the given array.

Array.prototype.reduce() can be called using two ways.

• Callback function: The function will be declared first and later called for execution on an array.

Syntax:

array.reduce( myFunction, initialValue )

• Inline callback function: The parameters are passed inside the function inside reduce() method along with the array that is to be executed.

Syntax:

reduce(function(returnValue, currentValue, currentIndex, array){ 
        ... }, initialValue)

Parameters:

• array: It is the required array that we want to transverse
• myFunction: It is the callback function that will be executed on an array. It accepts four arguments:
  • returnValue: It is the returning value resulting from the previous call of the callback function. On its first call, it takes the value of initialValue else takes the value of the first element of the array, i.e. array[0]
  • currentValue: It is the present value of the element which is getting currently executed by the callback function. On the first call, it is the first element of the array if initialValue was specified else it is array[1], i.e. a second element of the array.
  • currentIndex: It is the value of the index of the ‘currentValue’ element. It takes value ‘0’ if initialValue is specified else ‘1’.
  • array: It is the required array we need to transverse.
• initialValue: It is an optional parameter that will be initialized as returnValue if it is mentioned, after which execution will be performed on other elements of the array starting from index 0.

Example 1: In this example, we will see the basic use of the Array.prototype.reduce() method using the callback function in Javascript.

JavaScript

<script>
    const array = [10, 18, 30, 41, 60];
    const myReducer = (returnValue,
        currentValue) => returnValue + currentValue;

    // 10 + 18 + 30 + 41 + 60
    console.log(array.reduce(myReducer));
    // expected output: 159

    // initialValue = 20
    // 20 + 10 + 18 + 30 + 41 + 60
    console.log(array.reduce(myReducer, 20));
    // expected output: 179
</script>

Output:

159
179

Example 2: In this example, we will see the use of the Array.prototype.reduce() method in Javascript.

JavaScript

<script>
    const array1 = [1, 2, 3, 4, 5];

    // Calculating sum of squares
    const myReducer = (returnValue, currentValue) =>
            returnValue + currentValue*currentValue;

    // 1 + 4 + 9 + 16 + 25
    console.log(array1.reduce(myReducer));
    // expected output: 55

    // initialValue = 6
    // 36 + 1 + 4 + 9 + 16 + 25
    console.log(array1.reduce(myReducer, 36));
    // expected output: 91
</script>

Output:

55
91