JavaScript Array reduce() Method

The JavaScript Array.reduce() method iterates over an array, applying a reducer function to each element, accumulating a single output value. It takes an initial value and processes elements from left to right, reducing the array to a single result.

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:

initialValue: It is an optional parameter and is used to specify the value to be passed to the function as the initial value.

Return value:

The JavaScript array reduce method returns a single value/element after traversing the complete array.

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

// Input array
let arr = [175, 50, 25];

// Callback function for reduce method
function subofArray(total, num) {
    return total - num;
}

//Function to execute reduce method 
function myGeeks(item) {

    // Display output
    console.log(arr.reduce(subofArray));
}
myGeeks()

100

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

// Input array
let arr = [10, 20, 30, 40, 50, 60];

// Callback function for reduce method
function sumofArray(sum, num) {
    return sum + num;
}

//Function to execute reduce method 
function myGeeks(item) {
    // Display output
    
    console.log(arr.reduce(sumofArray));
}
myGeeks();

210

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

// Input array
let arr = [1.5, 20.3, 11.1, 40.7];

// Callback function for reduce method
function sumofArray(sum, num) {
    return sum + Math.round(num);
}

//Function to execute reduce method 
function myGeeks(item) {

    // Display output
    console.log(arr.reduce(sumofArray, 0));
}
myGeeks();

74

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 23 and above
• Edge 11 and above
• Firefox 21 and above
• Opera 15 and above
• Safari 6 and above

JavaScript Array reduce() method- FAQs

How does the reduce() method work with an initial value?

When provided, the initial value is used as the first argument to the first call of the reducer function. If not provided, the first element of the array is used, and the iteration starts from the second element.

Can reduce() be used to flatten an array?

Yes, reduce() can be used to flatten an array by concatenating nested arrays into a single array using the accumulator.

How can I use reduce() to sum all numbers in an array?

To sum numbers, use reduce((accumulator, current) => accumulator + current, 0), where 0 is the initial value.

Is reduce() the same as forEach()?

No, reduce() accumulates values to produce a single result, while forEach() simply iterates over array elements without returning a value.

Can reduce() be used to group array elements?

Yes, reduce() can group array elements into categories by accumulating elements into an object based on a specified condition.

R

rathbhupendra

Follow

Improve