Back to Blog

### How to Get the Sum of an Array in JavaScript

January 10, 2020

In today’s post, we will learn 4 ways you can use to get the total of a given array.

Let take an example, an array of `1, 4, 0, 9, -3` should return `11`.

## -1- Using traditional for loop

``````function sumArray(array){
let sum = 0 // the sum is initialed to 0

/*iterate until you reach the last item. remember, js arrays are zero-index based
ourArray.length = 5, the initialization block is set to 0.
the last item is index 4 that is < 5 (what we define in the condition block)
*/
for (let i = 0; i < array.length; i += 1) {
// take every item in the array and add it to sum variable
sum += array[i]
// initial: sum = 0
// iteration 1: 0 + 1 => sum = 1
// iteration 2: 1 + 4 => sum = 5
// iteration 3: 5 + 0 => sum = 5
// iteration 4: 5 + 9 => sum = 14
// iteration 5: 14 + -3 => sum = 11

}

console.log(sum) // 11
// return sum
return sum
}

// call the function and give it our array
sumArray([1, 4, 0, 9, -3]); // logs 11``````

``````function sumArray(array) {
let sum = 0;

for (let i = 0; i < array.length; i += 1) {
sum += array[i];

}

console.log(sum);
return sum;
}

sumArray([1, 4, 0, 9, -3]);``````

Live test on codepen

## -2- Using forEach

I like `forEach` as it is a builtin or an array-like method. It’s simple, just like English. Don’t take my words as that, see by yourself below.

``````function sumArray(array) {
let sum = 0;

/*Go through each item in the array and execute this function which adds
each item to sum
*/
array.forEach(item => {
sum += item;
});

console.log(sum);
return sum;
}

sumArray([1, 4, 0, 9, -3]); //logs 11``````

As you can see, the solution is short and clean. Let delete comments

``````function sumArray(array) {
let sum = 0;

array.forEach(item => {
sum += item;
});

console.log(sum);
return sum;
}

sumArray([1, 4, 0, 9, -3]);``````

## -3- Using for…of

`for...of` lets us iterate over an array, so we can make use of it to get the sum of an array. As we keep the same style of functions above, let copy and adjust.

``````function sumArray(array) {
let sum = 0;

/*loop over array and add each item to sum
*/
for (const item of array) {
sum += item;
}

// return the result
console.log(sum);
return sum;
}

sumArray([1, 4, 0, 9, -3]); //logs 11``````

We still have the same result as the other methods we used. You can test it on the pen below

Last, but not least. Let use `reduce` method.

## -4- Using reduce

I know that `reduce` is a bit difficult to use, for beginners, that’s why I introduce it as the last method in this serie. Don’t worry, I’ll try my best to make you understand it.

In the solutions above, you have noticed that everytime we have to mutate the `sum` variable. Using this solution (`reduce()`) will save us from mutating.

`reduce` accepts two mandatory parameters, the `accumulator` (total) and the `currentValue` (item). 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``````

You have noticed that we made four calls instead of five. It’s because initially reduce 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 (old fashionned)

``````function sumArray(array) {
/*Go through array and loop
total starting point is 1 and item = 4
*/
const sum = array.reduce(function(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]); ``````

Old fashioned

``````function sumArray(array) {

const sum = array.reduce(function(total, item) {
});

console.log(sum);
return sum;
}

sumArray([1, 4, 0, 9, -3]); ``````

Live test it on codepen

## Wrap up

In this tutorial we learned how to find the sum of an array of numbers. I showed you 4 methods, among which my preferred is the 3rd one (Using `for...of`). And you?

There might be other ways of doing the same operation that exist, feel free to share with us.

I advice you not to go with `map` method for this problem as it is an anti-pattern.