Chaining map, filter, and reduce in JavaScript

Chaining map, filter, and reduce in JavaScript

Chaining map, filter, and reduce is a powerful way to build data transformation pipelines. Here is how.

Why Chaining Works

map and filter return new arrays. reduce returns a single value. You can chain map and filter because each returns an array. reduce is usually last (it returns a single value).

Example: Total Price of Active Products

const products = [
  { name: "A", price: 10, active: true },
  { name: "B", price: 20, active: false },
  { name: "C", price: 30, active: true },
];
const total = products
  .filter((p) => p.active)            // [A, C]
  .map((p) => p.price)                // [10, 30]
  .reduce((acc, price) => acc + price, 0); // 40
``
### Example: Average Age of Adults

```js
const people = [
  { name: "A", age: 15 },
  { name: "B", age: 25 },
  { name: "C", age: 30 },
  { name: "D", age: 17 },
];
const adults = people.filter((p) => p.age >= 18);
const avgAge = adults
  .map((p) => p.age)
  .reduce((sum, age, _, arr) => sum + age / arr.length, 0);
// (25 + 30) / 2 = 27.5
``
### Example: Unique Tags

```js
const posts = [
  { tags: ["js", "react"] },
  { tags: ["js", "css"] },
  { tags: ["react", "node"] },
];
const uniqueTags = posts
  .map((p) => p.tags)           // [["js", "react"], ["js", "css"], ["react", "node"]]
  .flat()                       // ["js", "react", "js", "css", "react", "node"]
  .filter((tag, i, arr) => arr.indexOf(tag) === i);
// ["js", "react", "css", "node"]
``
Or with `Set`:

```js
const uniqueTags = [...new Set(posts.map((p) => p.tags).flat())];
``
### Performance Note

Each chain step creates a new array (multiple passes). For large arrays, a single `reduce` or loop may be faster:

```js
const total = products.reduce((acc, p) => {
  if (p.active) return acc + p.price;
  return acc;
}, 0);
``
But chaining is more readable. Optimize only if profiling shows a problem.

### The Takeaway

Chaining `map`/`filter`/`reduce` builds readable data transformation pipelines. `map`/`filter` return arrays (chainable). `reduce` returns a single value (usually last). For large arrays, a single `reduce` may be faster. Chain for readability, optimize for performance when needed.