JavaScript - Array .reduce() Method

In JavaScript, the Array.reduce() method is used to manipulate array. This method executes a reducer function on each element of the array (from left to right) and returns a 'single value' as a result.

It accepts an optional parameter named 'initialValue'. If we do not pass this parameter to the method, it will consider the arr[0] value as the initial value. Additionally, it will execute the callback function on the passed initialValue parameter.

This method does not execute the reducer function for empty array elements. In addition to that, it does not modify the original array.

Note − If the current array is empty or doesn't contain any initialValue, this method will throw a 'TypeError' exception.

Syntax

Following is the syntax of JavaScript Array.reduce() method −

reduce(callbackFn(accumulator, currentValue, currentIndex, array), initialValue)

Parameters

This method accepts two parameters. The same is described below −

callbackFn − This is the function to execute on each element in the array. This function takes four arguments:
- accumulator − This is the initialValue, or the previously returned value of the function.
- currentValue − This is the current element being processed in the array. If the initialValue is specified, its value will be arr[0], if not it's value will be arr[1].
- currentIndex (optional) − This is the index of the current element being processed in the array.
- array (optional)− This is the array on which the reduce() method is called.
initialValue (optional) − The value to which the accumulator parameter is initialized when the first time the callback function is called.

Return value

This method returns the single value that is the result after reducing the array.

Examples

Example 1

In the following example, we are using the JavaScript Array.reduce() method to sum all the elements present in the provided array.

<html>
<body>
   <script>
      const numbers = [10, 20, 30, 40, 50];
      const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
      document.write(sum);
   </script>
</body>
</html>

The accumulator starts at 0, and for each element in the array, it adds the current element to the accumulator. The final result of the accumulator (150) is the sum of all the elements.

Output

Example 2

In this example, we are calculating the product of all the elements in the specified array −

<html>
<body>
   <script>
      const numbers = [10, 20, 30, 40, 50];
      const product = numbers.reduce((accumulator, currentValue) => accumulator * currentValue, 1);
      document.write(product);
   </script>
</body>
</html>

The accumulator starts at 1, and for each element in the array, it multiplies the current element by the accumulator. The final result of the accumulator (12000000) is the product of all the elements.

Output

12000000

Example 3

In the below example, we are flattening an array of arrays (nesetedArray) into a single, one dimensional array (flattenedArray) −

<html>
<body>
   <script>
      const nestedArray = [[1, 2], [3, 4], [5, 6]];
      const flattenedArray = nestedArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
      document.write(flattenedArray);
   </script>
</body>
</html>

Output

1,2,3,4,5,6

Example 4

If the current array does not contain any element(no initial value available), the reduce() method will throw a "TypeError" exception −

<html>
<body>
   <script>
      const numbers = [];
      try {
         numbers.reduce((accumulator, currentValue) => accumulator * currentValue);
      } catch (error) {
         document.write(error);
      }
   </script>
</body>
</html>

Output

TypeError: Reduce of empty array with no initial value