Some links in this article are affiliate links. We earn a commission at no extra cost to you when you purchase through them. Full disclosure.
Every array method you’ll actually use, with clear examples. Part of our JavaScript complete guide. If you’re using TypeScript, these methods work the same way with added type safety.
🔄 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.
Related resources
Quick access: Raycast lets you search commands, snippets, and cheat sheets instantly from your keyboard. Free for Mac.
Related: What is TypeScript · Jest Cheat Sheet