Arrays in JavaScript

This page is a scan list for day-to-day array work. For copying and combining collections with rest/spread, see Destructuring and spread.

Iterate

Approach	When to use
`for (const x of arr)`	Default over dense arrays and iterables
`arr.forEach(fn)`	Side effects; cannot `break`
`for (let i = 0; i < arr.length; i++)`	Need index or sparse holes
`for (const i of arr.keys())`	Index iterator
`arr[Symbol.iterator]()`	Manual iterator protocol

Avoid for..in on arrays—it walks enumerable keys, not just indices.

1
const arr = [1, 2, 3];
2
for (const val of arr) console.log(val);
3
arr.forEach((val) => console.log(val));

Create

1
const literal = [1, 2, 3];
2
Array.from("foo"); // ["f", "o", "o"]
3
Array.from([1, 2, 3], (x) => x + x); // [2, 4, 6]
4
Array.from({ length: 5 }, (_, i) => i); // [0, 1, 2, 3, 4]

A literal [a, b, c] behaves like an object with numeric keys 0..length-1 and a length property. Array(n) creates a sparse array with length n and no index properties—map and friends skip missing indices.

Mutate ends and middle

Method	Effect
`push(...items)`	Add at end; returns new length
`pop()`	Remove last; returns item
`unshift(...items)`	Add at start; returns new length
`shift()`	Remove first; returns item
`splice(start, deleteCount, ...items)`	Remove/replace/insert; returns removed slice
`fill(value, start, end)`	Overwrite range in place

1
let arr = [1, 2, 3, 4, 5];
2
arr.pop(); // 5 → [1, 2, 3, 4]
3
arr.shift(); // 1 → [2, 3, 4]
4
arr.push(6); // [2, 3, 4, 6]
5
arr.splice(1, 2, 9); // removed [3, 4] → [2, 9, 6]

Assigning arr[i] = x grows the array with empty slots: const a = []; a[2] = 3 → [empty × 2, 3].

Copy, concat, and slice

Method	Mutates?
`slice(start, end)`	No—shallow copy of range
`concat(...arrays)`	No—new array
`arr.slice()`	Shallow copy of whole array

1
const arr = [1, 2, 3];
2
const copy = arr.slice();
3
const merged = arr.concat([4, 5]);

Search and membership

Non-mutating unless noted.

Method	Returns
`indexOf`, `lastIndexOf`	Index or `-1`
`includes`	Boolean (`NaN`-safe)
`find(fn)`, `findIndex(fn)`	First match or `undefined` / `-1`
`findLast(fn)`, `findLastIndex(fn)`	From end (ES2023)
`at(index)`	Element; negative index from end (ES2022)

1
const nums = [5, 12, 8, 130, 44];
2
nums.find((n) => n > 10); // 12
3
nums.findLast((n) => n > 10); // 44
4
nums.at(-1); // 44

Non-mutating updates (ES2023)

These return a new array and leave the original unchanged—useful when you hold shared references or React state.

Method	Like
`toSorted(compareFn?)`	`sort`
`toReversed()`	`reverse`
`toSpliced(start, deleteCount, ...items)`	`splice`
`with(index, value)`	`arr[i] = value`

1
const months = ["March", "Jan", "Feb", "Dec"];
2
months.toSorted(); // ["Dec", "Feb", "Jan", "March"]
3
months; // unchanged
4

5
const ids = [1, 2, 3];
6
ids.with(1, 99); // [1, 99, 3]

Shape and join

Method	Notes
`flat(depth?)`, `flatMap(fn)`	Flatten nested arrays
`join(sep?)`	Default separator `","`
`reverse()`	In place
`sort(compareFn?)`	In place; default string sort

1
[1, 2, [3, 4]].flat(); // [1, 2, 3, 4]
2
["it's Sunny in", "", "California"].flatMap((s) => s.split(" "));

Higher-order methods

Method	Result shape
`map(fn)`	Same length, transformed
`filter(fn)`	Same order, possibly shorter
`every(fn)`, `some(fn)`	Boolean
`reduce(fn, init?)`, `reduceRight(fn, init?)`	Single accumulated value

1
[1, 4, 9].map((x) => x * 2); // [2, 8, 18]
2
["a", "bb", "ccc"].filter((s) => s.length > 1); // ["bb", "ccc"]
3
[1, 2, 3, 4].reduce((acc, n) => acc + n, 0); // 10

Sparse-array pitfall

1
Array(10).map((_, i) => i); // array of 10 empty slots — callback never runs
2
Array.from({ length: 10 }, (_, i) => i); // [0..9]
3
Array.from(Array(10).keys()); // [0..9]

Iterators and metadata

API	Purpose
`keys()`, `values()`, `entries()`	Index / value / `[index, value]` iterators
`length`	Element count (not always “defined” elements)
`Array.isArray(x)`	Type check

Continue with Set in JavaScript.