Chaining: Data Pipelines

Chain map, filter, and reduce together to turn raw data into exactly what your UI needs — the data-shaping every React component does before it renders.

Step 1 of 2

Each method hands off to the next

Because filter and map each return a new array, you can call the next method right on the result. Strung together, they form a readable pipeline that flows top to bottom:

const names = products
  .filter((p) => p.inStock)   // 1. keep in-stock items
  .map((p) => p.name);        // 2. pull out each name

This is precisely what a React component does before rendering: take the raw array from an API, filter to what should show, map it into list items, maybe reduce for a total. Learning to read and write these pipelines is most of the "data work" in a real app.

Think of it this way: A pipeline is an assembly line with stations. The array of parts moves down the line: one station removes defects (filter), the next paints each part (map), a final station boxes them up and counts the total (reduce). Each station passes its output to the next.

Tip — order matters for speed and meaning

Usually filter first (shrink the list), then map (transform what's left). Filtering first means map does less work, and the steps read in the order you'd describe them out loud.

Learn more on MDN

MDN — Array methods

JAVASCRIPTREAD ONLY

CONSOLE

Click "Run" to execute your code...