Get the sum of all values in an array in JavaScript

JavaScript unfortunately doesn't implement a method on Array's to sum up its values, not currently at least. This is in contrast to for example Python which has the sum() function or the array_sum() function in PHP. In the old school JavaScript days the way to go was by using a good old for-loop.

Luckily we can sum up the values in an array rather quickly with the reduce() method. The reduce() method executes a callback function on all elements in the array except for the first element, unless you pass an initial value to reduce() as a second argument. The first element in the array is used as the initial value(accumulator) if you don't specify one yourself.

If you need to sum up the values in an array you can use the following callback function in the reduce() method.

const values = [10, 9, 8, 7, 6];
const sum = values.reduce((accumulator, current) => accumulator + current);
console.log(sum); // => 40

To understand the accumulator and current parameters better you may read along with the following example which logs both in each iteration.

const values = [4, 3, 2, 1];
console.log("Before reduce");
const sum = values.reduce((accumulator, current) => {
  const result = accumulator + current;
  console.log(
    `accumulator: ${accumulator}, current: ${current}, result: ${result}`
  );
  return result;
});
console.log("After reduce");

// Before reduce
// accumulator: 4, current: 3, result: 7
// accumulator: 7, current: 2, result: 9
// accumulator: 9, current: 1, result: 10
// After reduce

console.log(sum); // => 10

As you see above the elements in the are iterated through from the second element, with the first element being the accumulator in the first iteration. And the result, or better the return value, of each iteration is used as accumulator for the next iteration and eventually as the return value of reduce() itself.

Reduce on empty arrays

You may encounter a situation where you cannot be certain that you call reduce on an array with elements. If you call .reduce() on an empty array you will encounter the following TypeError:

[].reduce((accumulator, current) => accumulator + current);
// Uncaught TypeError: Reduce of empty array with no initial value

Possibly you can prevent this by checking the array length first. But a cleaner solution, in my opinion, is to provide a initial value to reduce() as a second argument which is a valid accumulator too. So in the case of summing up values it is safe to use 0 as initial value, since it won't affect the value of the sum if the array does contain values.

[].reduce((accumulator, current) => accumulator + current, 0); // 0

Be aware with different types

Of course, be aware with the usual gotcha's when summing up values in JavaScript. Consider the following variation for example where the last element of the array is not an integer but a string. In this case JavaScript sums up 10, 9, 8 and 7 to a value of 34, when the string 6 is encountered will execute a string concatenation instead of summing up 6 as an integer. Resulting in the value of sum being equal to the string 346.

const values = [10, 9, 8, 7, "6"];
const sum = values.reduce((accumulator, current) => accumulator + current);
console.log(sum); // => 346
console.log(typeof sum);