Back to Freecodecamp

What Is the Reduce Method, and How Does It Work?

curriculum/challenges/english/blocks/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md

latest3.7 KB
Original Source

--interactive--

The reduce method is a function in JavaScript that allows you to process an array and condense it into a single value. This single value can be a number, a string, an object, or even another array.

It's called reduce because it reduces an array to a single output. While it might seem complicated at first, understanding reduce can greatly simplify your code in many situations.

At its core, reduce works by applying a function to each element in the array, in order, passing the result of each calculation on to the next. This function is often called the reducer function.

The reducer function takes two main parameters: an accumulator and the current value. The accumulator is where you store the running result of your operations, and the current value is the array element being processed.

Let's look at an example to illustrate how reduce works:

:::interactive_editor

js
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);

console.log(sum); // 15

:::

In this example, we're using reduce to get the sum of all the numbers in the array.

The reducer function takes the accumulator (which starts at 0, as specified by the second argument to reduce) and adds each number to it.

The result of each addition becomes the new accumulator for the next iteration.

The reduce method can also take an initial value as its second argument. This is the value that the accumulator starts with. In the example above, we set it to 0.

If you don't provide an initial value, reduce will use the first element of the array as the initial accumulator and start the process from the second element.

One of the great things about reduce is its flexibility. Because you define the reducer function, you have complete control over how the array is processed and what kind of result you want to produce. This makes reduce extremely powerful, but it can also make it a bit challenging to understand at first.

With practice, you will get the hang of working with the reduce method.

--questions--

--text--

What does the reduce method do to an array?

--answers--

Increases the size of the array.

--feedback--

Think about the end result of using reduce on an array.


Removes elements from the array.

--feedback--

Think about the end result of using reduce on an array.


Transforms the array into a single value.


Sorts the elements of the array.

--feedback--

Think about the end result of using reduce on an array.

--video-solution--

3

--text--

In the reduce method, what is the accumulator?

--answers--

The final result of the reduce operation.

--feedback--

Consider what gets passed from one iteration to the next in a reduce operation.


The current element being processed.

--feedback--

Consider what gets passed from one iteration to the next in a reduce operation.


A temporary variable used for calculations.

--feedback--

Consider what gets passed from one iteration to the next in a reduce operation.


The running result of the reduce operation.

--video-solution--

4

--text--

What happens if you don't provide an initial value to the reduce method?

--answers--

It throws an error.

--feedback--

Think about what reduce needs to start its operation if no initial value is provided.


It uses 0 as the initial value.

--feedback--

Think about what reduce needs to start its operation if no initial value is provided.


It uses the first element of the array as the initial value.


It returns the array unchanged.

--feedback--

Think about what reduce needs to start its operation if no initial value is provided.

--video-solution--

3