JavaScript Array Methods in 2026: The Complete Practical Guide

The Big Four

Method	Returns	Mutates Original
map()	New array (same length)	❌ No
filter()	New array (subset)	❌ No
reduce()	Single value	❌ No
find()	First match	❌ No

map() — Transform Every Item

const users = [{name: 'Alice', age: 30}, {name: 'Bob', age: 25}];

// ❌ Old way
const names = [];
for (const user of users) {
  names.push(user.name);
}

// ✅ map
const names = users.map(u => u.name);  // ['Alice', 'Bob']

// Transform to different shape
const cards = users.map(u => ({
  title: u.name,
  subtitle: `${u.age} years old`,
  id: u.id
}));

filter() — Keep Only What Matches

const products = [
  { name: 'Keyboard', price: 150, inStock: true },
  { name: 'Mouse', price: 80, inStock: false },
  { name: 'Monitor', price: 500, inStock: true },
];

// Filter by condition
const available = products.filter(p => p.inStock);  // Keyboard, Monitor
const expensive = products.filter(p => p.price > 100);  // Keyboard, Monitor

// Chain with map
const availableNames = products
  .filter(p => p.inStock)
  .map(p => p.name);  // ['Keyboard', 'Monitor']

reduce() — Accumulate to One Value

const orders = [
  { id: 1, total: 100, status: 'completed' },
  { id: 2, total: 250, status: 'completed' },
  { id: 3, total: 50, status: 'cancelled' },
];

// ❌ Imperative way
let total = 0;
for (const order of orders) {
  if (order.status === 'completed') total += order.total;
}

// ✅ reduce
const total = orders
  .filter(o => o.status === 'completed')
  .reduce((sum, o) => sum + o.total, 0);  // 350

// Group by field
const byStatus = orders.reduce((groups, order) => {
  groups[order.status] = groups[order.status] || [];
  groups[order.status].push(order);
  return groups;
}, {});

find() / findIndex() — Get First Match

const users = [
  { id: 1, role: 'admin' },
  { id: 2, role: 'user' },
  { id: 3, role: 'user' },
];

// find: returns the element
const admin = users.find(u => u.role === 'admin');  // { id: 1, role: 'admin' }

// findIndex: returns the index
const adminIndex = users.findIndex(u => u.role === 'admin');  // 0

// NOT find: returns boolean
const hasAdmin = users.some(u => u.role === 'admin');  // true

some() / every() — Boolean Aggregates

const users = [
  { name: 'Alice', verified: true },
  { name: 'Bob', verified: false },
  { name: 'Carol', verified: true },
];

// some: at least one matches
const hasUnverified = users.some(u => !u.verified);  // true

// every: all must match
const allVerified = users.every(u => u.verified);  // false

flat() / flatMap() — Handle Nested Arrays

const nested = [[1, 2], [3, 4], [5, 6]];

// flat: flatten one level
const flat = nested.flat();  // [1, 2, 3, 4, 5, 6]

// flatMap: map then flatten
const doubled = nested.flatMap(arr => arr.map(n => n * 2));  // [2, 4, 6, 8, 10, 12]

Performance Tips

// ❌ Don't use map + filter when filter alone is enough
const result = array.map(x => transform(x)).filter(x => x !== null);

// ✅ Combine with flatMap or use filter first
const result = array
  .map(x => (condition(x) ? transform(x) : null))
  .filter(x => x !== null);  // still not ideal

// ✅ Better: reduce in one pass
const result = array.reduce((acc, x) => {
  if (condition(x)) acc.push(transform(x));
  return acc;
}, []);

Method Chaining

const data = [
  { category: 'electronics', price: 100, rating: 4.5 },
  { category: 'electronics', price: 200, rating: 4.8 },
  { category: 'books', price: 20, rating: 4.2 },
];

// Chain: filter → sort → map
const topElectronics = data
  .filter(d => d.category === 'electronics' && d.rating >= 4.5)
  .sort((a, b) => b.rating - a.rating)
  .map(d => ({ name: d.category, score: d.rating }));

---

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.