Lesson 5: Array Methods, Part 1: Add, Remove, Search, Copy

Some array methods change the array in place (mutating: push, pop, shift, unshift, splice, sort, reverse, fill); others return a new array or value and leave the original alone. Knowing which is which prevents many bugs.

Adding and removing

push(x), pop()

Add to or remove from the end. push returns the new length; pop returns the removed item.

const a = [1, 2];
console.log(a.push(3, 4));
console.log(a.pop());
console.log(a);

Output:

4
4
[ 1, 2, 3 ]

unshift(x), shift()

Add to or remove from the start.

const a = [2, 3];
a.unshift(1);
console.log(a);
console.log(a.shift(), a);

Output:

[ 1, 2, 3 ]
1 [ 2, 3 ]

splice(start, deleteCount, ...items)

The all-purpose editor: remove and/or insert at any position. It returns the removed items.

const a = ["a", "b", "c", "d"];
console.log(a.splice(1, 2));
console.log(a);
a.splice(1, 0, "X", "Y");
console.log(a);
a.splice(-1, 1, "Z");
console.log(a);

Output:

[ 'b', 'c' ]
[ 'a', 'd' ]
[ 'a', 'X', 'Y', 'd' ]
[ 'a', 'X', 'Y', 'Z' ]

fill(value, start, end)

Set many positions to one value.

console.log(new Array(4).fill(0));
console.log([1, 2, 3, 4, 5].fill(9, 1, 3));

Output:

[ 0, 0, 0, 0 ]
[ 1, 9, 9, 4, 5 ]

Copying and combining

slice(start, end)

A copy of part of an array (original untouched).

const a = [10, 20, 30, 40, 50];
console.log(a.slice(1, 3));
console.log(a.slice(-2));
console.log(a.slice());

Output:

[ 20, 30 ]
[ 40, 50 ]
[ 10, 20, 30, 40, 50 ]

concat() and the spread operator ...

Join arrays into a new one.

const a = [1, 2], b = [3];
console.log(a.concat(b, [4, 5]));
console.log([...a, ...b, 99]);
const copy = [...a];
copy.push(0);
console.log(a, copy);

Output:

[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 99 ]
[ 1, 2 ] [ 1, 2, 0 ]

const b = a does not copy an array: both names refer to the same array. Copy with [...a] or a.slice(). Copies are shallow; use structuredClone for nested data.

Searching

indexOf(x), lastIndexOf(x), includes(x)

Position of an item (or -1), and a yes/no check. includes also finds NaN.

const a = [5, 8, 5, NaN];
console.log(a.indexOf(5), a.lastIndexOf(5), a.indexOf(9));
console.log(a.includes(8), a.includes(NaN), a.indexOf(NaN));

Output:

0 2 -1
true true -1

find(fn), findIndex(fn), findLast(fn)

The first item (or position) for which the test function returns true. undefined / -1 if none.

const people = [{ n: "Ram", age: 17 }, { n: "Sita", age: 21 }, { n: "Hari", age: 25 }];
console.log(people.find((p) => p.age > 18));
console.log(people.findIndex((p) => p.n === "Hari"));
console.log(people.findLast((p) => p.age > 18));
console.log(people.find((p) => p.age > 99));

Output:

{ n: 'Sita', age: 21 }
2
{ n: 'Hari', age: 25 }
undefined

at(i)

An item by position, with negative numbers counting from the end.

const a = ["a", "b", "c"];
console.log(a.at(0), a.at(-1), a.at(5));

Output:

a c undefined

Making arrays

Array.from(iterable, mapFn)

Make an array from anything iterable, or from a length.

console.log(Array.from("abc"));
console.log(Array.from({ length: 5 }, (_, i) => i * i));
console.log(Array.from(new Set([1, 1, 2])));

Output:

[ 'a', 'b', 'c' ]
[ 0, 1, 4, 9, 16 ]
[ 1, 2 ]

Array.of(), new Array(n), Array.isArray()

Other ways to make and test arrays.

console.log(Array.of(7));
console.log(new Array(3));
console.log(Array.isArray([]), Array.isArray("a"));

Output:

[ 7 ]
[ <3 empty items> ]
true false

Destructuring

Pull items out of an array into variables, skip some, collect the rest, swap values.

const [first, , third, ...rest] = [10, 20, 30, 40, 50];
console.log(first, third, rest);
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);

Output:

10 30 [ 40, 50 ]
2 1

length

Setting length shortens or lengthens an array.

const a = [1, 2, 3, 4];
a.length = 2;
console.log(a);
console.log([1, 2, 3].length);

Output:

[ 1, 2 ]
3

Try it yourself

1. Remove all the duplicates from an array while keeping the order (use includes or a Set).
2. Rotate [1, 2, 3, 4, 5] left by two places using slice and spread.
3. Insert an item in the middle of an array without changing the original.

Next lesson: array iteration and transformation.