tryjs.app

JavaScript map, filter & reduce — Runnable Examples

Learn JavaScript map, filter, and reduce with runnable examples. Transform, filter, and aggregate arrays with the three most common higher-order array methods.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const doubled = numbers.map(n => n * 2);
console.log("Doubled:", doubled);

const evens = numbers.filter(n => n % 2 === 0);
console.log("Evens:", evens);

const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log("Sum:", sum);

// Chained pipeline
const sumOfDoubledEvens = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2)
  .reduce((acc, n) => acc + n, 0);
console.log("Sum of doubled evens:", sumOfDoubledEvens);

Run in Playground All Snippets

Overview

map, filter, and reduce are the three most used higher-order array methods in JavaScript. Together they replace the vast majority of for-loops you would otherwise write: map transforms each element, filter keeps only elements matching a predicate, and reduce folds the array into a single accumulated value. They return new arrays (except reduce) and do not mutate the original, which makes them safe to chain and reason about.

How It Works

map(fn) — transform each element

Calls fn(element, index, array) for every element and returns a new array of the same length containing the return values. Use it when the output length equals the input length.

filter(fn) — keep matching elements

Calls fn(element, index, array) and keeps only elements where the function returns a truthy value. The new array can be shorter than the original (or empty).

reduce(fn, initial) — fold into a single value

Calls fn(accumulator, element, index, array) for every element, threading the accumulator through. The second argument is the initial accumulator — always pass it explicitly to avoid surprises on empty arrays.

Chaining for readable pipelines

Because map and filter return new arrays, you can chain them: items.filter(...).map(...).reduce(...). Each step is independent, which makes the pipeline easy to read top-to-bottom.

Common Mistakes

Forgetting that map always returns an array of the same length — use filter if you want to remove elements.
Omitting the initial value of reduce, which causes bugs on empty arrays and makes the accumulator type ambiguous.
Using forEach when you actually want a new array — forEach returns undefined, map returns the transformed array.
Mutating the accumulator inside reduce instead of returning a new value — works but makes the intent unclear.

When to Use It

Reach for map and filter whenever you're building a new array from an existing one. Use reduce for aggregations (sums, grouping, building an object from an array). For side effects only, use a for-of loop or forEach — not map.

Frequently Asked Questions

What is the difference between map and forEach in JavaScript?

map returns a new array containing the transformed values; forEach always returns undefined and is only for side effects. If you need the result, use map. If you're just logging or triggering external actions, forEach (or for-of) is clearer.

When should I use reduce instead of a for-loop?

Use reduce when you're folding an array into a single value — a sum, a grouped object, a minimum, a flattened array. Use a for-loop when the logic has early exits, side effects, or touches multiple arrays simultaneously.

Are map, filter, and reduce slower than for-loops?

Slightly, yes — they call a function for each element and allocate new arrays. In practice the difference is negligible for anything under a few million items. Prefer readability; reach for a for-loop only after profiling shows a real bottleneck.

Can I chain map, filter, and reduce?

Yes. Because map and filter return new arrays, you can write pipelines like items.filter(isActive).map(toDTO).reduce(sum). Each step allocates one intermediate array — fine for most workloads.

Map, Filter, Reduce

Overview

How It Works

map(fn) — transform each element

filter(fn) — keep matching elements

reduce(fn, initial) — fold into a single value

Chaining for readable pipelines

Common Mistakes

When to Use It

Frequently Asked Questions

What is the difference between map and forEach in JavaScript?

When should I use reduce instead of a for-loop?

Are map, filter, and reduce slower than for-loops?

Can I chain map, filter, and reduce?

More Snippets

Destructuring

Spread & Rest

Closures

Map & Set

Optional Chaining

Nullish Coalescing