JavaScript Array Methods Cheat Sheet: map, filter, reduce and the Rest

Transformation methods (return a new array)

map() — transform each element

const users = [
  { id: 1, name: "Alice", active: true },
  { id: 2, name: "Bob", active: false },
];

// Extract just the names
const names = users.map(u => u.name);
// ["Alice", "Bob"]

// Add a computed field
const withLabel = users.map(u => ({
  ...u,
  label: u.active ? "Active" : "Inactive"
}));

filter() — keep elements matching a condition

const activeUsers = users.filter(u => u.active);
// [{ id: 1, name: "Alice", active: true }]

// Chaining with map
const activeNames = users
  .filter(u => u.active)
  .map(u => u.name);
// ["Alice"]

reduce() — fold array into a single value

const orders = [
  { product: "A", amount: 120 },
  { product: "B", amount: 80 },
  { product: "C", amount: 200 },
];

// Sum amounts
const total = orders.reduce((sum, order) => sum + order.amount, 0);
// 400

// Group by a key
const byProduct = orders.reduce((acc, order) => {
  acc[order.product] = order.amount;
  return acc;
}, {});
// { A: 120, B: 80, C: 200 }

flat() and flatMap()

// flat() — flatten nested arrays
const nested = [[1, 2], [3, 4], [5]];
nested.flat();       // [1, 2, 3, 4, 5]
nested.flat(Infinity); // works for any depth

// flatMap() — map then flat(1) in one step
const sentences = ["hello world", "foo bar"];
const words = sentences.flatMap(s => s.split(" "));
// ["hello", "world", "foo", "bar"]

Search methods (find elements)

find() and findIndex()

const user = users.find(u => u.id === 2);
// { id: 2, name: "Bob", active: false }

const index = users.findIndex(u => u.id === 2);
// 1

// Returns undefined / -1 if not found
users.find(u => u.id === 99);      // undefined
users.findIndex(u => u.id === 99); // -1

some() and every()

// some() — does at least one match?
users.some(u => u.active);  // true (Alice is active)
users.some(u => u.id > 10); // false

// every() — do all match?
users.every(u => u.active); // false (Bob is not active)
users.every(u => u.id > 0); // true

includes() vs indexOf()

const nums = [1, 2, 3, NaN];

nums.includes(2);    // true
nums.includes(NaN);  // true — handles NaN correctly

nums.indexOf(2);     // 1
nums.indexOf(NaN);   // -1 — NaN !== NaN in indexOf

Mutation methods (modify in place)

push, pop, shift, unshift, splice

const arr = [1, 2, 3];

arr.push(4);        // adds to end → [1, 2, 3, 4]
arr.pop();          // removes from end → [1, 2, 3]
arr.unshift(0);     // adds to start → [0, 1, 2, 3]
arr.shift();        // removes from start → [1, 2, 3]

// splice(startIndex, deleteCount, ...itemsToInsert)
arr.splice(1, 0, 99);   // insert 99 at index 1 → [1, 99, 2, 3]
arr.splice(1, 1);        // remove 1 element at index 1 → [1, 2, 3]

These mutate the original array. If you need to avoid mutation (React state, for example), use spread or slice instead:

// Immutable push equivalent
const newArr = [...arr, 4];

// Immutable splice equivalent (remove at index i)
const withoutI = [...arr.slice(0, i), ...arr.slice(i + 1)];

Sorting and ordering

sort()

// Default sort converts to strings — WRONG for numbers
[10, 2, 100].sort(); // [10, 100, 2] ← string order

// Correct numeric sort
[10, 2, 100].sort((a, b) => a - b); // [2, 10, 100]

// Sort objects by property
users.sort((a, b) => a.name.localeCompare(b.name));

Warning: sort() mutates the array in place. Use [...arr].sort(...) for an immutable sort.

reverse()

[1, 2, 3].reverse(); // [3, 2, 1] — mutates in place

// Immutable reverse
const reversed = [...arr].reverse();
// Or in modern JS:
arr.toReversed(); // Returns new array (Chrome 110+, Node 20+)

Utility methods

Array.from() — create arrays from iterables

// From NodeList (DOM)
const divs = Array.from(document.querySelectorAll('div'));

// From string
Array.from("hello"); // ["h", "e", "l", "l", "o"]

// Create an array of n items
Array.from({ length: 5 }, (_, i) => i); // [0, 1, 2, 3, 4]

Array.isArray()

// typeof returns "object" for arrays — use this instead
Array.isArray([]);         // true
Array.isArray({});         // false
Array.isArray("hello");   // false

The immutable counterparts (ES2023)

ES2023 added immutable versions of mutating methods — they return a new array instead of modifying the original:

arr.toSorted((a, b) => a - b)  // vs sort() — non-mutating
arr.toReversed()                // vs reverse() — non-mutating
arr.toSpliced(1, 1)             // vs splice() — non-mutating
arr.with(2, 99)                 // replace element at index 2 with 99

Supported in Chrome 110+, Firefox 115+, Safari 16+, Node 20+.

Related tools

• Free JavaScript Minifier — minify your JavaScript arrays and logic before production
• Free JSON Formatter — format JSON arrays for debugging

Written by Achraf A., founder of TheFreeAITools.