Transforming Arrays

You could do everything in this lesson with a for loop. Nobody does. These methods say what you want rather than how to iterate, and once they click you will reach for them constantly — especially in React, where rendering a list is almost always a map.

All of them take a function as an argument, which is exactly the higher-order function idea from the Functions lesson.

map — same length, different shape

map runs your function on every item and collects the results into a new array. The output always has the same number of items as the input.

const prices = [199, 499, 999];
const withTax = prices.map((price) => price * 1.18);
 
console.log(withTax); // [234.82, 588.82, 1178.82]
console.log(prices);  // [199, 499, 999] — unchanged

That last line matters: map never modifies the original array. It returns a new one.

Pulling a single field out of a list of objects is the most common use you will see:

const lessons = [
  { title: "Functions", minutes: 9 },
  { title: "Arrays", minutes: 10 },
];
 
const titles = lessons.map((lesson) => lesson.title);
// ["Functions", "Arrays"]

filter — fewer items, same shape

filter keeps only the items for which your function returns true.

const lessons = [
  { title: "Functions", minutes: 9, published: true },
  { title: "Arrays", minutes: 10, published: false },
  { title: "Async", minutes: 12, published: true },
];
 
const live = lessons.filter((lesson) => lesson.published);
console.log(live.length); // 2

Because both return new arrays, map and filter chain naturally:

const liveTitles = lessons
  .filter((lesson) => lesson.published)
  .map((lesson) => lesson.title);
// ["Functions", "Async"]

Read that top to bottom as a sentence: take the lessons, keep the published ones, then take their titles. That readability is the whole point.

find — one item or undefined

filter always gives you an array, even when you only wanted one thing. find returns the first match itself, or undefined if nothing matches.

const lesson = lessons.find((item) => item.title === "Arrays");
console.log(lesson.minutes); // 10
 
const missing = lessons.find((item) => item.title === "Rust");
console.log(missing); // undefined

Always remember find can return undefined, so guard before you read a property off it:

const lesson = lessons.find((item) => item.title === "Rust");
console.log(lesson?.minutes); // undefined, not a crash

Related helpers worth knowing: some tells you whether any item matches, and every tells you whether all of them do. Both return a boolean.

lessons.some((l) => l.minutes > 11);  // true
lessons.every((l) => l.published);    // false

reduce — many items, one result

reduce is the one people find intimidating, but the idea is simple: walk the list carrying a running total.

It takes two arguments — a function receiving the accumulated value and the current item, and the starting value.

const minutes = [9, 10, 12];
 
const total = minutes.reduce((sum, current) => sum + current, 0);
console.log(total); // 31

Step through it: start at 0, then 0 + 9, then 9 + 10, then 19 + 12.

The accumulator does not have to be a number. Grouping items into an object is a genuinely useful pattern:

const lessons = [
  { title: "Functions", level: "beginner" },
  { title: "Async", level: "intermediate" },
  { title: "Arrays", level: "beginner" },
];
 
const byLevel = lessons.reduce((groups, lesson) => {
  const list = groups[lesson.level] ?? [];
  return { ...groups, [lesson.level]: [...list, lesson.title] };
}, {});
 
// { beginner: ["Functions", "Arrays"], intermediate: ["Async"] }

If you forget the starting value, reduce uses the first item instead — which works for sums but breaks in confusing ways for objects. Always pass it.

Try it yourself

Add a filter so only lessons over 9 minutes are counted in the total, then check the average.

What to remember

• map transforms every item and keeps the length; filter keeps the shape and drops items.
• find returns one item or undefined — guard with ?..
• reduce collapses a list into a single value; always pass the initial value.
• None of them mutate the original array, which is exactly why React code relies on them.