JavaScript Array Methods: map, filter, reduce & More (With Examples)

Arrays are the workhorse data structure in JavaScript. Whether you are transforming API responses, filtering search results, or aggregating analytics data, you will reach for array methods dozens of times a day. Yet many developers only scratch the surface, relying on for loops when a declarative one-liner would be cleaner, faster to read, and less error-prone.

This guide provides a deep dive into every major JavaScript array method — with practical, real-world examples you can copy into your projects immediately.

forEach — Iterate Without Returning

forEach executes a callback for every element in the array. It does not return a new array, which makes it ideal for side effects like logging, DOM manipulation, or pushing to an external data structure.

const users = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'editor' },
  { name: 'Carol', role: 'viewer' }
];

users.forEach((user, index) => {
  console.log(`${index + 1}. ${user.name} (${user.role})`);
});
// 1. Alice (admin)
// 2. Bob (editor)
// 3. Carol (viewer)

Key detail: You cannot break out of a forEach loop early. If you need early termination, use for...of or some instead.

map — Transform Every Element

map creates a new array by applying a transformation function to each element. The original array is never mutated. This is one of the most frequently used methods in React, Vue, and any data-processing pipeline.

const products = [
  { name: 'Keyboard', price: 75 },
  { name: 'Mouse', price: 40 },
  { name: 'Monitor', price: 350 }
];

// Create display-ready strings
const priceLabels = products.map(
  p => `${p.name}: $${p.price.toFixed(2)}`
);
// ['Keyboard: $75.00', 'Mouse: $40.00', 'Monitor: $350.00']

// Extract just the prices
const prices = products.map(p => p.price);
// [75, 40, 350]

filter — Select Elements That Pass a Test

filter returns a new array containing only the elements for which the callback returns true. It is the declarative replacement for if statements inside loops.

const expensive = products.filter(p => p.price > 50);
// [{ name: 'Keyboard', price: 75 }, { name: 'Monitor', price: 350 }]

// Chaining filter with map
const expensiveNames = products
  .filter(p => p.price > 50)
  .map(p => p.name);
// ['Keyboard', 'Monitor']

reduce — Accumulate Into a Single Value

reduce is the Swiss Army knife of array methods. It iterates over the array, threading an accumulator through each step. The result can be a number, a string, an object, or even another array.

// Sum all prices
const total = products.reduce((sum, p) => sum + p.price, 0);
// 465

// Group users by role
const grouped = users.reduce((acc, user) => {
  acc[user.role] = acc[user.role] || [];
  acc[user.role].push(user.name);
  return acc;
}, {});
// { admin: ['Alice'], editor: ['Bob'], viewer: ['Carol'] }

// Build a lookup map
const lookup = products.reduce((map, p) => {
  map[p.name.toLowerCase()] = p.price;
  return map;
}, {});
// { keyboard: 75, mouse: 40, monitor: 350 }

Tip: Always provide an initial value (the second argument to reduce). Omitting it causes the first element to be used as the initial accumulator, which leads to subtle bugs when the array is empty.

find & findIndex — Locate a Single Element

find returns the first element that satisfies the predicate, or undefined if none matches. findIndex returns the index instead, or -1.

const orders = [
  { id: 'ORD-001', status: 'shipped' },
  { id: 'ORD-002', status: 'pending' },
  { id: 'ORD-003', status: 'delivered' }
];

const pending = orders.find(o => o.status === 'pending');
// { id: 'ORD-002', status: 'pending' }

const pendingIndex = orders.findIndex(o => o.status === 'pending');
// 1

Both methods stop iterating as soon as a match is found, making them more efficient than filter when you only need one result.

some & every — Boolean Array Tests

some returns true if at least one element passes the test. every returns true only if all elements pass. Both short-circuit — they stop iterating as soon as the answer is determined.

const scores = [82, 91, 76, 95, 88];

const hasFailure = scores.some(s => s < 60);
// false

const allPassing = scores.every(s => s >= 70);
// true

// Practical: check if any form field is empty
const fields = ['Alice', '[email protected]', ''];
const hasEmpty = fields.some(f => f.trim() === '');
// true

includes & indexOf — Check for Presence

includes returns a boolean indicating whether the array contains a given value. It uses the SameValueZero algorithm, meaning it can detect NaN — unlike indexOf, which cannot.

const roles = ['admin', 'editor', 'viewer'];

roles.includes('admin');   // true
roles.indexOf('admin');    // 0

// NaN detection
[1, 2, NaN].includes(NaN);  // true
[1, 2, NaN].indexOf(NaN);   // -1 (cannot find NaN)

flat & flatMap — Flatten Nested Arrays

