JavaScript Array Methods
Complete reference for built-in JavaScript array methods with signatures, descriptions, and short examples. All methods available on Array.prototype unless noted.
Mutating vs Non-Mutating
Some methods modify the original array (mutating); others return a new array (non-mutating). Preferring non-mutating methods avoids subtle bugs, especially in React state or shared data.
Mutating (modify original)
push, pop, shift, unshift, splice, sort, reverse, fill, copyWithin
Non-Mutating (return new)
map, filter, reduce, slice, concat, flat, flatMap, toSorted, toReversed, toSpliced, with
Iteration
| Method | Returns | Description & Example |
|---|---|---|
forEach(fn) | undefined | Calls fn for each element. [1,2,3].forEach(x => console.log(x)) |
map(fn) | New array | Returns new array of fn(element) results. [1,2,3].map(x => x * 2) // [2,4,6] |
filter(fn) | New array | Returns elements where fn returns truthy. [1,2,3,4].filter(x => x % 2 === 0) // [2,4] |
reduce(fn, init) | Single value | Reduces array to one value. [1,2,3].reduce((acc, x) => acc + x, 0) // 6 |
reduceRight(fn, init) | Single value | Like reduce, but iterates right to left |
every(fn) | Boolean | true if fn returns truthy for all elements. [2,4,6].every(x => x % 2 === 0) // true |
some(fn) | Boolean | true if fn returns truthy for any element. [1,2,3].some(x => x > 2) // true |
find(fn) | Element or undefined | First element where fn is truthy. [1,2,3].find(x => x > 1) // 2 |
findIndex(fn) | Index or -1 | Index of first truthy match. [1,2,3].findIndex(x => x > 1) // 1 |
findLast(fn) | Element or undefined | Last element where fn is truthy (ES2023) |
findLastIndex(fn) | Index or -1 | Index of last truthy match (ES2023) |
Transformation
| Method | Mutates? | Description & Example |
|---|---|---|
flat(depth?) | No | Flattens nested arrays. [[1,2],[3]].flat() // [1,2,3] |
flatMap(fn) | No | Maps then flattens one level. [1,2].flatMap(x => [x, x*2]) // [1,2,2,4] |
slice(start?, end?) | No | Returns a section. [1,2,3,4].slice(1,3) // [2,3] |
splice(start, n, ...items) | Yes | Remove/replace elements in place. arr.splice(1, 1, 'a') |
concat(...arrays) | No | Merges arrays. [1,2].concat([3,4]) // [1,2,3,4] |
join(sep?) | No | Joins to string. [1,2,3].join('-') // "1-2-3" |
reverse() | Yes | Reverses in place. Use toReversed() for non-mutating (ES2023) |
sort(fn?) | Yes | Sorts in place. [3,1,2].sort((a,b) => a-b) // [1,2,3] |
fill(val, start?, end?) | Yes | Fills a range with a value. new Array(3).fill(0) // [0,0,0] |
push(...items) | Yes | Appends items, returns new length |
pop() | Yes | Removes and returns last element |
shift() | Yes | Removes and returns first element |
unshift(...items) | Yes | Prepends items, returns new length |
Search
| Method | Returns | Description |
|---|---|---|
includes(val) | Boolean | Uses strict equality (===), handles NaN |
indexOf(val) | Index or -1 | First index of val, strict equality, cannot find NaN |
lastIndexOf(val) | Index or -1 | Last index of val, searches right to left |
at(index) | Element | Supports negative indices. arr.at(-1) is last element |
Conversion & Static Methods
| Method | Description |
|---|---|
Array.from(iterable, mapFn?) | Creates array from any iterable or array-like. Array.from({length:3}, (_, i) => i) // [0,1,2] |
Array.of(...items) | Creates array from arguments. Fixes new Array(3) ambiguity |
Array.isArray(val) | Returns true if val is an array (more reliable than instanceof) |
entries() | Iterator of [index, value] pairs |
keys() | Iterator of indices |
values() | Iterator of values |
toString() | Comma-separated string of elements |
Frequently Asked Questions
What is the difference between map and forEach?
map returns a new array containing the return value of the callback for each element, leaving the original array unchanged. forEach always returns undefined — it is only used for side effects (logging, updating external state, etc.). Use map when you need a transformed array; use forEach when you only need to iterate for side effects.
How does Array.reduce work?
reduce(callback, initialValue) processes each element left to right, passing an accumulator and the current element to the callback. The callback returns the next accumulator value. After all elements are processed, the final accumulator is returned. For example, [1,2,3,4].reduce((sum, n) => sum + n, 0) returns 10. If no initial value is provided, the first element is used as the initial accumulator and iteration starts at index 1.
What is the difference between slice and splice?
slice(start, end) is non-mutating — it returns a shallow copy of a portion of the array from start up to (but not including) end. splice(start, deleteCount, ...items) is mutating — it removes deleteCount elements starting at start, optionally inserting new items in their place, and returns the removed elements. Use slice to extract; use splice to insert or remove in place.