In the previous shot, we learned how to get the sum of an array using three different methods. Today, we want to learn how to do so using the reduce
method.
With all the three methods we’ve learned, we’ve noticed one common thing: code mutation.
Let’s see an example.
function sumArray(array) {
let sum = 0;
for (let i = 0; i < array.length; i += 1) {
sum += array[i];
}
return sum;
}
console.log(sumArray([1, 4, 0, 9, -3])); // sum to 11
As you can see here, we first declare a variable (sum
) and set its initial value to 0
. Then, thanks to the for
loop, we iterate through the array and add each array
item to sum
to get the total.
While this traditional way looks pretty simple, there’s a real issue we must be aware of: code mutation. We first set an initial value for sum
, and modify it later. Code mutation is bad because it makes our code more error-prone and less readable. We need to avoid this as much as we can.
The code above is an example of a code mutation. To avoid this, JavaScript provides us with a built-in solution: reduce()
. Let’s see how to use it.
reduce
accepts two mandatory parameters: the accumulator
(total) and the currentValue
(item). reduce
cycles through each number in the array, much like it would in a traditional for
loop.
function sumArray(array) {
/*Go through array and loop
total starting point is 1 and item = 4
*/
const sum = array.reduce((total, item) => total + item);
/*
1st call: total = 1, item = 4 => sum = 1 + 4 = 5
2nd call: total = 5, item = 0 => sum = 5 + 0 = 5
3rd call: total = 5, item = 9 => sum = 5 + 9 = 14
4th call: total = 14, item = -3 => sum = 14 + -3 = 11
*/
// return the result
console.log(sum);
return sum;
}
sumArray([1, 4, 0, 9, -3]); //logs 11
Notice that we made four calls instead of five. That is because reduce
initially takes the first and second items, so next time we jump to the third item. When there are no more numbers left in the array, the method returns the total value.
If you are afraid of arrow functions, here is the traditional way:
function sumArray(array) {
/*Go through array and loop
total starting point is 1 and item = 4
*/
const sum = array.reduce(function(total, item) {
return total + item;
});
/*
1st call: total = 1, item = 4 => sum = 1 + 4 = 5
2nd call: total = 5, item = 0 => sum = 5 + 0 = 5
3rd call: total = 5, item = 9 => sum = 5 + 9 = 14
4th call: total = 14, item = -3 => sum = 14 + -3 = 11
*/
// return the result
console.log(sum);
return sum;
}
sumArray([1, 4, 0, 9, -3]); //logs 11
function sumArray(array) {
const sum = array.reduce((total, item) => total + item);
console.log(sum);
return sum;
}
sumArray([1, 4, 0, 9, -3]);
function sumArray(array) {
const sum = array.reduce(function(total, item) {
return total + item;
});
console.log(sum);
return sum;
}
sumArray([1, 4, 0, 9, -3]);
We’ve learned that code mutation is bad and we should avoid it as much as we can. reduce()
is a built-in method that helps us avoid code mutation, as we can see it using the for
loop.