Introduction
reduce() is a built-in JavaScript method used to process an array and return a single accumulated value, without mutating the original array. This value can be a number, string, object, or even another array, depending on the operation implemented. If the explanation above seems confusing, let’s quickly clarify it with some examples:
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum) // output: 55;
console.log(arr) // output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
Did you see how quickly we summed all the elements of the array in a single line using reduce()? The method returned the final single value directly into the sum variable no extra variables, no mess, and the original array remained unchanged. This demonstrates that reduce() returns the final accumulated value from the operation, in our case, 55.
Now, you might be wondering:
why use reduce() at all if we can achieve the same result with a for loop or other similar constructs?
That’s a great question. Yes, we can use traditional loops, but reduce() offers more out of the box. For example, if I had used a for loop to sum the elements, I would’ve needed to declare an external variable beforehand. See the example below:
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = 0;
for(let i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log(sum) // output: 55
Have you noticed that we used a for loop to calculate the sum of all the elements? It returned the correct output as expected. However, did you also notice that we had to declare a separate variable, sum, outside the loop? This process took about 4–5 lines of code to achieve the same result that the reduce() method accomplished in just one line.
Although the for loop is generally faster than the reduce() method, but for small operations, the difference is negligible. In fact, reduce() can often be more elegant and readable.
If performance is critical (e.g., summing millions of numbers): ➤ Use a for loop.
If code readability or a functional programming style is more important:➤ Use .reduce().
We don’t always work with big data. More often than not, we deal with small datasets, like in the example above. In such cases, reduce() is a better choice not only because speed isn’t an issue, but also because it leads to shorter and cleaner code.
I hope you’ve become at least somewhat familiar with this concept. I’ll go deeper into it so you can fully understand the real value of using this method.
How does reduce() work?
Now, I will explain the analogy behind this method so that you can understand how the reduce() method differs from other loops, such as forEach. Let's get started quickly:
array.reduce((accumulator, currentValue, currentIndex, array) => {
// logic here
}, initialValue);
Have you seen the core structure of this? It accepts two arguments: the first is the callback function, which is mandatory, and the second is the initialValue, which is optional.
Callback Function
The callback function is an arrow function that takes four arguments: accumulator, currentValue, currentIndex, and array. The first two are required, while the last two are optional and can be used if needed.
accumulator:
Description: It remembers the result from the previous step of the .reduce() process. It's like a memory that holds the total (or built-up value) so far.
Usage: You use it to build up a result — like adding numbers together, combining strings, building an object, etc.
Example: In array.reduce((acc, val) => acc + val, 0), acc keeps the running total of all values.
currentValue:
Description: It is the current element in the array that .reduce() is processing.
Usage: You use it to work with the current item — such as adding it to the accumulator, checking a condition, or transforming it.
Example: In array.reduce((acc, val) => acc + val, 0), val is the current number being added to the total.
currentIndex:
Description: It is the position (index) of the current element in the array (like 0, 1, 2, ...).
Usage: You use it when you need to know where you are in the array, like skipping the first few items, working with odd/even positions, or labeling data.
Example: In array.reduce((acc, val, index) => acc + index, 0), index is added to the result, summing up all the positions of elements.
array:
Description: This is the original array that .reduce() is working on.
Usage: You use it when you want to reference the whole array inside the callback — for example, comparing an item to others or checking the array’s length.
Example: In array.reduce((acc, val, i, arr) => acc + arr.length, 0), arr is used to get the full array’s length during each step.
I have explained all the arguments of the callback function as clearly as I can. Look at the example below, and you will understand each argument logically.
const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {
console.log("accumulator",accumulator+" "+"currentValue",currentValue+" "+"currentIndex",currentIndex+" "+"array",array)
return accumulator + currentValue
},0)
/* output:
accumulator 0 currentValue 1 currentIndex 0 array [ 1, 2, 3, 4 ]
accumulator 1 currentValue 2 currentIndex 1 array [ 1, 2, 3, 4 ]
accumulator 3 currentValue 3 currentIndex 2 array [ 1, 2, 3, 4 ]
accumulator 6 currentValue 4 currentIndex 3 array [ 1, 2, 3, 4 ] */
I created this example so that you can visually understand all the arguments of the reduce() method. I know the accumulator can be a bit confusing you might wonder why it sometimes seems to represent a random value without any clear sequence. This behavior isn't typically seen in other loops or methods, and that’s what makes the reduce() method unique.
The accumulatora is a special argument that exists only in reduce(), and it's what sets this method apart from others. Let’s understand how it works.
accumulator
The accumulator is the value that gets updated each time the callback function executes. For example, if an array has five elements, the callback function will execute five times. With each execution, it returns a new value based on the previous result. This running total or accumulated value is passed into the next callback call. Look at the output of the code below, and you’ll understand how the accumulator behaves.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce((acc, item) => {
console.log(acc+" "+item);
return acc + item;
}, 0)
/* output:
0 1
1 2
3 3
6 4
10 5
15 6
21 7
28 8
36 9
45 10 */
Look at the output above. The left side of the series of values is the accumulator, while the right side shows the items. We have set 0 as the initialValue argument, so the accumulator starts at 0, or whatever value we set as the initialValue. You can see this below.
First row: 0 1
0 is the accumulator, which started from 0 because I set 0 as the initialValue. If I had left it empty, it would start from 1 because the first element of the array is 1. The 1 is the current item, i.e., the first element of the array.
Second row: 1 2
Now, 1 is the accumulator because the last returned value from the callback function was 1. So the accumulator was updated from 0 to 1. The 2 is the second element of the array. It will continue in the same way.
Now check out the example below; you will understand the whole analogy, and all your doubts will be cleared.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce((acc, item) => {
console.log(acc+" + "+item+" = "+ (acc + item));
return acc + item;
}, 0)
/* output:
0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15
15 + 6 = 21
21 + 7 = 28
28 + 8 = 36
36 + 9 = 45
45 + 10 = 55 */
In this example, notice that in the first row, the value we have is 1, which serves as the accumulator for the second operation (summing the current accumulator and the second element: 1 + 2 = 3). In short, an accumulator is the value returned from the previous execution of the callback function. This is how an accumulatorworks.
Now, let’s discuss the optional initialValue argument to clear up any doubts about the reduce method.
Initial Value
The initialValue specifies the starting value for the accumulator. By default, if initialValue is not provided, the accumulator starts with the first element of the array.
However, it is considered good practice to set the initialValue explicitly (commonly to 0 for numerical operations) because it makes the behavior more predictable and prevents errors. For example, if the array is empty and you provide initialValue as 0, the reduce method will return 0. Otherwise, it will throw an error. You can see this demonstrated in the example below:
const arr = [];
const sum = arr.reduce((acc, item) => acc + item)
// output: TypeError: Reduce of empty array with no initial value
Have you seen the error? It says the array is empty. We must set an initial value to avoid this error. Check the example below:
const arr = [];
const sum = arr.reduce((acc, item) => acc + item, 0)
console.log(sum) // output: 0
Now everything is clear. But what if I told you that the purpose of the initialValue argument is not just that? Of course, it is also used to specify the type of data the reduce() method should return.
If we want to return a number, then we need to set a number as the initialValue. For example, when summing elements, we use 0 as the initialValue because we expect the result to be a number — the sum of all the elements. You can see an example below:
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum) // output: 55
Did you notice that we set 0 as the second argument to reduce(), which is the initialValue and a number? Because of this, the result was 55 (the sum of all elements). Now, let’s experiment:
Does the initialValue really impact the data type of the result?
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce((acc, item) => acc + item, "");
console.log(sum) // output: “12345678910”
Did you notice that when we set "" (an empty string) as the initialValue, the result was "12345678910" — a string? This happens because the accumulator(acc) starts as a string, so the + operator performs string concatenation instead of numeric addition.
In JavaScript, adding two numbers returns their sum (e.g., 5 + 5 = 10), but adding two strings concatenates them (e.g., "a" + "b" = "ab"). That is why, when the initialValue is a string, reduce() returns a concatenated string of all the elements instead of their numeric sum.
In conclusion, the reduce() method is a powerful tool for processing arrays in JavaScript. It allows you to accumulate values, transform data, and perform complex operations with minimal code. By understanding how the accumulator and initial value work, you can leverage this method effectively in your projects.