JS CodeLab

The JavaScript Array reduce() Method: Complete Guide

By JS CodeLab Engineering Team•Last updated: October 12, 2026•5 min read

Direct Answer & Key Concept

The Array.prototype.reduce() method executes a user-supplied reducer callback function on each element of the array in order, passing in the return value from the calculation on the preceding element, culminating in a single output value.

Runnable Code SnippetRun in Playground
// Grouping and Summing with reduce()
const transactions = [
  { type: "deposit", amount: 100 },
  { type: "withdrawal", amount: 40 },
  { type: "deposit", amount: 250 }
];

const balanceSummary = transactions.reduce(
  (acc, txn) => {
    if (txn.type === "deposit") acc.totalDeposits += txn.amount;
    else acc.totalWithdrawals += txn.amount;
    acc.netBalance = acc.totalDeposits - acc.totalWithdrawals;
    return acc;
  },
  { totalDeposits: 0, totalWithdrawals: 0, netBalance: 0 }
);

console.log(balanceSummary);
// { totalDeposits: 350, totalWithdrawals: 40, netBalance: 310 }

What is Array.prototype.reduce()?

The reduce() method is one of JavaScript's most powerful functional array utilities. It iterates across an array and executes an accumulator callback on each element, compressing the entire array into a single accumulated value—such as a number, string, array, or dictionary object.

Syntax and Anatomy of reduce()

Try in CodeLab
array.reduce((accumulator, currentValue, currentIndex, array) => {
  return updatedAccumulator;
}, initialValue);
  1. accumulator: The accumulated value returned from the previous iteration callback (or initialValue on the first pass).
  2. currentValue: The current array element being processed.
  3. initialValue: Crucial parameter. The starting value of the accumulator. If omitted, reduce() defaults to using the first element of the array, which can cause runtime crashes on empty arrays.

3 Practical Real-World reduce() Patterns

1. Summing Array Totals

Try in CodeLab
const expenses = [45, 12, 89, 24];
const totalCost = expenses.reduce((acc, curr) => acc + curr, 0);
console.log(totalCost); // 170

2. Grouping Objects by Property (Categorization)

Try in CodeLab
const inventory = [
  { name: "Apple", category: "Fruit" },
  { name: "Carrot", category: "Vegetable" },
  { name: "Banana", category: "Fruit" }
];

const grouped = inventory.reduce((acc, item) => {
  acc[item.category] = acc[item.category] || [];
  acc[item.category].push(item.name);
  return acc;
}, {});

console.log(grouped);
// { Fruit: ["Apple", "Banana"], Vegetable: ["Carrot"] }

3. Counting Frequency of Items

Try in CodeLab
const votes = ["yes", "no", "yes", "yes", "no"];
const tally = votes.reduce((acc, vote) => {
  acc[vote] = (acc[vote] || 0) + 1;
  return acc;
}, {});

console.log(tally); // { yes: 3, no: 2 }

Common Mistakes with reduce()

  1. Omitting the initialValue on empty arrays: Calling [].reduce((a, b) => a + b) throws a fatal TypeError: Reduce of empty array with no initial value. Always provide an initial value.
  2. Forgetting to return the accumulator: If you omit return acc inside your callback, the accumulator becomes undefined on the next iteration pass.

Frequently Asked Questions About The JavaScript Array reduce() Method: Complete

Why should you always supply an initialValue to reduce()?

Supplying an initial value prevents fatal TypeError crashes when reducing empty arrays, and ensures that the accumulator starts with the expected data type (such as an empty object {} or number 0).

What happens if you forget to return the accumulator in reduce()?

If your reducer callback does not return a value, the accumulator becomes undefined on the subsequent iteration, typically resulting in a runtime TypeError.

Can reduce() replace map() and filter()?

Yes. Any transformation achievable with map() and filter() can technically be performed in a single pass using reduce(). However, using map and filter directly is often more readable unless optimizing high-volume array operations.

Related Runnable JavaScript Examples

JavaScript Array reduce() Method Code Example

The JavaScript Array reduce() method executes a reducer callback function on each array element, passing the accumulated result from preceding calculations forward. It aggregates arrays into numbers, objects, lookups, or transformed collections.

JavaScript Array map() Method Code Example

The JavaScript Array map() method creates a new array populated with the results of calling a provided callback function on every element in the calling array. It performs immutable data transformation without modifying the original array.

JavaScript Array filter() Method Code Example

The JavaScript Array filter() method creates a shallow copy of an array containing only the elements that pass the test implemented by the provided predicate callback function. Elements that evaluate to truthy are retained, while others are omitted.

Ready to test what you learned?

The best way to solidify your JavaScript skills is by writing and running code. Open our free online compiler and test your scripts with real-time console feedback.

Open JavaScript Compiler