FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Arrays & Collections

Advanced

map, filter & reduce

map, filter and reduce are the core transformation methods for arrays. They let you describe what result you want from list data.

const scores = [72, 88, 94];

const highScores = scores.filter((score) => score >= 80);
const labels = highScores.map((score) => `${score}%`);

Arrays & Collections

map transforms, filter selects and reduce combines.

Use map when every item becomes a new item. The result array has the same length as the original array.

Use filter when only some items should remain. The result array can be shorter than the original array.

Use reduce when the array becomes one final value, such as a total, object, grouped structure or summary.

map

Transforms every item into a new item.

filter

Keeps items that pass a condition.

reduce

Combines all items into one result.

Pipeline

Methods can be chained when each step stays readable.

Examples

Array code should reveal whether it reads, mutates, transforms or summarizes.

Method choice matches the result

const activeTitles = records
  .filter((record) => record.active)
  .map((record) => record.title);

Using map for side effects

records.map((record) => {
  list.append(renderRecord(record));
});

// forEach communicates side effects better.

Code patterns

Reusable examples for quick reference.

These are the patterns developers search for constantly: reading items, copying arrays, choosing map/filter/reduce, sorting with a comparator, destructuring and using Set or Map.

map

Transform item shape.

const names = ["html", "css"];
const labels = names.map((name) => name.toUpperCase());

filter

Select matching items.

const scores = [72, 88, 94];
const passed = scores.filter((score) => score >= 80);

reduce total

Combine numbers into one value.

const scores = [72, 88, 94];
const total = scores.reduce((sum, score) => sum + score, 0);

Readable chain

Keep each step short and named when needed.

const labels = records
  .filter((record) => record.active)
  .map((record) => record.title);

Rules that matter

The right collection method makes the intent obvious.

Arrays and collections are not just storage. They describe whether the code is selecting, transforming, grouping, counting, sorting or enforcing uniqueness.

Use map for transformation

Every input item should produce one output item.

Use filter for selection

Return true to keep an item.

Use reduce for one final value

Totals, grouped objects and summaries fit reduce.

Avoid clever reduce

If a loop is clearer, use a loop.

Name complex callbacks

Extract predicates and mappers when chains grow.

Do not use map for side effects

Use forEach or a loop when you do not need the returned array.

Production thinking

Collection choices decide how readable data flow becomes.

Why does this matter?

These methods let data transformation read like intent instead of manual index management.

Accessibility

Filtering and mapping rendered lists should preserve meaningful text, order and states for users.

Production note

Production transformations should stay readable and avoid chains that hide too many rules at once.

SEO note

Content pipelines should keep rendered lists complete and deterministic.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Change the filter threshold.
  • Map records into HTML list items.
  • Use reduce to calculate an average.

Practice assignment

Do this before moving to the next topic.

  1. Use map to transform strings.
  2. Use filter to keep numbers above a threshold.
  3. Use reduce to calculate a total.

Try it yourself

Filter, map and reduce records

Live preview

Self-check

Before you continue, prove that you understand map, filter & reduce.

Advanced

A collection method should tell the reader what kind of operation is happening before they read the callback body.

  1. Can you explain map?
  2. Can you explain filter?
  3. Can you explain reduce?
  4. Can you explain why map should return values?
  5. Can you explain when a loop is clearer than reduce?