Every array method you’ll actually use, with clear examples.
🔄 Transform
.map(fn)
Create a new array by transforming every element.
[1, 2, 3].map(x => x * 2)→ [2, 4, 6]
.flatMap(fn)
Map + flatten one level deep.
["hello world", "foo bar"].flatMap(s => s.split(" "))
→ ["hello", "world", "foo", "bar"]
.flat(depth)
Flatten nested arrays.
[[1, 2], [3, [4, 5]]].flat() [[1, 2], [3, [4, 5]]].flat(Infinity)→ [1, 2, 3, [4, 5]]
→ [1, 2, 3, 4, 5]
🔍 Search & Filter
.filter(fn)
Keep only elements that pass a test.
[1, 2, 3, 4, 5].filter(x => x > 3)→ [4, 5]
.find(fn)
Return the first element that passes a test.
[{id: 1, name: "Alice"}, {id: 2, name: "Bob"}].find(u => u.id === 2)
→ {id: 2, name: "Bob"}
.findIndex(fn)
Return the index of the first match (-1 if not found).
["a", "b", "c"].findIndex(x => x === "b")→ 1
.includes(value)
Check if an array contains a value.
[1, 2, 3].includes(2)→ true
.indexOf(value)
Find the index of a value (-1 if not found).
["a", "b", "c"].indexOf("b")
→ 1
📊 Reduce & Test
.reduce(fn, initial)
Reduce an array to a single value.
[1, 2, 3, 4].reduce((sum, x) => sum + x, 0)→ 10
// Count occurrences
["a","b","a","c","b","a"].reduce((acc, x) => {
acc[x] = (acc[x] || 0) + 1;
return acc;
}, {})
→ {a: 3, b: 2, c: 1}
.every(fn) / .some(fn)
Test if all/any elements pass a condition.
[2, 4, 6].every(x => x % 2 === 0) // all even? [1, 2, 3].some(x => x > 2) // any > 2?→ true
→ true
➕ Add & Remove
.push() / .pop()
Add/remove from the end. Mutates the array.
const arr = [1, 2]; arr.push(3); // arr is now [1, 2, 3] arr.pop(); // returns 3, arr is [1, 2]
.unshift() / .shift()
Add/remove from the beginning. Mutates the array.
const arr = [1, 2]; arr.unshift(0); // arr is now [0, 1, 2] arr.shift(); // returns 0, arr is [1, 2]
.splice(start, deleteCount, ...items)
Add, remove, or replace elements at any position. Mutates.
const arr = ["a", "b", "c", "d"]; arr.splice(1, 2); // removes "b","c" → arr is ["a","d"] arr.splice(1, 0, "x","y"); // inserts at index 1 → ["a","x","y","d"]
.slice(start, end)
Return a portion of the array. Does NOT mutate.
[0, 1, 2, 3, 4].slice(1, 3)→ [1, 2]
.concat()
Merge arrays. Does NOT mutate.
[1, 2].concat([3, 4]) // Or use spread: [...arr1, ...arr2]→ [1, 2, 3, 4]
📐 Sort & Order
.sort(fn)
Sort in place. ⚠️ Mutates the array.
// Alphabetical (default) ["banana", "apple", "cherry"].sort()→ [“apple”, “banana”, “cherry”]// Numeric (must provide comparator!) [10, 1, 21, 2].sort((a, b) => a - b)
// Descending [3, 1, 2].sort((a, b) => b - a)
→ [1, 2, 10, 21]
→ [3, 2, 1]
.reverse()
Reverse in place. Mutates.
[1, 2, 3].reverse()→ [3, 2, 1]
.toSorted() / .toReversed()
Non-mutating versions (ES2023+).
const arr = [3, 1, 2]; const sorted = arr.toSorted((a, b) => a - b); // arr is still [3, 1, 2], sorted is [1, 2, 3]
🔧 Convert
.join(separator)
Convert array to string.
["hello", "world"].join(" ")
[2026, 3, 14].join("-")
→ "hello world"→ "2026-3-14"
Array.from()
Create an array from anything iterable.
Array.from("hello")
Array.from({length: 3}, (_, i) => i)
→ ["h", "e", "l", "l", "o"]→ [0, 1, 2]
[...new Set(arr)]
Remove duplicates.
[...new Set([1, 2, 2, 3, 3, 3])]→ [1, 2, 3]
Mutates vs Doesn’t Mutate
| Mutates (changes original) | Doesn’t mutate (returns new) |
|---|---|
| push, pop, shift, unshift | map, filter, slice, concat |
| splice, sort, reverse | flat, flatMap, toSorted |
| fill | toReversed, toSpliced |
When in doubt, use the non-mutating version. It prevents bugs.