JavaScript Array Methods Cheat Sheet: map, filter, reduce, and Beyond

Why Array Methods Matter

JavaScript's built-in array methods are among the most-used tools in any JS developer's arsenal. They allow you to transform, filter, and aggregate data cleanly and expressively — without writing verbose for loops. This reference covers the essential methods with practical, copy-ready examples.

Transforming Data

Array.map()

Creates a new array by applying a function to each element. The original array is unchanged.

const prices = [10, 20, 30];
const withTax = prices.map(price => price * 1.1);
// [11, 22, 33]

Use when: You want to transform every element into something else.

Array.flatMap()

Like map(), but flattens one level of nesting in the result.

const sentences = ["Hello world", "Foo bar"];
const words = sentences.flatMap(s => s.split(" "));
// ["Hello", "world", "Foo", "bar"]

Filtering and Finding

Array.filter()

Returns a new array containing only elements that pass a test.

const scores = [45, 72, 88, 34, 91];
const passing = scores.filter(score => score >= 60);
// [72, 88, 91]

Array.find() and Array.findIndex()

find() returns the first matching element; findIndex() returns its index.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];
const user = users.find(u => u.id === 2);       // { id: 2, name: "Bob" }
const idx  = users.findIndex(u => u.id === 2);  // 1

Aggregating and Reducing

Array.reduce()

The Swiss Army knife of array methods. It reduces an array to a single value by accumulating results.

const cart = [
  { item: "keyboard", price: 79 },
  { item: "mouse", price: 35 },
  { item: "monitor", price: 299 }
];
const total = cart.reduce((sum, product) => sum + product.price, 0);
// 413

Use when: You need to compute a single result from an array — sums, counts, grouped objects, or flattened structures.

Grouping with reduce()

const people = [
  { name: "Alice", dept: "Engineering" },
  { name: "Bob",   dept: "Design" },
  { name: "Carol", dept: "Engineering" }
];
const byDept = people.reduce((groups, person) => {
  const key = person.dept;
  (groups[key] = groups[key] || []).push(person);
  return groups;
}, {});
// { Engineering: [...], Design: [...] }

Checking Conditions

Array.some() and Array.every()

const nums = [2, 4, 6, 7, 8];
nums.some(n => n % 2 !== 0);   // true  — at least one is odd
nums.every(n => n % 2 === 0);  // false — not all are even

Sorting and Reversing

Array.sort()

Sorts in-place. Always provide a comparator for numeric sorts — the default sorts lexicographically.

const nums = [10, 1, 21, 3];
nums.sort((a, b) => a - b); // Ascending: [1, 3, 10, 21]
nums.sort((a, b) => b - a); // Descending: [21, 10, 3, 1]

Quick Reference Table

Method	Returns	Mutates Original?
map()	New array (same length)	No
filter()	New array (shorter or equal)	No
reduce()	Single value	No
find()	Single element or undefined	No
sort()	Sorted array	Yes
forEach()	undefined	No

Final Tips

• Chain methods for readable data pipelines: arr.filter(...).map(...).reduce(...).
• Prefer map + filter over reduce when the logic is simpler — readability wins.
• Remember that sort() mutates — use [...arr].sort(...) to sort a copy safely.