#54 Coding- Sum of all the elements of [1,[2,[3,[4,5]],6],7] in javascript

Find the sum of all elements within a deeply nested array: [1,[2,[3,[4,5]],6],7].

The Challenge: What Makes This Tricky?

At first glance, summing array elements seems straightforward with methods like reduce(). For a simple array like [1, 2, 3], [1,2,3].reduce((acc, curr) => acc + curr, 0) would quickly give you 6.

However, our array, [1,[2,[3,[4,5]],6],7], isn't flat. It contains other arrays nested within it, sometimes multiple levels deep! If you try to sum it directly, JavaScript will treat the nested arrays as values, and adding an array to a number results in unexpected behavior (like concatenation or NaN).

const nestedArray = [1, [2, [3, [4, 5]], 6], 7];

// This won't work as expected!
const badSum = nestedArray.reduce((acc, curr) => acc + curr, 0);
console.log(badSum); // Output: "12,3,4,567" (string concatenation) or NaN depending on types

The Solution: Embracing Recursion

The most elegant and robust way to handle deeply nested structures in programming is through recursion. This involves writing a function that calls itself to process the inner levels of the data structure.

Our strategy will be:

• Create a function that takes an array as input.
• Inside this function, iterate through each element of the array.
• For each element, check if it's an array itself.
  • If it's an array, recursively call our function on this sub-array and add its returned sum to our running total.
  • If it's a number, simply add it to our running total.
• Return the final total.

JavaScript Implementation (Using reduce() for Elegance)

We can combine the power of recursion with the conciseness of the reduce() method for a clean solution:

function sumNestedArray(arr) {
  return arr.reduce((sum, currentElement) => {
    // Check if the current element is an array
    if (Array.isArray(currentElement)) {
      // If it's an array, recursively call sumNestedArray on it
      // and add the result to our running sum
      return sum + sumNestedArray(currentElement);
    } else {
      // If it's a number, just add it to the sum
      return sum + currentElement;
    }
  }, 0); // Initialize the sum to 0
}

const myNestedArray = [1, [2, [3, [4, 5]], 6], 7];
const totalSum = sumNestedArray(myNestedArray);

console.log(`The sum of all elements is: ${totalSum}`);
// Expected Output: The sum of all elements is: 28

Step-by-Step Explanation of the Code

• function sumNestedArray(arr) { ... }: This defines our recursive function that takes one argument, arr, which is the array (or sub-array) we want to sum.
• return arr.reduce((sum, currentElement) => { ... }, 0);:
  • We use reduce() to iterate over each currentElement in the arr.
  • sum is our accumulator, which will hold the running total. It's initialized to 0 (the second argument of reduce).
• if (Array.isArray(currentElement)) { ... }:
  • This is the heart of the recursion. Array.isArray() checks if currentElement is an array.
  • If it is, we call sumNestedArray(currentElement). This sends the sub-array back into our function to be processed. The sum returned from this recursive call is then added to our main sum.
• else { return sum + currentElement; }:
  • If currentElement is not an array (meaning it's a number in this context), we simply add it to our sum.

This process continues until all nested arrays are "unpacked" and their numerical elements are added to the final total.

Testing It Out

Let's trace the sum for [1, [2, [3, [4, 5]], 6], 7]:

• 1 (number) -> sum = 1
• [2,[3,[4,5]],6] (array) -> call sumNestedArray on this:
  • 2 (number) -> sum = 2
  • [3,[4,5]] (array) -> call sumNestedArray on this:
    • 3 (number) -> sum = 3
    • [4,5] (array) -> call sumNestedArray on this:
      • 4 (number) -> sum = 4
      • 5 (number) -> sum = 9
    • (returns 9) -> sum = 3 + 9 = 12
  • (returns 12) -> sum = 2 + 12 = 14
  • 6 (number) -> sum = 14 + 6 = 20
• (returns 20) -> sum = 1 + 20 = 21
• 7 (number) -> sum = 21 + 7 = 28

The final sum is indeed 28.

Alternative: Flattening the Array First (ES2019+)

For modern JavaScript environments, you could also flatten the array completely using Array.prototype.flat() and then sum the resulting flat array.

const myNestedArray = [1, [2, [3, [4, 5]], 6], 7];

// Flatten the array infinitely deep
const flatArray = myNestedArray.flat(Infinity);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6, 7]

// Now, sum the flat array
const totalSumFlat = flatArray.reduce((acc, curr) => acc + curr, 0);
console.log(`The sum using flat() is: ${totalSumFlat}`);
// Expected Output: The sum using flat() is: 28

While concise, this approach might not be suitable if you're restricted to older JavaScript versions, or if the purpose of the exercise is specifically to demonstrate recursive thinking without relying on built-in flattening.

Conclusion

Solving the sum of a deeply nested array is a fantastic exercise in understanding recursion. It highlights how a function can elegantly solve complex problems by breaking them down into smaller, self-similar sub-problems. Whether you choose a recursive reduce() approach or leverage flat(Infinity), the key is to correctly handle the different data types you encounter within the nested structure.

Happy coding!