JavaScript Array Methods You Actually Use: map, filter, reduce and More

Modern JavaScript is written with array methods, not for loops. Learn a handful, map, filter, reduce, find, some, every, and you'll write cleaner code that reads like what it does. Here's how to use each one, with the mental model for picking the right one.

map: transform every item

map takes an array and returns a new array of the same length, with each item transformed by your function. Use it whenever you want to turn one list into another.

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

filter: keep what matches

filter returns a new array containing only the items that pass a test. The result is the same length or shorter, never transformed, just filtered.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
// [2, 4, 6]

reduce: boil down to one value

reduce is the most powerful and most feared. It runs through the array accumulating a single result, a sum, a max, an object, anything. You give it a reducer function and a starting value.

const nums = [1, 2, 3, 4];
const total = nums.reduce((sum, n) => sum + n, 0);
// 10

// build an object: count occurrences
const words = ["a", "b", "a", "c", "b", "a"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

find, some and every: search and test

• •find returns the first item that matches, or undefined. Use it to grab one thing.
• •some returns true if at least one item passes the test.
• •every returns true only if all items pass the test.

const users = [{ id: 1, active: true }, { id: 2, active: false }];
users.find((u) => u.id === 2);        // { id: 2, active: false }
users.some((u) => u.active);          // true
users.every((u) => u.active);         // false

Chaining methods

Because map and filter return arrays, you can chain them into a readable pipeline. This reads top to bottom like a description of the transformation.

const orders = [
  { total: 50, paid: true }, { total: 120, paid: false }, { total: 200, paid: true },
];
const revenue = orders
  .filter((o) => o.paid)
  .map((o) => o.total)
  .reduce((sum, t) => sum + t, 0);
// 250

The pattern to remember: filter to narrow, map to transform, reduce to summarize. Most data work is some combination of those three.

They don't mutate the original

A key reason to prefer these methods: map, filter and reduce return new arrays or values and leave the original untouched. That predictability makes your code easier to reason about, especially in React where mutating state directly causes bugs.

The short version

Use map to transform every item, filter to keep matching items, and reduce to collapse an array into one value. Use find for the first match, and some/every for boolean tests. Chain them into readable pipelines, and rely on the fact that they don't mutate the original array.