JavaScript Array.reduce() — What is the Output?

Why This Question Matters

If you've spent any time in JavaScript, you've seen .reduce(). It's one of those methods that looks intimidating at first glance. Most developers are comfortable with .map() or .filter() because they do exactly what they say: they transform a list or trim it down.

reduce, however, feels like a black box. It’s often the "final boss" of array methods for beginners. The confusion usually stems from the accumulator—that first argument in the callback. If you don't quite grasp how the state is carried from one iteration to the next, you'll find yourself staring at a piece of code wondering why the output is a weird string or NaN.

Understanding this snippet isn't just about summing numbers; it's about understanding how to boil down a collection of data into a single value, which is a core pattern in functional programming.

Understanding the Code

Let's look at the snippet:

const nums = [1, 2, 3, 4, 5]
const result = nums.reduce((acc, curr) => acc + curr, 0)
console.log(result)

Here is what's actually happening under the hood.

The reduce method takes two arguments: a callback function and an initial value. In this case, the initial value is 0. This is the most critical part of the code. That 0 becomes the starting value of our accumulator (acc).

The callback function runs for every single element in the array. It takes the current state of the accumulator and the current element (curr) from the array, adds them together, and then passes that result to the next iteration.

Here is the play-by-play:

1. Iteration 1: acc is 0 (initial value), curr is 1. Result: 0 + 1 = 1.
2. Iteration 2: acc is now 1, curr is 2. Result: 1 + 2 = 3.
3. Iteration 3: acc is now 3, curr is 3. Result: 3 + 3 = 6.
4. Iteration 4: acc is now 6, curr is 4. Result: 6 + 4 = 10.
5. Iteration 5: acc is now 10, curr is 5. Result: 10 + 5 = 15.

Once the array is exhausted, reduce returns the final value: 15.

Finding the Correct Answer

The correct answer is Option B (15).

Why not other options? If you see options like [15] (an array) or undefined, those are usually distractors based on common mistakes.

If the developer had forgotten the initial value 0, JavaScript would have used the first element of the array as the accumulator and started the loop from the second element. In this specific case, the result would still be 15, but that's a dangerous gamble. If the array were empty and you didn't provide an initial value, JavaScript would throw a TypeError. Providing that 0 makes the code robust.

Common Mistakes Developers Make

The most frequent mistake I see is forgetting the initial value. As mentioned, it works for simple sums of numbers, but imagine you're reducing an array of objects to find a total price.

const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((acc, curr) => acc + curr.price); 
// Result: "[object Object]20" -> Yikes.

In the example above, because there's no initial value, acc starts as the first object { price: 10 }. JavaScript then tries to add that object to the number 20, resulting in a messy string concatenation. Always provide an initial value unless you have a very specific reason not to.

Another common trip-up is forgetting to return the value inside the callback. If you use curly braces {} for your function body instead of an implicit return, and you forget to write return acc + curr, your accumulator will become undefined after the first single loop.

Real-World Usage

In a production environment, we rarely use reduce just to sum numbers (a simple forEach or for...of loop is often more readable for that). Where reduce actually shines is in data transformation.

Imagine you have an array of API responses and you need to group them by a specific ID:

const users = [
  { id: 1, role: 'admin' },
  { id: 2, role: 'user' },
  { id: 3, role: 'admin' },
];
const grouped = users.reduce((acc, user) => {

  const role = user.role;

  if (!acc[role]) acc[role] = [];

  acc[role].push(user);

  return acc;

}, {});
// Result: { admin: [{...}, {...}], user: [{...}] }

This is where reduce becomes a superpower. It allows you to turn an array into an object, a map, or even a different array, all in one clean pass.

Key Takeaways

- The Accumulator is Key: Think of acc as a snowball rolling down a hill, gathering data as it goes.
- Initial Values Matter: Always set your initial value (0 for numbers, [] for arrays, {} for objects) to avoid runtime errors and weird type-casting.
- Return the State: If you aren't using a one-liner arrow function, make sure you actually return the accumulator.
- Use it for Transformation: Use reduce when you need to change the shape of your data, not just for basic math.