javascript
  1. javascript-reduce
PreviousNext

JavaScript reduce()

The reduce() method in JavaScript reduces an array to a single value by iteratively applying a function to each element of the array until the final result is obtained.

Syntax

array.reduce(function(accumulator, currentValue, index, arr), initialValue)
  • function(accumulator, currentValue, index, arr): The function to be executed on each element of the array. It takes four arguments:
    • accumulator: the result of the previous iteration (or initialValue for the first iteration)
    • currentValue: the current element being processed
    • index (optional): the index of the current element being processed
    • arr (optional): the array that reduce() was called on
  • initialValue (optional): the initial value to be used as the first argument (accumulator) when the function is executed for the first time

Example

Here is an example that uses reduce() to find the sum of an array of numbers:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15

Output

The output of the above example will be 15, which is the sum of the numbers in the array.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reduce Function Example</title>
</head>
<body>

<script>
  // Sample array of numbers
  const numbers = [1, 2, 3, 4, 5];

  // Use reduce to find the product of the numbers
  const result = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);

  // Display the result on the page
  document.body.innerHTML = `<p>Product of the numbers: ${result}</p>`;
</script>

</body>
</html>
Try Playground

Explanation

The reduce() method takes a function as an argument. This function is executed on each element of the array. The first argument of the function is the accumulator, which holds the result of the previous iteration (or the initialValue for the first iteration). The second argument is the currentValue, which is the current element being processed.

In the example above, we start with an initialValue of 0, and the function adds each element of the array to the accumulator (starting at 0) to find the sum of all the numbers.

Use

The reduce() method can be used for a variety of operations on arrays, including:

  • finding the maximum or minimum value
  • flattening nested arrays
  • grouping and counting items in an array
  • calculating averages, means, and other statistical measures

Important Points

Here are some important points to keep in mind when using reduce():

  • The first time the function is called, the accumulator is equal to the initialValue (or the first element of the array if no initialValue is provided).
  • If no initialValue is provided, the function will start with the second element of the array as the currentValue.
  • If the array is empty and no initialValue is provided, reduce() will throw an error.
  • The function should be a "pure" function, meaning it should have no side effects and always return the same output given the same input.
  • If you need to modify the original array, it is best to use a for loop or one of the many array methods offered by JavaScript.

Summary

The reduce() method is a powerful tool in JavaScript for reducing an array to a single value by iteratively applying a function to each element of the array. With its flexible syntax and many use cases, reduce() is an important tool in any JavaScript developer's toolbox.

filter()reduceRight()
Published on: