how are elements in a nested array added?

Question

let array = [[1,4], [11], [3,5,7]];

console.log(0+array[0]+array[1]+array[2]);
console.log(array.reduce((acc, value)=>acc+value, 0));

This prints the following on the console :

01,4113,5,7  
01,4113,5,7

I was trying to add all elements of the array and stumbled upon the above code. I know the spread operator and how I can add all the elements. I know what's happening here is concatenation and not addition. I am just not able to understand this output. Can someone tell me what is happening here?

Answer 1

let array = [[1,4], [11], [3,5,7]];
console.log(array.reduce((acc, value)=>acc+value, 0));

Here, each acc is an array, so (as stated in the comments) the array will be converted to a string (+) and js will implode it with comma's.

To get the sum of all the nested arrays, you'll need calculate the sum of the deeper array before adding:

Example using the new flat();

let array = [[1,4], [11], [3,5,7]];
let sum = array.flat().reduce((acc,value)=> acc + value)
console.log(sum);

Example using a nested reduce:

let array = [[1,4], [11], [3,5,7]];
console.log(array.reduce((acc, value)=> acc + value.reduce((a, b) => a + b, 0), 0));
// 1+4+11+3+5+7
// 31

---

There are many other options to get the desired results, using the new flat() or an recursive function can be found here;

• Finding the sum of a nested array
• Sum nested array
• How to sum nested arrays in JavaScript

Answer 2

Loop through each sub-array on an outer loop and add each number of each sub-array in an inner loop.

let twoDArray = [
  [1, 4],
  [11],
  [3, 5, 7]
];

const sumOfArrays = array => {
  let sum = 0;
  for (let arr of array) {
    for (let num of arr) {
      sum += num;
    }
  }
  return sum;
}

console.log(sumOfArrays(twoDArray));

Answer 3

To make a long story short, "reduce()" basically performs a loop. Instead of using an actual handwritten loop within your code, the work is done by programming within the JavaScript interpreter itself, in a single efficient operation.

Here is an older StackOverflow post which includes some nice graphics to explain the processes of "map" and "reduce."