JavaScript Array Methods: map, filter, reduce, find and Friends

Read any React component or API handler and you'll see lines like items.filter(...).map(...). These array methods are the everyday tools of JavaScript. Learn eight of them and most code becomes readable.

All examples use this array:

const products = [
  { name: 'Mug', price: 12, inStock: true },
  { name: 'T-shirt', price: 25, inStock: false },
  { name: 'Poster', price: 18, inStock: true },
]

map: transform every item

Returns a new array of the same length, with each item transformed.

const names = products.map(p => p.name)
// ['Mug', 'T-shirt', 'Poster']

const withTax = products.map(p => ({ ...p, price: p.price * 1.2 }))

In React, map turns data into elements:

{products.map(p => <li key={p.name}>{p.name}</li>)}

(The unique key prop warning)

filter: keep some items

Returns a new array with only the items where your function returns true.

const available = products.filter(p => p.inStock)
// Mug, Poster

find: get the first match

Returns the first item that matches, or undefined if none do.

const poster = products.find(p => p.name === 'Poster')
// { name: 'Poster', price: 18, inStock: true }

Always handle the undefined case — it's the root of many cannot read properties of undefined errors.

findIndex returns the position instead (or -1).

some and every: yes/no questions

products.some(p => !p.inStock)   // true — at least one is out of stock
products.every(p => p.price < 30) // true — all are under 30

includes: is this value in the list?

For simple values:

['admin', 'editor'].includes(user.role)   // true or false

reduce: boil it down to one value

The most powerful and the most confusing. It walks through the array carrying an accumulator:

const total = products.reduce((sum, p) => sum + p.price, 0)
// 55

Read it as: "start sum at 0; for each product, the new sum is the old sum plus its price." The 0 at the end is the starting value — always provide it.

reduce can build objects too:

const byName = products.reduce((acc, p) => {
  acc[p.name] = p
  return acc
}, {})

If a reduce is hard to read, a plain for...of loop is perfectly fine.

sort: order the items

const cheapestFirst = products.toSorted((a, b) => a.price - b.price)
const alphabetical = products.toSorted((a, b) => a.name.localeCompare(b.name))

Two gotchas:

1. sort() changes the original array. toSorted() returns a new one. In React state, always use the non-mutating version. (useState explained)
2. Without a compare function, sort compares as text: [10, 9, 1].sort() gives [1, 10, 9]. Always pass (a, b) => a - b for numbers.

Chaining

Because most of these return arrays, you can chain them:

const cheapAvailableNames = products
  .filter(p => p.inStock)
  .filter(p => p.price < 20)
  .map(p => p.name)
// ['Mug', 'Poster']

Read top to bottom like a recipe.

Which ones change the original?

Returns a new array (safe)	Changes the original (careful)
map, filter, slice, concat, toSorted, toReversed, with	sort, reverse, push, pop, splice, shift

Common mistakes

• Forgetting to return in a multi-line arrow function:

products.map(p => { p.name })          // [undefined, undefined, undefined]
products.map(p => { return p.name })   // ✅
products.map(p => p.name)              // ✅

• Using map just to loop. If you don't use the result, use forEach or for...of.
• Calling them on something that isn't an array — see is not a function.
• async inside map. items.map(async ...) gives you an array of Promises; wrap it in await Promise.all(...). (Async/await)

The summary

• map transforms, filter keeps, find gets one, some/every answer yes/no, reduce combines.
• Chain them for readable data pipelines.
• Prefer non-mutating methods (toSorted), especially with React state.
• Return a value from your callback, and give reduce a starting value.

---

EasySpawn gives Claude Code a persistent server with your app running, so you can ask it to explain any line of your code in context — and try changes in a live preview. See how it works or join the waitlist.

Related: HTML, CSS, and JavaScript Explained · Async/Await in JavaScript · What Is JSON? · What Is TypeScript?