Array.prototype.reduce's initial value is optional

reduce() is one of these underrated Array methods that can be tremendously useful to accumulate array items. Define an initial value, iterate over all array items and define a callback function to form a combined result.

The beauty: each callback's return value is provided to the next entry callback so that you can sum numbers or regroup the array entries inside of an object.

reduce((previousValue, currentValue) => {
  /* ... */
});
reduce((previousValue, currentValue, currentIndex) => {
  /* ... */
});
reduce((previousValue, currentValue, currentIndex, array) => {
  /* ... */
});
reduce((previousValue, currentValue, currentIndex, array) => {
  /* ... */
}, initialValue);

And after all these years, looking at these reduce callback signatures, I discovered that the initial value is optional. 😲

Here's an example of summing numbers.

// sum all numbers in the array
// start with `0`
[1, 2, 3, 4, 5].reduce((previousValue, currentValue) => {
  console.log(previousValue);
  // the return value will be the next `previousValue`
  return previousValue + currentValue;
}, 0); // 15

// Output in the console:
// 0 
// 1 
// 3
// 6
// 10 
// 15

You might ask if the first iteration starting with 0 is necessary. And you're correct – it's redundant and is a case for not providing an initial value at all!

// sum all numbers in the array
// start with `1`
[1, 2, 3, 4, 5].reduce((previousValue, currentValue) => {
  console.log(previousValue);
  // the return value will be the next `previousValue`
  return previousValue + currentValue;
}); // 15

// Output in the console:
// 1 
// 3
// 6
// 10 
// 15

Without a second argument, the reduce loop starts with the first array entry instead of an initial value – ergo, you'll save one iteration! 🎉

This is a nifty little find! Big thanks to Ramón, who tweeted this tip!

If you want to learn more about the array method, head over to the reduce entry on MDN.