Frontend Academy · Lesson

Array Methods: map filter reduce find

Transform, filter, and aggregate arrays with higher-order methods instead of manual loops. Chain them for expressive data pipelines.

Lesson 1 of 413 steps

Array Methods: map filter reduce find is a free Frontend Academy lesson on CoddyKit. This is lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.

Why Array Methods?

Imperative for loops work but hide intent. Array higher-order methods declare what you want rather than how to iterate. They produce cleaner, testable, composable code that reads like prose.

Array.map() — Transform Every Element

map() returns a new array where every element has been transformed by the callback. The original array is not mutated. Use it whenever you need to convert one array to another.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — Select Matching Elements

filter() returns a new array containing only elements for which the callback returns truthy. The callback is a predicate function.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — Accumulate a Value

reduce(callback, initialValue) accumulates all elements into a single value. The callback receives the accumulator and the current element. The initial value is the accumulator's starting value.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — First Match

find() returns the first element matching the predicate, or undefined if none. Use it to look up an item by ID or property value.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() is like find() but returns the index of the matching element, or -1 if not found. Useful for finding where to update an element in an array.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() and Array.every()

some() returns true if at least one element passes the test. every() returns true only if all elements pass. Both short-circuit on the first conclusive result.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — Map Then Flatten

flatMap() maps each element then flattens the result by one level. Equivalent to .map(...).flat() but more efficient.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Chaining Array Methods

Methods return new arrays, so you can chain them. Read chains from left to right: filter first, then transform, then aggregate.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() and Array.includes()

at(-1) gets the last element. includes(value) checks if a value exists. Much cleaner than arr[arr.length - 1] and arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Immutability: Don't Mutate

map, filter, reduce return new arrays. push, pop, splice mutate the original. In React state, always create new arrays (with spread or map) rather than mutating state directly.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Quick Check

Which array method returns a new array of elements for which the callback returns true?

Answer it in the interactive lesson

Recap: Array Methods

map() transforms every element. filter() selects matching elements. reduce() accumulates to a single value. find() returns the first match. some()/every() test membership. Chains of these methods replace nested loops with readable, declarative data pipelines.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 41
Lessons: 163

Start learning free View the full course

Frequently Asked Questions

Is the “Array Methods: map filter reduce find” lesson free?

Yes — the full text of “Array Methods: map filter reduce find” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO. The Frontend Academy course includes 4 lessons in total.

What will I learn in “Array Methods: map filter reduce find”?

Transform, filter, and aggregate arrays with higher-order methods instead of manual loops. Chain them for expressive data pipelines. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “Array Methods: map filter reduce find” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy