# How to sum elements at the same index in array of arrays into a single array?

Let’s say that I have an array of arrays, like so:

``````[
[0, 1, 3],
[2, 4, 6],
[5, 5, 7],
[10, 0, 3]
]
``````

How do I generate a new array that sums all of the values at each position of the inner arrays in javascript? In this case, the result would be: [17, 10, 19]. I need to be able to have a solution that works regardless of the length of the inner arrays. I think that this is possible using some combination of map and for-of, or possibly reduce, but I can’t quite wrap my head around it. I’ve searched but can’t find any examples that quite match this one.

You can use `Array.prototype.reduce()` in combination with `Array.prototype.forEach()`.

``````var array = [
[0, 1, 3],
[2, 4, 6],
[5, 5, 7],
[10, 0, 3]
],
result = array.reduce(function (r, a) {
a.forEach(function (b, i) {
r[i] = (r[i] || 0) + b;
});
return r;
}, []);
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');``````

Update, a shorter approach by taking a map for reducing the array.

``````var array = [[0, 1, 3], [2, 4, 6], [5, 5, 7], [10, 0, 3]],
result = array.reduce((r, a) => a.map((b, i) => (r[i] || 0) + b), []);

console.log(result);``````

Using Lodash 4:

``````function sum_columns(data) {
return _.map(_.unzip(data), _.sum);
}

var result = sum_columns([
[1, 2],
[4, 8, 16],

]);

console.log(JSON.stringify(result));``````
``<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>``

### For older Lodash versions and some remarks

Lodash 4 has changed the way `_.unzipWith` works, now the iteratee gets all the values passed as spread arguments at once, so we cant use the reducer style `_.add` anymore. With Lodash 3 the following example works just fine:

Read More:   ReferenceError: fetch is not defined

``````function sum_columns(data) {
}

var result = sum_columns([
[1, 2],
[4, 8, 16],
,
]);

console.log(JSON.stringify(result));``````
``<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>``

`_.unzipWith` will insert `undefined`s where the row is shorter than the others, and `_.sum` treats undefined values as 0. (as of Lodash 3)

If your input data can contain `undefined` and `null` items, and you want to treat those as 0, you can use this:

``````function sum_columns_safe(data) {
return _.map(_.unzip(data), _.sum);
}

function sum_columns(data) {
}

console.log(sum_columns_safe([[undefined]])); // 
console.log(sum_columns([[undefined]]));      // [undefined]``````
``<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>``

This snipet works with Lodash 3, unfortunately I didn’t find a nice way of treating undefined as 0 in Lodash 4, as now sum is changed so `_.sum([undefined]) === undefined`

One-liner in `ES6`, with `map` and `reduce`

``````var a = [ [0, 1, 3], [2, 4, 6], [5, 5, 7], [10, 0, 3] ];

var sum = a.map((_, i) => a.reduce((p, _, j) => p + a[j][i], 0));

document.write(sum);``````

Assuming that the nested arrays will always have the same lengths, concat and reduce can be used.

``````    function totalIt (arr) {
var lng = arr.length;
return [].concat.apply([],arr)  //flatten the array
.reduce( function(arr, val, ind){ //loop over and create a new array
var i = ind%lng;  //get the column
arr[i] = (arr[i] || 0) + val; //update total for column
return arr;  //return the updated array
}, []);  //the new array used by reduce
}

var arr = [
[0, 1, 3],
[2, 4, 6],
[5, 5, 7],
[10, 0, 3]
];
console.log(totalIt(arr));  //[17, 10, 19]``````

Assuming array is static as op showned.

``````a = [
[0, 1, 3],
[2, 4, 6],
[5, 5, 7],
[10, 0, 3]
]

b = []

for(i = 0; i < a.length; i++){
count = 0
for(j = 0; j < a.length; j++){
count += a[j][i]
}
b.push(count)
}
console.log(b)``````

So far, no answer using the `for ... of` mentioned in the question.
I’ve used a conditional statement for different lengths of inner arrays.

Read More:   TypeScript 3: JSX element type 'Component' does not have any construct or call signatures. 

``````var a = [
[0, 1, 3],
[2, 4, 6],
[5, 5, 7],
[10, 0, 3]
];
i = 0;
r = []
for (const inner of a) {
j = 0;
for (const num of inner) {
if (j == r.length) r.push(num)
else r[j] += num
j++;
}
i++;
}
console.log(r);``````

True, in this case, the classic `for` cycle fits better than `for ... of`.
The following snippet uses a conditional (ternary) operator.

``````var a = [
[0, 1, 3],
[2, 4, 6],
[5, 5, 7],
[10, 0, 3]
];

r = [];
for (i = 0; i < a.length; i++) {
for (j = 0; j < a[i].length; j++) {
j==r.length ? r.push(a[i][j]) : r[j]+=a[i][j]
}
}

console.log(r);``````

A solution using maps and reductions, adding elements from different lengths of arrays.

``````var array = [
,
[2, 4],
[5, 5, 7, 10, 20, 30],
[10, 0]
];
b = Array(array.reduce((a, b) => Math.max(a, b.length), 0)).fill(0);
result = array.reduce((r, a) => b.map((_, i) => (a[i] || 0) + (r[i] || 0)), []);

console.log(result);``````

``````const ar = [
[0, 1, 3],
[2, 4, 6],
[5, 5, 7],
[10, 0, 3]
]

ar.map( item => item.reduce( (memo, value)=> memo+= value, 0 ) )
//result-> [4, 12, 17, 13]
`````` The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .