JavaScript Array reduce() Method

Syntax

The following is the syntax of Array reduce() in javascript:

The reduce() in javascript simply is applied to the array that has to be reduced.

Parameters

Parameters of JavaScript toString() method is:

• callback_function: The function whose code is used for reducing the array to a single array element. It takes more parameters:
  • accumulator: It is the variable that accumulates the callback's return values.
  • currentValue: It is the current element that is being passed from the array.
• initialValue (optional): It is an optional value that is passed to callback_function() on first call. If this parameter is not given, the first element acts as the accumulator value on the initial call, and callback_function() will not execute on it.

Return Value

Array reduce() Function converts the array to a single value after reducing.

Exceptions

• TypeError: TypeError is thrown when the array is empty and no initial value is provided to the method

Example

Let's take a look at a basic example of how to reduce in javascript is used:

In this example, we are reducing the array by calculating the sum of the whole array.

Output: The Sum of the Array can be seen in the console.

What is reduce() in Javascript?

Suppose you have a list of numbers and you want to calculate the sum of all the numbers by reducing the array, So for that, you can use reduce in javascript for performing the above target.

As the name suggests, the reduce() function is a JavaScript library function that runs a reducer function on each array value and returns a single output result. The input array can be having values as numbers and strings.

How reduce() Works without an Initial Value?

If no initial value is provided to the reduce() function, reduce() method calls the callback_function on each element in the array skipping the first element, and the return value of the function is stored in the accumulator value.

Let's take an example to understand it better:

Suppose we have to get the sum of the array using reduce method, array = [1, 2, 3, 4, 5], if no initial value is passed with this method, it will start from the 1st index.

The callback_function would be invoked four times, each call is described as follows:

reduce() would return 15 on the last iteration.

How reduce() Works with an Initial Value?

If any initial value is provided to the reduce() function, reduce in javascript calls the callback_function on each element in the array including the first element from the 0th index, and the return value of the function is stored in the accumulator value.

Let's take an example to understand it better: Suppose we have to get the sum of the array using reduce method, array = [1, 2, 3, 4, 5]. The initial value passed is 10, the method will start from the 0th index adding all the values starting from 10.

The callback_function would be invoked five times, each call is described as follows:

reduce() would return 25 on the last iteration.

More Examples

Now we have learned about reduce in Javascript and now we can apply the reduce() function in some of our examples:

Example 1: Sum All the Values of an Array

In this example, we are reducing the array by calculating the sum of the whole array by passing an initial value to the reduce() method:

Input:

Output:

We can see that we simply got the sum of all array values along with the initial value

Example 2: Sum of Values in an Object Array

In this example, we are calculating the sum of all properties in the object array, we can access the property values by using the dot notation, we must provide an initial value for calculating the sum of the array:

Input:

Output:

Example 3: Subtracting Numbers in Array

In this example, we are reducing the array by calculating the difference of the whole array using the reduce() method:

Input:

Output:

We can see the subtracted value in the console.

Example 4: Remove Duplicate Items from Array

We can remove Duplicate elements by passing the initial value of the accumulator as [], in every iteration, it checks if the current value is in the accumulator array, if it's not in the accumulator then push the element into the array.

Input:

Output:

We got all the unique elements from the array

Example 5: Grouping Objects by a Property

We can group objects by initializing the accumulator values as an empty object {}, if the key property exists in the accumulator push the array value to that key, else initialize the empty array corresponding to that key value.

Input:

Output: We get all the car objects according to their hp

Example 6: Flatten an Array of Arrays

We can flatten an array of arrays by passing an initial value of the accumulator as [], in every iteration concatenate the current array value to the accumulator array, and finally return the concatenated Accumulator array.

Input:

Output:

We can see the flattened array as the output of the above program.

Example 7: Counting Instances of Values in an Object

We can count instances of all the array values in an object by initializing the accumulator as an empty object {}, if the current value exists in the accumulator increment the counter for that key value by 1, else initialize the key value by 1.

Input:

Output:

We get the object with all the instance count.

Browser Compatibility

Javascript reduce() method is supported by all Desktop, Mobile browsers, and Runtime Environments (Node and Deno).

See Also

• Anonymous Function in JavaScript
• JavaScript Functions
• Logical operators in JavaScript