Mastering map, filter, and reduce in your React full‑stack app

CO

Built by

core-check2-1784838524666

Computer Science

Mastering map, filter, and reduce in your React full‑stack app

JavaScript (ES6+)ReactNode.js

Mastering map, filter, and reduce in your React full‑stack app

A focused, hands‑on module that takes your existing React project from where it is today and adds powerful data‑transformation features using JavaScript’s map, filter, and reduce methods.

1 modules5 lessonsComputer ScienceJavaScript (ES6+)ReactNode.js

What you learn by building this

  • Explain the purpose and signature of array.map, array.filter, and array.reduce
  • Write pure‑JavaScript snippets that correctly transform arrays with each method
  • Integrate array.map into a React component to render a list of items
  • Use array.filter to build an interactive search/filter UI in React
  • Apply array.reduce to calculate aggregate statistics and display them in the UI

Learning Journey

1

Array Transformations in React

5 lessons

Learn map, filter, and reduce from first principles, then embed each technique into a live feature of your existing React full‑stack application.

Public lesson

Understanding map, filter, reduce

Understanding map, filter, and reduce

You already have enough JavaScript practice to work with these directly.

Tasks

Open your browser console or a small .js file and use this array:

const scores = [72, 88, 91, 64, 79];

Predict

What will happen?

Before reading further, predict what each expression should produce:

scores.map(score => score + 5);
scores.filter(score => score >= 80);
scores.reduce((total, score) => total + score, 0);

The three methods all visit items in an array, but they produce different kinds of results.

MethodMain questionResult
map“What should each item become?”A new array with the same length
filter“Which items should stay?”A new array, possibly shorter
reduce“How can I combine all items into one result?”One accumulated value

1. map: transform every item

Use map when every item needs a new version.

const prices = [10, 15, 20];

const doubledPrices = prices.map(price => {
  return price * 2;
});

console.log(doubledPrices);
// [20, 30, 40]

For each item, the callback must return the replacement value.

The original array is not changed:

console.log(prices);
// [10, 15, 20]

Tasks

Try it

Create a new array where every score is increased by 10:

const improvedScores = scores.map(score => {
  return __________;
});

console.log(improvedScores);

Check that your result is:

[82, 98, 101, 74, 89]

Tasks

Also check that scores is still:

[72, 88, 91, 64, 79]

A useful way to think about map is:

item → transformed item

If the input has five items, the output still has five items.

2. filter: keep matching items

Use filter when you want to keep some items and discard others.

const passingScores = scores.filter(score => {
  return score >= 70;
});

console.log(passingScores);
// [72, 88, 91, 79]

The callback should return a condition:

  • true: keep the item
  • false: leave the item out

The original array remains unchanged.

Tasks

Try it

Create an array containing only scores of 80 or higher:

const highScores = scores.filter(score => {
  return __________;
});

console.log(highScores);

Check that you get:

[88, 91]

Notice that filter does not change the values. It only decides which values remain.

A useful way to think about filter is:

item → keep or discard

3. reduce: combine items into one result

Use reduce when many array items should become one result, such as:

  • a total
  • an average
  • a count
  • an object built from the items
  • a single longest or shortest value

Here is a total:

const total = scores.reduce((runningTotal, score) => {
  return runningTotal + score;
}, 0);

console.log(total);
// 394

The 0 is the starting value for runningTotal.

The callback receives:

  1. the value accumulated so far
  2. the current array item

The process looks like this:

0 + 72  → 72
72 + 88 → 160
160 + 91 → 251
251 + 64 → 315
315 + 79 → 394

Tasks

Try it

Calculate the total of the prices:

const prices = [10, 15, 20];

const totalPrice = prices.reduce((runningTotal, price) => {
  return __________;
}, 0);

console.log(totalPrice);

Check that the result is:

45

Tasks

Now calculate the average score. Start by finding the total, then divide by the number of scores:

const scoreTotal = scores.reduce((runningTotal, score) => {
  return __________;
}, 0);

const averageScore = scoreTotal / scores.length;

console.log(averageScore);

Check that the average is:

78.8

A useful way to think about reduce is:

accumulated result + current item → new accumulated result

Unlike map and filter, reduce does not usually return an array.

Tasks

Seeing the difference

Run these three versions with the same array:

const numbers = [1, 2, 3, 4];

const mapped = numbers.map(number => {
  return __________;
});

const filtered = numbers.filter(number => {
  return __________;
});

const reduced = numbers.reduce((total, number) => {
  return __________;
}, 0);

console.log(mapped);
console.log(filtered);
console.log(reduced);

Fill them so the results are:

[2, 4, 6, 8]
[2, 4]
10

Your callbacks should represent three different operations:

  • map: double each number
  • filter: keep even numbers
  • reduce: add all numbers

Choosing the right method

Use this quick test:

“I need one output for every input.”

Use map.

const names = ["ada", "grace", "linus"];

const capitalizedNames = names.map(name => {
  // return a changed version of name
});

“I only want some of the inputs.”

Use filter.

const ages = [12, 18, 21, 15, 30];

const adults = ages.filter(age => {
  // return true for ages to keep
});

“I need to combine everything.”

Use reduce.

const expenses = [12, 8, 25, 10];

const expenseTotal = expenses.reduce((total, expense) => {
  // return the updated total
}, 0);

One important distinction

Do not use map when you only want to inspect items:

numbers.map(number => {
  console.log(number);
});

This technically creates a new array, but the new array is not useful. map is for creating transformed values.

For simply doing something once per item, JavaScript also has forEach:

numbers.forEach(number => {
  console.log(number);
});

For now, remember:

  • map returns transformed values
  • filter returns selected values
  • reduce returns one combined result

Predict

What will happen?

Final check

Without running it first, predict the output:

const values = [3, 6, 9, 12];

const result = values
  .filter(value => value > 5)
  .map(value => value / 3)
  .reduce((total, value) => total + value, 0);

console.log(result);

Tasks

Trace it in three stages:

filter:  __________
map:     __________
reduce:  __________

Then run it and compare your trace with the console output.

Course Outline

1 module · 5 lessons

Array Transformations in React

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.