JavaScript reduce sum array with undefined values

If you're working with arrays in JavaScript, you may encounter situations where your array contains undefined values. This can happen when you're processing data from various sources or working with incomplete datasets. One common problem developers face is summing the values of an array with undefined elements. JavaScript's reduce() method is a versatile tool that can help you solve this problem efficiently.

What is the reduce() Method in JavaScript?

The reduce() method in JavaScript is a powerful tool that allows you to iterate over an array and accumulate a single result. It takes a callback function as its first argument, which receives four parameters:

• Accumulator: The accumulated value returned by the previous iteration (or the initial value if provided).
• Current Value: The current element being processed in the array.
• Current Index: The index of the current element.
• Array: The original array on which reduce() is called.

The result of each iteration is passed along as the accumulator for the next iteration, and at the end of the loop, the final result is returned.

Method 1: Using reduce() with undefined Check

To sum the values of an array while safely handling undefined values, we can modify the reduce() method by checking whether the current value is a valid number before adding it to the accumulator.

const arr = [23, 566, null, 90, -32, undefined, 32, -69, 88, null];

const quickSum = (arr) => {
   const sum = arr.reduce((acc, val) => {
      return acc + (val || 0);
   }, 0);
   return sum;
};

console.log(quickSum(arr));

698

Time Complexity: O(n)
Space Complexity: O(1)

Method 2: Filtering undefined Values First

Alternatively, you can filter out undefined values from the array before performing the sum. This approach uses the filter() method to remove undefined values, then applies reduce() to sum the remaining numbers.

const arr = [5, undefined, 7, undefined, 3, undefined];

// Filter out undefined values first
const validNumbers = arr.filter(x => typeof x === 'number' && !isNaN(x));
const sum = validNumbers.reduce((acc, curr) => acc + curr, 0);

console.log("Filtered array:", validNumbers);
console.log("Sum:", sum);

Filtered array: [5, 7, 3]
Sum: 15

Time Complexity: O(n)
Space Complexity: O(n)

Method 3: Explicit Type Checking in reduce()

For more precise control, you can explicitly check the type of each value within the reduce callback using the typeof operator:

const arr = [10, undefined, 25, null, 15, "invalid", 30];

const sum = arr.reduce((acc, curr) => {
    if (typeof curr === 'number' && !isNaN(curr)) {
        return acc + curr;
    }
    return acc;
}, 0);

console.log("Sum with type checking:", sum);

Sum with type checking: 80

Comparison of Methods

Conclusion

JavaScript's reduce() method provides flexible ways to sum arrays containing undefined values. Choose the method that best fits your needs: use the || operator for simplicity, filter first for clarity, or add explicit type checking for precision.