Sum array of arrays (matrix) vertically efficiently/elegantly

Question

In Javascript, if I have an array of arrays representing a matrix, say

x = [
    [1,2,3,4],
    [5,6,7,8],
    [9,10,11,12]
];

summing it "horizontally" is easy and can be done like

x.map(function(y){
  return y.reduce(function(a,b){
      return a+b;
  });
});

or

x.map(y => y.reduce((a, b) => a+b));

Now I would like to compute the "vertical" sum, which can be done

x.reduce(function(a, b){
    return a.map(function(v,i){
        return v+b[i];
    });
});

or

x.reduce((a, b) => a.map((v,i) => v+b[i]));

But I am not happy with this version and I wish there were something nicer, more elegant and more straightforward. Maybe an easy way to transpose the matrix beforehand? anyone?

const x = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
];

const a = x.map((y) => y.reduce((a, b) => a + b));
const b = x.reduce((a, b) => a.map((v, i) => v + b[i]));
const c = x.flat().reduce((a , b) => a + b)

console.log('Summing horizontally: '  + JSON.stringify(a));
console.log('Summing vertically: ' + JSON.stringify(b));
console.log('Summing whole array: ' + JSON.stringify(c));

Note that I asked a similar question a few days ago (link) but that lacked the bigger picture.

Answer 1

You could sum the values at the same index.

Use: array.reduce(sum)

var sum = (r, a) => r.map((b, i) => a[i] + b);

console.log([[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]].reduce(sum));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

arrayOfArrays = [
  [1,2,3,4],
  [5,6,7,8],
  [9,10,11,12]
];

arrayOfArrays.reduce(function(array1, array2) {
  return array1.map(function(value, index) {
    return value + array2[index];
  });
});

For my own benefit, and hopefully the benefit of others, I wanted to explain how the nested reduce/map methods function to perform the vertical summation of an array of equal length arrays. This is the perfectly acceptable version offered by the OP.

The reduce method applies a function against an accumulator and each value of the array from left to right to reduce it to a single value (MDN).

The case of this example, in the the first iteration the first two arrays are passed into the callback function for reduce as array1 and array2. The return value for the callback function is the result of the map method applied to array1.

map returns a new array with the results of calling the provided function on every element of the array. (MDN).

So map iterates each value in array1 and adds it to the value in array2 at the same index position. These results are pushed to a new array which is then returned to the reduce method.

The array of sums that was just returned now becomes the new array1 and reduce invokes its function passing in the new array1 and the next array as the new array2.

This is repeated until we run out of arrays in arrayOfArrays

Starting with:

arrayOfArrays = [
  [1,2,3,4],
  [5,6,7,8],
  [9,10,11,12]
];

The first iteration of reduce passes:

array1 [1,2,3,4]
array2 [5,6,7,8]

To the callback function for reduce. The return value for reduce is a new array derived by using map to add each value of array1 to the value of array2 in the same position:

array1 [1,2,3,4]
array2 [5,6,7,8]
return [6,8,10,12]

This value is returned to the reduce method and becomes the new array1. array1 and next array (array2) are then again passed into the reduce callback function and summed by the map method:

array1 [6,8,10,12]
array2 [9,10,11,12]
return [15,18,21,24]   // returned by map()