Mastering Array Methods in Modern JavaScript

Array methods replaced most for loops. Knowing when each one fits keeps chains readable.

map: transform every element

Use map when output length equals input length. Never mutate inside it.

const prices = [100, 200, 300];
const withTax = prices.map(p => p * 1.1); // [110, 220, 330]

filter: keep matching elements

const active = users.filter(u => u.active);

Chain with map to transform after filtering. Filter first to reduce work.

const names = users
  .filter(u => u.active)
  .map(u => u.name);

reduce: fold into a single value

Reach for it when you need a shape change: array to object, array to number.

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

const byId = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});

find vs filter

find returns the first match and stops. Use it when you expect one result.

const admin = users.find(u => u.role === 'admin');

flatMap

flatMap is map plus one level of flatten. Useful when each element maps to zero or more results.

const sentences = paragraphs.flatMap(p => p.split('. '));

When to skip array methods

Deep nesting of map/filter/reduce hurts readability more than a for...of loop. If you need early exit, for...of with break is cleaner.