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.

Array Methods: map filter reduce find is a free Frontend Academy lesson on CoddyKit — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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?

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.

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, and the Frontend Academy course includes 4 lessons in total. 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.

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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

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