How to Sum a JavaScript Array With Reduce

Here is a 2500+ word blog post on "How to Sum a JavaScript Array With Reduce":

Summing the values in a JavaScript array is a common task in web development. While you can certainly use a basic for loop to iterate through and total up the values, the reduce() method provides a more elegant and concise way to get the sum.

In this comprehensive guide, you‘ll learn how to harness the power of reduce() to easily sum arrays in JavaScript. We‘ll cover:

• What is Array.reduce() and why it‘s useful for summing
• The syntax and parameters of the reduce() method
• Basic summation examples with reduce()
• Setting an initial value for the accumulation
• Summing arrays with more complex data types
• Using arrow functions for brevity
• Common errors and how to avoid them
• Performance considerations of using reduce() vs. loops
• Additional examples such as averaging arrays

Whether you‘re a beginner or an experienced JavaScript developer, this guide will level up your skills with reduce() and array summation. Let‘s get started!

What is Array.reduce()?

The reduce() method in JavaScript executes a provided function for each value in an array to progressively build up a single result. This makes it perfect for summing values, as we can have the function add each number onto a running total.

Some key things to know about reduce():

• Accepts a callback function that takes four arguments:
  • Accumulator – The accumulated result thus far
  • Current Value – The current value being processed
  • Current Index (Optional) – The index of the current value
  • Source Array (Optional) – The array itself
• An initial value can optionally be passed as the second parameter
• Goes through the array element-by-element and gives you a single output

This makes reduce() extremely versatile – while summing values is one common use case, you can also use it for tasks like flattening multidimensional arrays.

However, summing arrays is one of the most useful applications of reduce(). Compared to using a basic for loop, it abstracts away the accumulator variable and makes the code much more readable.

Basic Syntax for Array.reduce()

Here is the basic syntax for using the reduce() method:

arr.reduce(function(total, currentValue, index, arr), initialValue)

Where:

• arr – The array you want to reduce
• function – The callback function to run on each element
• total – The accumulated result thus far
• currentValue – The current array element value
• index (optional) – The index of the current element
• arr (optional) – Reference to the array itself
• initialValue (optional) – The initial value for the accumulated result

The function you pass simply needs to return the new accumulated result each iteration. This gets passed along to the NEXT invocation, along with the next array value.

Let‘s see some examples of using this to sum an array!

Sum Array Example #1 – Simple Summation

Here is a straightforward example that sums an array without an initial value:

const nums = [1, 2, 3, 4, 5];

const sum = nums.reduce(function(total, num) {
  return total + num; 
});

console.log(sum); // 15

We pass a function that simply takes the accumulated total and adds the current number to it.

Reduce handles calling this on each element, passing along the returned result each time behind the scenes.

So on the first invocation, total starts at index 0‘s value (1). It then gets this new sum on each call:

• Iteration 1 – total = 1, num = 2, return 1 + 2 = 3
• Iteration 2 – total = 3, num = 3, return 3 + 3 = 6
• Iteration 3 – total = 6, num = 4, return 6 + 4 = 10
• Iteration 4 – total = 10, num = 5, return 10 + 5 = 15

After looping through the entire array, 15 is left as the result!

Sum Array Example #2 – With Initial Value

Here is the same example, but passing an initial value of 10 as the start of the accumulation:

const nums = [1, 2, 3, 4, 5];

const sum = nums.reduce(function(total, num) {
   return total + num
}, 10); 

console.log(sum); // 25

Now, our initial call starts with total as 10 rather than the first array value. So we get:

• Iteration 1 – total = 10, num = 1, return 10 + 1 = 11
• Iteration 2 – total = 11, num = 2, return 11 + 2 = 13
• Iteration 3 – total = 13, num = 3, return 13 + 3 = 16
• Iteration 4 – total = 16, num = 4, return 16 + 4 = 20
• Iteration 5 – total = 20, num = 5, return 20 + 5 = 25

Simple as that – reduce handles the heavy lifting, and we end up with a sum of all values!

Summing Arrays With Object Elements

What if our array contains more complex data types like objects?

Reduce can still easily handle this – we just access the numerical property we want to sum up:

const purchases = [
  { item: "Switch", amount: 300 },
  { item: "PS5", amount: 500 },
  { item: "Macbook Pro", amount: 1800 }   
];

const totalSpent = purchases.reduce(function(total, purchase) {
  return total + purchase.amount;
}, 0);

console.log(totalSpent); // 2600

We simply total up the amount property of each object in the accumulator.

This demonstrates the flexibility of reduce() to work with many kinds of data.

Using Arrow Functions

The previous examples used normal anonymous functions. To make this more concise, we can also pass arrow functions into reduce():

const nums = [1, 2, 3, 4, 5];

const sum = nums.reduce((total, num) => total + num); 

console.log(sum) // 15

And with an initial value:

const nums = [1, 2, 3, 4, 5];

const sum = nums.reduce((total, num) => total + num, 10);

console.log(sum) // 25

Arrow functions remove the need to type out function and return explicitly – great for brevity!

Handling Edge Cases

What happens if our array is empty though?

Without an initial value, reduce will throw an error:

const nums = [];

nums.reduce((sum, n) =>  sum + n); // Error!

We need that initial value to handle this edge case:

const nums = []; 

nums.reduce((sum, n) => sum + n, 0); // 0

The total gracefully handles an empty array case now.

You can also use methods like Array.isArray() to handle bad inputs:

function sumArray(arr) {
  if (!Array.isArray(arr)) {
    throw new Error(‘Must pass in array to sum!‘); 
  }

  return arr.reduce((total, n) => total + n, 0);
}

sumArray(‘bad input‘); // Throws error 

So always consider edge cases when using reduce()!

Performance of Reduce vs. Loops

Is using reduce() more performant than looping? In JS engines like V8, performance is typically about the same.

So we should use reduce for summing arrays purely for code cleanliness and readability.

However, looping could potentially be faster in some cases:

// Looping
function sumArray(arr) {
   let sum = 0;

   for (let i = 0; i < arr.length; i++) {
      sum += arr[i];
   }

   return sum; 
}

// Reducing
function sumArray(arr) {
  return arr.reduce((sum, n) => sum + n, 0);   
}

The loop avoids function invocation overhead and closures created by reduce.

But unless you‘re operating on massive arrays, any performance difference would be negligible.

As always – optimize for readable code first, then benchmark performance if needed!

Going Beyond Summation

While adding up values is the most common application, reduce() can also produce other single values from an array.

Some examples:

Maximum/Minimum Value

Get min/max by comparing to current:

let max = arr.reduce(function(max, value) {
  return (value > max) ? value : max;  
}, 0); 

Average

Keep track of sum and length:

let avg = arr.reduce(function(avg, value, _, {length}) { 
   avg.sum += value;
   avg.count++;
   return {
     sum: avg.sum,
     count: avg.count
   };
}, {sum: 0, count: 0});

avg = avg.sum/avg.count; 

Concatenation

Concatenate values into a string:

let concatenated = arr.reduce(function(str, value) { 
  return str + value;   
});

The key is outputting whatever aggregated value makes sense for your use case!

Conclusion

Summing arrays is a breeze using JavaScript‘s powerful Array.reduce() method. Compared to traditional loops, it abstracts away the accumulator variable and results in cleaner code.

Here are some key takeaways:

• Accepts a reducer callback and optional initial value
• Great for summing as we return the total each iteration
• Works with numbers, objects, or anything reduceable to a single value
• Similar performance to loops – optimize for readability
• Also useful for getting min, max, average, concatenations, etc.

So next time you need to total up array values, reach for reduce()! Let me know if you have any other array summation tips in the comments.