JavaScriptArraysIntermediate

Array.reduce()

Reduces an array to a single value using an accumulator function.

Review the syntaxStudy the examplesOpen the coding app
array.reduce(reducerFn, initialValue?)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Reduces an array to a single value using an accumulator function.

The reduce() method executes a user-supplied callbackFn on each element of the array in sequence, passing in the return value from the calculation on the preceding element. The final result is a single value representing the accumulation of all elements. In terms of performance, reduce() has a time complexity of O(n) as it visits every element exactly once. A critical edge case exists when calling reduce() on an empty array: if an initialValue is not provided, a TypeError will be thrown. Conversely, if the array has only one element (with no initialValue) or if the array is empty but an initialValue is provided, that single value will be returned without calling the callbackFn. When an initialValue is supplied, the accumulator starts as that value and the current value starts at index 0. Without an initialValue, the accumulator defaults to the first element and processing starts at index 1.

Quick reference

Syntax

array.reduce(reducerFn, initialValue?)

Inputs

Parameters

reducerFunction · Computes the next accumulator value.
initialValue (optional)any · Starting accumulator value.

See it in practice

Examples

1

Summing an Array of Numbers

const prices = [29.99, 5.00, 10.50];
const total = prices.reduce(function(acc, curr) {
  return acc + curr;
}, 0);
Output:
45.49

A fundamental use case where numbers are added to an initial accumulator of 0.

2

Grouping Objects by Property

const inventory = [
  { name: 'apples', type: 'fruit' },
  { name: 'bananas', type: 'fruit' },
  { name: 'carrots', type: 'vegetable' }
];

const grouped = inventory.reduce(function(acc, item) {
  const key = item.type;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(item);
  return acc;
}, {});
Output:
{"fruit": [{"name": "apples", "type": "fruit"}, {"name": "bananas", "type": "fruit"}], "vegetable": [{"name": "carrots", "type": "vegetable"}]}

Transforms an array into an object where keys are categories and values are arrays of items.

3

Flattening Nested Arrays

const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.reduce(function(acc, curr) {
  return acc.concat(curr);
}, []);
Output:
[1, 2, 3, 4, 5, 6]

Combines multiple sub-arrays into a single flat array by concatenating them into the accumulator.

Debug faster

Common Errors

1

TypeError

Cause: Attempting to reduce an empty array without providing an initialValue.

Fix: Always provide an initialValue (like 0, [], or {}) if there is any possibility the source array could be empty.

const result = [].reduce((acc, val) => acc + val);
2

LogicError

Cause: Forgetting to return the accumulator value from the callback function.

Fix: Ensure the callbackFn always returns the accumulator so the next iteration receives the updated state.

const total = [1, 2, 3].reduce((acc, val) => { acc + val; }, 0); // Returns undefined

Runtime support

Compatibility

Node.js, BrowserAll modern browsers, IE9+ES5 (2009)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Reduces an array to a single value using an accumulator function.

reducer: Computes the next accumulator value. initialValue: Starting accumulator value.

TypeError: Always provide an initialValue (like 0, [], or {}) if there is any possibility the source array could be empty. LogicError: Ensure the callbackFn always returns the accumulator so the next iteration receives the updated state.