JavaScript Array Methods: The Complete Cheatsheet
Every array method you need, with practical examples you can copy and use today.
Transform
map() — Transform every element
const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.1);
// [11, 22, 33]
const users = [{name: 'Alice'}, {name: 'Bob'}];
const names = users.map(u => u.name);
// ['Alice', 'Bob']filter() — Keep matching elements
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4, 6]
const adults = users.filter(u => u.age >= 18);reduce() — Accumulate to single value
const cart = [{price: 10}, {price: 20}, {price: 30}];
const total = cart.reduce((sum, item) => sum + item.price, 0);
// 60
// Group by category
const grouped = items.reduce((acc, item) => {
(acc[item.category] ??= []).push(item);
return acc;
}, {});flatMap() — Map then flatten
const sentences = ["hello world", "foo bar"];
const words = sentences.flatMap(s => s.split(" "));
// ["hello", "world", "foo", "bar"]Search
find() — First matching element
const user = users.find(u => u.id === 42);
// {id: 42, name: 'Alice'} or undefinedfindIndex() — Index of first match
const idx = users.findIndex(u => u.name === 'Bob');
// 1 or -1 if not foundincludes() — Contains value?
[1, 2, 3].includes(2); // true
['a', 'b'].includes('c'); // falsesome() — Any match?
const hasAdmin = users.some(u => u.role === 'admin');
// true if at least one adminevery() — All match?
const allVerified = users.every(u => u.verified);
// true only if ALL are verifiedSort & Reorder
sort() — Sort in place
// Numbers (ascending)
[3, 1, 2].sort((a, b) => a - b); // [1, 2, 3]
// Strings
['banana', 'apple'].sort(); // ['apple', 'banana']
// Objects by property
users.sort((a, b) => a.name.localeCompare(b.name));toSorted() — Sort without mutating (ES2023)
const sorted = numbers.toSorted((a, b) => a - b);
// Original array unchanged!toReversed() — Reverse without mutating
const reversed = [1, 2, 3].toReversed();
// [3, 2, 1] — original unchangedCreate & Combine
Array.from() — Create from iterable
// Range of numbers
Array.from({length: 5}, (_, i) => i);
// [0, 1, 2, 3, 4]
// Unique values
[...new Set([1, 1, 2, 3, 3])];
// [1, 2, 3]
// NodeList to Array
Array.from(document.querySelectorAll('div'));concat() / spread — Combine arrays
const combined = [...arr1, ...arr2];
// or
const combined = arr1.concat(arr2);flat() — Flatten nested arrays
[1, [2, [3]]].flat(); // [1, 2, [3]]
[1, [2, [3]]].flat(Infinity); // [1, 2, 3]Extract & Modify
slice() — Extract portion (immutable)
const arr = [1, 2, 3, 4, 5];
arr.slice(1, 3); // [2, 3]
arr.slice(-2); // [4, 5]
arr.slice(); // shallow copysplice() — Remove/insert (mutates!)
const arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // removes [2, 3], arr = [1, 4, 5]
arr.splice(1, 0, 'a'); // inserts 'a' at index 1with() — Replace at index (ES2023, immutable)
const arr = [1, 2, 3];
const updated = arr.with(1, 99);
// [1, 99, 3] — original unchangedIterate
forEach() — Side effects only
users.forEach(user => console.log(user.name));
// Returns undefined — use map() if you need a resultentries(), keys(), values()
for (const [index, value] of arr.entries()) {
console.log(index, value);
}Quick Reference Table
| Method | Returns | Mutates? |
|---|---|---|
| map() | New array | No |
| filter() | New array | No |
| reduce() | Single value | No |
| find() | Element or undefined | No |
| sort() | Same array | Yes |
| toSorted() | New array | No |
| splice() | Removed items | Yes |
| slice() | New array | No |
| forEach() | undefined | No |
| flat() | New array | No |
Try it live: Use our free JSON Formatter and Regex Tester tools.