reduce in JavaScript: Examples and Use Cases

reduce in JavaScript: Examples and Use Cases

reduce is the most powerful array method. It can produce any value: a number, string, array, or object. Here are practical examples.

Sum

[1, 2, 3, 4].reduce((acc, n) => acc + n, 0); // 10
``
### Product

```js
[1, 2, 3, 4].reduce((acc, n) => acc * n, 1); // 24
``
### Max

```js
[3, 1, 4, 1, 5].reduce((max, n) => (n > max ? n : max), -Infinity); // 5
``
### Flatten

```js
[[1, 2], [3, 4], [5]].reduce((acc, sub) => acc.concat(sub), []);
// [1, 2, 3, 4, 5]
``
Or use `flat()`: `[[1, 2], [3, 4], [5]].flat()`.

### Group By

```js
const people = [
  { name: "A", city: "NYC" },
  { name: "B", city: "LA" },
  { name: "C", city: "NYC" },
];
const byCity = people.reduce((acc, p) => {
  (acc[p.city] ||= []).push(p);
  return acc;
}, {});
// { NYC: [{ name: "A", ... }, { name: "C", ... }], LA: [{ name: "B", ... }] }
``
### Count Occurrences

```js
const arr = ["a", "b", "a", "c", "b", "a"];
const count = arr.reduce((acc, char) => {
  acc[char] = (acc[char] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }
``
### Build an Object from an Array

```js
const users = [{ id: 1, name: "A" }, { id: 2, name: "B" }];
const byId = users.reduce((acc, u) => {
  acc[u.id] = u;
  return acc;
}, {});
// { 1: { id: 1, name: "A" }, 2: { id: 2, name: "B" } }
``
### Pipe (Function Composition)

```js
const pipe = (fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);
const pipeline = pipe([(x) => x + 1, (x) => x * 2, (x) => x - 3]);
pipeline(5); // (5 + 1) * 2 - 3 = 9
``
### Common Mistakes

1. **Forgetting the initial value**: without it, the first element is the accumulator. Empty arrays throw TypeError.
2. **Not returning the accumulator**: always `return acc` from the callback.
3. **Mutating the accumulator incorrectly**: use spread or `Object.assign` for immutability, or mutate the accumulator if you intend to.

### The Takeaway

`reduce` can produce any value: sum, product, max, flatten, group by, count occurrences, build an object, or pipe functions. Always pass an initial value and return the accumulator. `reduce` is the most versatile array method.