JavaScript Array Methods
Arrays come with many built-in methods. Some modify the original array. Others return a new one. This page covers the most useful ones.
Mutating vs non-mutating
It helps to know which methods change the original array and which leave it alone.
Mutating (modifies the original): push, pop, shift, unshift, splice, sort, reverse
Non-mutating (returns a new value): map, filter, slice, concat, flat, flatMap, find, includes
Adding and removing elements
.push()
Adds one or more items to the end of an array. Returns the new length.
const numbers = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]
.pop()
Removes and returns the last item.
const numbers = [1, 2, 3];
const removed = numbers.pop();
console.log(numbers); // [1, 2]
console.log(removed); // 3
.shift()
Removes and returns the first item.
const numbers = [1, 2, 3, 4, 5];
const first = numbers.shift();
console.log(numbers); // [2, 3, 4, 5]
console.log(first); // 1
.unshift()
Adds one or more items to the beginning. Returns the new length.
const numbers = [3, 4, 5];
numbers.unshift(1, 2);
console.log(numbers); // [1, 2, 3, 4, 5]
.splice()
Removes, replaces, or inserts elements at any position.
// splice(startIndex, deleteCount, ...itemsToInsert)
const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // insert 'Feb' at index 1, delete nothing
console.log(months); // ['Jan', 'Feb', 'March', 'April']
Combining and slicing
.concat()
Merges two or more arrays into a new array.
const a = [1, 2];
const b = [3, 4, 5];
const combined = a.concat(b);
console.log(combined); // [1, 2, 3, 4, 5]
The spread operator does the same thing and is often cleaner: [...a, ...b].
.slice()
Returns a portion of an array as a new array. Does not modify the original.
const numbers = [0, 1, 2, 3, 4, 5];
const middle = numbers.slice(1, 4);
console.log(middle); // [1, 2, 3]
console.log(numbers); // [0, 1, 2, 3, 4, 5] (unchanged)
.reverse()
Reverses the array in place.
const letters = ['a', 'b', 'c'];
letters.reverse();
console.log(letters); // ['c', 'b', 'a']
Searching
.indexOf()
Returns the index of the first match, or -1 if not found.
const names = ['Anna', 'Pete', 'Jane', 'Luna'];
console.log(names.indexOf('Jane')); // 2
console.log(names.indexOf('Bob')); // -1
.includes()
Returns true if the array contains the value. Simpler than indexOf when you just need a yes or no.
const colours = ['red', 'green', 'blue'];
console.log(colours.includes('green')); // true
console.log(colours.includes('purple')); // false
.find()
Returns the first element that satisfies a condition. Returns undefined if nothing matches.
const users = [
{ id: 1, name: 'Anna' },
{ id: 2, name: 'Joe' },
];
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: 'Joe' }
.findIndex()
Like find(), but returns the index instead of the element. Returns -1 if nothing matches.
const index = users.findIndex(u => u.id === 2);
console.log(index); // 1
.some()
Returns true if at least one element passes the test.
const ages = [12, 25, 8, 30];
console.log(ages.some(age => age >= 18)); // true
.every()
Returns true only if every element passes the test.
const ages = [12, 25, 8, 30];
console.log(ages.every(age => age >= 18)); // false
Accessing elements
.at()
Access elements by position, including from the end using negative numbers.
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(0)); // 1
console.log(arr.at(-1)); // 5 (last element)
console.log(arr.at(-2)); // 4
Flattening
.flat()
Flattens nested arrays by one level by default. Pass a depth to go deeper.
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6]
.flatMap()
Maps each element using a function, then flattens the result by one level. Useful when your mapping function returns arrays.
const sentences = ['hello world', 'foo bar'];
const words = sentences.flatMap(s => s.split(' '));
console.log(words); // ['hello', 'world', 'foo', 'bar']
Type checking
Array.isArray()
Returns true if the value is an array. Useful because typeof [] returns 'object', which is not helpful.
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false
console.log(Array.isArray({ a: 1 })); // false