Code highlights logo

Learn

Iterators

The .reduce() Method

The .reduce() method is an essential tool in JavaScript as it enables us to perform complex computations and aggregations on arrays. It simplifies the process of analyzing and manipulating data, making our code more concise and efficient.

How does .reduce() work?

The syntax for using the .reduce() method is as follows:

1array.reduce(callbackFunction, initialValue)
  • array: The array we want to reduce.
  • callbackFunction: A function that will be called on each element of the array. It takes four arguments:
    • accumulator: The accumulated value.
    • currentValue: The current element being processed.
    • currentIndex (optional): The index of the current element being processed.
    • array (optional): The original array.
  • initialValue (optional): The initial value of the accumulator.

The .reduce() method iterates over each element of the array, applying the callback function to the current element and the accumulator. The result of each iteration is stored in the accumulator, which is passed to the next iteration.

Use cases for .reduce()

The flexibility of the .reduce() method allows us to solve a wide range of problems. Some common use cases include:

  • Summing an array: We can use .reduce() to calculate the sum of all elements in an array.
  • Finding the maximum/minimum value: We can use .reduce() to find the maximum or minimum value in an array.
  • Counting occurrences: We can use .reduce() to count the number of occurrences of a particular element in an array.
  • Grouping and aggregating data: We can use .reduce() to group and aggregate data based on certain criteria.

Example

Let's look at an example that demonstrates the power of the .reduce() method. Suppose we have an array of numbers and we want to calculate their product:

1const numbers = [2, 4, 6, 8, 10];
2
3const product = numbers.reduce((accumulator, currentValue) => accumulator * currentValue);
4
5console.log(product); // Output: 3840

In this example, we start with an initial accumulator value of 1. The callback function multiplies each element of the array with the accumulator, continuously updating the accumulator. The final result is the product of all the numbers.


Instructions

1.

Add a new variable called sum and set it to be the result of the following:

  • Use the .reduce() method on the numbers array.
  • Pass a callback function as the first argument of .reduce(). This callback function should take two parameters: accumulator and currentValue.
  • Inside the callback function, add currentValue to the accumulator.
  • Return the updated accumulator at the end of the callback function.

Sign up to start coding

Already have an account?

Sign In

Course content