Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
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.
Array Transformations in React
5 lessonsLearn map, filter, and reduce from first principles, then embed each technique into a live feature of your existing React full‑stack application.
Public lesson
map, filter, and reduceYou 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];
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);
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.
| Method | Main question | Result |
|---|---|---|
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 |
map: transform every itemUse 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]
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]
console.log(prices);
// [10, 15, 20]
Tasks
Create a new array where every score is increased by 10:
const improvedScores = scores.map(score => {
return __________;
});
console.log(improvedScores);
const improvedScores = scores.map(score => {
return __________;
});
console.log(improvedScores);
Check that your result is:
[82, 98, 101, 74, 89]
[82, 98, 101, 74, 89]
Tasks
Also check that scores is still:
[72, 88, 91, 64, 79]
[72, 88, 91, 64, 79]
A useful way to think about map is:
item → transformed item
item → transformed item
If the input has five items, the output still has five items.
filter: keep matching itemsUse 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]
const passingScores = scores.filter(score => {
return score >= 70;
});
console.log(passingScores);
// [72, 88, 91, 79]
The callback should return a condition:
true: keep the itemfalse: leave the item outThe original array remains unchanged.
Tasks
Create an array containing only scores of 80 or higher:
const highScores = scores.filter(score => {
return __________;
});
console.log(highScores);
const highScores = scores.filter(score => {
return __________;
});
console.log(highScores);
Check that you get:
[88, 91]
[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
item → keep or discard
reduce: combine items into one resultUse reduce when many array items should become one result, such as:
Here is a total:
const total = scores.reduce((runningTotal, score) => {
return runningTotal + score;
}, 0);
console.log(total);
// 394
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:
The process looks like this:
0 + 72 → 72
72 + 88 → 160
160 + 91 → 251
251 + 64 → 315
315 + 79 → 394
0 + 72 → 72
72 + 88 → 160
160 + 91 → 251
251 + 64 → 315
315 + 79 → 394
Tasks
Calculate the total of the prices:
const prices = [10, 15, 20];
const totalPrice = prices.reduce((runningTotal, price) => {
return __________;
}, 0);
console.log(totalPrice);
const prices = [10, 15, 20];
const totalPrice = prices.reduce((runningTotal, price) => {
return __________;
}, 0);
console.log(totalPrice);
Check that the result is:
45
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);
const scoreTotal = scores.reduce((runningTotal, score) => {
return __________;
}, 0);
const averageScore = scoreTotal / scores.length;
console.log(averageScore);
Check that the average is:
78.8
78.8
A useful way to think about reduce is:
accumulated result + current item → new accumulated result
accumulated result + current item → new accumulated result
Unlike map and filter, reduce does not usually return an array.
Tasks
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);
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
[2, 4, 6, 8]
[2, 4]
10
Your callbacks should represent three different operations:
map: double each numberfilter: keep even numbersreduce: add all numbersUse this quick test:
Use map.
const names = ["ada", "grace", "linus"];
const capitalizedNames = names.map(name => {
// return a changed version of name
});
const names = ["ada", "grace", "linus"];
const capitalizedNames = names.map(name => {
// return a changed version of name
});
Use filter.
const ages = [12, 18, 21, 15, 30];
const adults = ages.filter(age => {
// return true for ages to keep
});
const ages = [12, 18, 21, 15, 30];
const adults = ages.filter(age => {
// return true for ages to keep
});
Use reduce.
const expenses = [12, 8, 25, 10];
const expenseTotal = expenses.reduce((total, expense) => {
// return the updated total
}, 0);
const expenses = [12, 8, 25, 10];
const expenseTotal = expenses.reduce((total, expense) => {
// return the updated total
}, 0);
Do not use map when you only want to inspect items:
numbers.map(number => {
console.log(number);
});
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);
});
numbers.forEach(number => {
console.log(number);
});
For now, remember:
map returns transformed valuesfilter returns selected valuesreduce returns one combined resultPredict
What will happen?
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);
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: __________
filter: __________
map: __________
reduce: __________
Then run it and compare your trace with the console output.
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.