Reduce of empty array with no initial value
JavaScript Programming Language
Severity: ModerateWhat Does This Error Mean?
This error happens when you call .reduce() on an empty array without providing a starting value. .reduce() works by combining all items in an array into one result. But if the array is empty and you did not give it a starting value, reduce has nothing to start with and crashes. The fix is to always provide an initial value as the second argument to .reduce().
Affected Models
- All browsers
- Node.js
- All JavaScript environments
Common Causes
- Calling .reduce() on an array that turns out to be empty at runtime
- Not providing the second argument (initial value) to .reduce()
- Filtering an array before reducing it — the filter might produce an empty array
- Data from an API call is empty but you assumed it would have at least one item
- Chaining .filter().reduce() without accounting for the case where filter removes all items
How to Fix It
-
Always provide an initial value as the second argument to .reduce(). For summing numbers, use 0. For building an array, use []. For building an object, use {}.
Example: [1, 2, 3].reduce((sum, n) => sum + n, 0) — the 0 at the end is the initial value. Now it works even on an empty array.
-
Check whether the array could be empty before calling .reduce(). Add a guard: if (myArray.length === 0) return defaultValue;
This is good practice regardless of reduce — always think about what happens when an array has zero items.
-
If you are chaining .filter().reduce(), add an initial value to the reduce: myArray.filter(x => x > 0).reduce((sum, n) => sum + n, 0)
Without the initial value, if filter removes all items, reduce crashes. With 0 as initial value, reduce simply returns 0.
-
If the array comes from an API or external source, use a fallback: (data || []).reduce(callback, initialValue)
The (data || []) part ensures that if data is null or undefined, you use an empty array instead — combined with an initial value, reduce never crashes.
-
Consider whether .reduce() is the right tool. For simple sums, you can use a loop. For finding max/min, use Math.max(...myArray) or Math.min(...myArray) — these return -Infinity or Infinity for empty arrays, which you can then check.
Sometimes a for loop with clear logic is easier to read and debug than a reduce chain.
When to Call a Professional
This is a common JavaScript error when working with arrays and data transformations. It is always fixable — the simplest fix is to always provide an initial value to .reduce().
Frequently Asked Questions
What does .reduce() actually do?
.reduce() takes an array and combines all the items into a single value. For example, [1, 2, 3, 4].reduce((total, num) => total + num, 0) adds all the numbers together and returns 10. The callback receives the running total and the current item on each step. The second argument (0 in this example) is where the running total starts.
What should I use as the initial value for different operations?
For summing numbers: 0. For multiplying numbers: 1. For building a string: '' (empty string). For building an array: []. For building an object: {}. Choose the 'empty' version of whatever type your result should be.
Why does reduce work without an initial value on non-empty arrays?
When you do not provide an initial value, reduce uses the first element as the starting point and begins the loop from the second element. This works fine when the array has at least one item. But when the array is empty, there is no first element to use as the starting point — so reduce crashes. Always providing an initial value avoids this edge case entirely.