REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Array.reduce()

AI & DATA SCIENCE // reduce

reduce() applies a function against an accumulator and each element to reduce the array to a single value.

Syntax

array.reduce((accumulator, current) => {
  return updatedAccumulator;
}, initialValue);

Deep Dive Course

**reduce()** is the most powerful (and complex) array method. It processes each element and **accumulates** a result. The accumulator starts as the **initialValue** (always provide it). Use it for sums, grouping, transforming to objects, and more. map() and filter() can be implemented with reduce().

1Understanding Array.reduce()

reduce() is the most powerful (and complex) array method. It processes each element and accumulates a result. The accumulator starts as the initialValue (always provide it). Use it for sums, grouping, transforming to objects, and more. map() and filter() can be implemented with reduce().

💡

Always provide an initialValue as the second argument. Without it, reduce() uses the first element as the accumulator — which can cause bugs with empty arrays.

editor.html

// Sum
const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Group by category
const items = [
  { name: 'apple',  type: 'fruit' },
  { name: 'banana', type: 'fruit' },
  { name: 'carrot', type: 'veggie' },
];
const grouped = items.reduce((acc, item) => {
  (acc[item.type] ||= []).push(item.name);
  return acc;
}, {});
console.log(grouped);

localhost:3000

2Practical Example

Here is a real-world application of Array.reduce() showing how it is used in production JavaScript code.

editor.html

// Implement map() using reduce()
const doubled = [1,2,3].reduce((acc, n) => {
  acc.push(n * 2);
  return acc;
}, []);
console.log(doubled); // [2, 4, 6]

localhost:3000

3Best Practices

Follow these guidelines when working with Array.reduce():

1. Always provide an initialValue

2. Use reduce for complex aggregation (groupBy, pivot)

3. Prefer map/filter for simple cases — they're more readable

⚠️

Tip: Always provide an initialValue as the second argument. Without it, reduce() uses the first element as the accumulator — which can cause bugs with empty arrays.

editor.html

// Sum
const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Group by category
const items = [
  { name: 'apple',  type: 'fruit' },
  { name: 'banana', type: 'fruit' },
  { name: 'carrot', type: 'veggie' },
];
const grouped = items.reduce((acc, item) => {
  (acc[item.type] ||= []).push(item.name);
  return acc;
}, {});
console.log(grouped);

localhost:3000

Examples

Example 01Basic Usage

// Sum
const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Group by category
const items = [
  { name: 'apple',  type: 'fruit' },
  { name: 'banana', type: 'fruit' },
  { name: 'carrot', type: 'veggie' },
];
const grouped = items.reduce((acc, item) => {
  (acc[item.type] ||= []).push(item.name);
  return acc;
}, {});
console.log(grouped);

Example 02Advanced Example

// Implement map() using reduce()
const doubled = [1,2,3].reduce((acc, n) => {
  acc.push(n * 2);
  return acc;
}, []);
console.log(doubled); // [2, 4, 6]

Best Practices

Always provide an initialValue
Use reduce for complex aggregation (groupBy, pivot)
Prefer map/filter for simple cases — they're more readable

Interview Question

What happens if reduce() is called on an empty array without an initialValue?▼

Hint: It throws a TypeError.

Calling reduce() on an empty array without an initialValue throws TypeError: Reduce of empty array with no initial value. Always provide an initialValue (the second argument) to make reduce() safe for empty arrays.

Exercises

MediumPractice using Array.reduce() in a real scenario.

View Solution

// Sum
const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Group by category
const items = [
  { name: 'apple',  type: 'fruit' },
  { name: 'banana', type: 'fruit' },
  { name: 'carrot', type: 'veggie' },
];
const grouped = items.reduce((acc, item) => {
  (acc[item.type] ||= []).push(item.name);
  return acc;
}, {});
console.log(grouped);

Frequently Asked Questions

What happens if reduce() is called on an empty array without an initialValue?▼

Related Functions

mapfilterforEachArray-Methods