flat creates a new array with sub-array elements concatenated up to a specified depth. flatMap combines map and flat(1) in a single pass, which is both more readable and more performant when you need to map and then flatten by one level.

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

nested.flat();    // [1, 2, 3, [4, 5], 6]  — depth 1
nested.flat(2);   // [1, 2, 3, 4, 5, 6]    — depth 2
nested.flat(Infinity); // flattens all levels

// flatMap — split sentences into words
const sentences = ['hello world', 'foo bar baz'];
const words = sentences.flatMap(s => s.split(' '));
// ['hello', 'world', 'foo', 'bar', 'baz']

// flatMap — filter and transform in one step
const nums = [1, 2, 3, 4, 5];
const doubled = nums.flatMap(n => n > 3 ? [n * 2] : []);
// [8, 10]  — acts as filter + map combined

sort — Order Elements

sort sorts the array in place and returns the sorted array. Without a comparator, elements are converted to strings and sorted in Unicode order — which is almost never what you want for numbers.

// WRONG: default string sort for numbers
[10, 9, 100].sort();
// [10, 100, 9]  — sorted as strings!

// CORRECT: numeric comparator
[10, 9, 100].sort((a, b) => a - b);
// [9, 10, 100]

// Sort objects by property
products.sort((a, b) => a.price - b.price);

// Case-insensitive string sort
const names = ['banana', 'Apple', 'cherry'];
names.sort((a, b) => a.localeCompare(b));
// ['Apple', 'banana', 'cherry']

Warning: sort mutates the original array. If you need an immutable sort, use toSorted() (ES2023) or spread first: [...arr].sort().

Newer Methods Worth Knowing (ES2023+)

Recent ECMAScript versions introduced non-mutating counterparts to the classic mutating methods:

• toSorted() — returns a new sorted array without mutating the original
• toReversed() — returns a new reversed array
• toSpliced(start, deleteCount, ...items) — returns a new array with splice applied
• with(index, value) — returns a new array with one element replaced
• findLast() / findLastIndex() — search from the end of the array

const original = [3, 1, 4, 1, 5];

const sorted = original.toSorted((a, b) => a - b);
// sorted: [1, 1, 3, 4, 5]
// original: [3, 1, 4, 1, 5]  — unchanged!

const replaced = original.with(2, 99);
// replaced: [3, 1, 99, 1, 5]
// original: [3, 1, 4, 1, 5]  — unchanged!

Performance Considerations

Functional array methods are expressive and readable, but they carry overhead you should understand:

1. Chaining creates intermediate arrays. arr.filter(...).map(...) iterates the array twice and creates a temporary array. For very large datasets, a single reduce or a for loop can be significantly faster.
2. sort is O(n log n). Avoid sorting inside loops or re-sorting on every render. Memoize sorted results when possible.
3. find and some short-circuit. Prefer them over filter(...)[0] or filter(...).length > 0 when you only need to check for the existence of one element.
4. flat(Infinity) can be expensive. If you know the nesting depth, specify it explicitly.
5. Avoid creating functions inside hot loops. Define callback functions outside the loop or use function references for better JIT optimization.

// Slower: two passes + intermediate array
const result = bigArray
  .filter(item => item.active)
  .map(item => item.value);

// Faster: single pass
const result = bigArray.reduce((acc, item) => {
  if (item.active) acc.push(item.value);
  return acc;
}, []);

Common Patterns & Recipes

Remove Duplicates

const unique = [...new Set([1, 2, 2, 3, 3, 3])];
// [1, 2, 3]

// Unique objects by key
const uniqueUsers = users.filter(
  (user, i, arr) => arr.findIndex(u => u.name === user.name) === i
);

Chunk an Array

function chunk(arr, size) {
  return Array.from(
    { length: Math.ceil(arr.length / size) },
    (_, i) => arr.slice(i * size, i * size + size)
  );
}

chunk([1, 2, 3, 4, 5], 2);
// [[1, 2], [3, 4], [5]]

Sum, Min, Max

const nums = [4, 2, 9, 1, 7];

const sum = nums.reduce((a, b) => a + b, 0);   // 23
const min = Math.min(...nums);                   // 1
const max = Math.max(...nums);                   // 9
const avg = sum / nums.length;                   // 4.6

Summary

Mastering JavaScript's array methods lets you write code that is more declarative, easier to test, and less prone to off-by-one errors. Start with the big three — map, filter, reduce — and gradually incorporate find, some, every, flat, and the newer ES2023 immutable variants. Understand the performance trade-offs so you can make informed decisions on hot paths, and keep your code clean and readable everywhere else.