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

Every time I open a codebase and see a for-loop pushing items into a new array, I know the developer hasn't discovered .map yet — and I say that gently, because I wrote that exact same for-loop for two full years before it clicked. Once I finally learned map, filter, reduce, find, and some, my JavaScript stopped looking like C and started reading like plain English. There are 30-odd array methods in modern JS, but the dozen below are the ones I actually use on real Laravel-plus-Alpine and vanilla-JS client projects. Learn these and 90% of your data-transformation code will get shorter and easier to review.

Transform: map

const users = [{ name: 'Ada' }, { name: 'Linus' }];
const names = users.map(u => u.name);
// ['Ada', 'Linus']

Keep matches: filter

const adults = people.filter(p => p.age >= 18);

Aggregate: reduce

const total = cart.reduce((sum, item) => sum + item.price, 0);

Search: find, findIndex, includes

const user = users.find(u => u.id === 42);
const idx  = users.findIndex(u => u.id === 42);
const hasAdmin = roles.includes('admin');

Test: some and every

cart.some(item => item.price > 100);  // true if any
cart.every(item => item.inStock);     // true if all

Flatten: flat and flatMap

[[1,2],[3,4]].flat();         // [1,2,3,4]
sentences.flatMap(s => s.split(' '));

Chaining for clarity

const totalOver18 = users
  .filter(u => u.age >= 18)
  .map(u => u.spending)
  .reduce((sum, n) => sum + n, 0);

Mutation vs new array

• Returns new array — map, filter, slice, concat, flat
• Mutates the array — push, pop, sort, splice, reverse
• Modern non-mutating versions — toSorted, toReversed, toSpliced

Common mistakes

• Using forEach when you actually wanted map
• Forgetting reduce's initial value (sum starts as undefined)
• Sorting in place inside React state — use toSorted()