Useful JS array methods
There are a lot of useful array methods in JavaScript, but they can be hard to remember. Here’s a quick reference of some important ones.
Utility methods
isArray
Check if a variable is an array.
const array = [1, 2, 3, 4, 5];
console.log(Array.isArray(array));
// true
toString
Convert an array to a string.
const array = [1, 2, 3, 4, 5];
console.log(array.toString());
// 1,2,3,4,5
join
Convert an array into a string, with a given separator.
const array = [1, 2, 3, 4, 5];
console.log(array.join('|'));
// 1|2|3|4|5
Iteration methods
forEach
Loop through each element in an array, but don't create a new array.
const array = [1, 2, 3, 4, 5];
array.forEach((element) => {
console.log(element);
});
// 1
// 2
// 3
// 4
// 5
map
Loop through each element in an array and create a new array with the results.
const array = [1, 2, 3, 4, 5];
const newArray = array.map((element) => {
return element * 2;
});
console.log(newArray);
// [2, 4, 6, 8, 10]
filter
Loop through each element in an array and create a new array with the elements that match a condition.
const array = [1, 2, 3, 4, 5];
const newArray = array.filter((element) => {
return element > 2;
});
console.log(newArray);
// [3, 4, 5]
reduce
Loop through each element in an array and execute a reducer function on each element, passing the result of the previous iteration. At the end of the loop, the final result is returned.
The reduce function takes two arguments:
reducer
- a function to execute on each element in the arrayinitialValue
- the value to use as the first argument to the first call of the reducer function (optional)
In turn the reducer function takes two arguments:
accumulator
– the result of the previous iterationelement
– the current element
const array = [1, 2, 3, 4, 5];
function reducer(accumulator, element) {
return accumulator + element;
}
const total = array.reduce(reducer, 0);
console.log(total);
// 15
find
Loop through each element in an array and return the first element that matches a condition.
const array = [1, 2, 3, 4, 5];
const element = array.find((element) => {
return element > 2;
});
console.log(element);
// 3
findIndex
Loop through each element in an array and return the index of the first element that matches a condition.
const array = [1, 2, 3, 4, 5];
const index = array.findIndex((element) => {
return element > 2;
});
console.log(index);
// 2 (because JavaScript is zero-indexed)
some
Loop through each element in an array and return true if any element matches a condition.
const array = [1, 2, 3, 4, 5];
const result = array.some((element) => {
return element % 2 === 0;
});
console.log(result);
// true (because at least one element is even)
every
Loop through each element in an array and return true if every element matches a condition.
This example checks if every element in the array is even and will return false because 3 numbers are odd.
const array = [1, 2, 3, 4, 5];
const result = array.every((element) => {
return element % 2 === 0;
});
console.log(result);
// false
This example will return true
const array = [2, 4, 6, 8, 10];
const result = array.every((element) => {
return element % 2 === 0;
});
console.log(result);
// true
Manipulation methods
push
Add one or more elements to the end of an array.
const array = [1, 2, 3, 4, 5];
array.push(6);
console.log(array);
// [1, 2, 3, 4, 5, 6]
unshift
Add one or more elements to the beginning of an array.
const array = [1, 2, 3, 4, 5];
array.unshift(0);
console.log(array);
// [0, 1, 2, 3, 4, 5]
pop
Remove the last element from an array.
const array = [1, 2, 3, 4, 5];
array.pop();
console.log(array);
// [1, 2, 3, 4]
shift
Remove the first element from an array.
const array = [1, 2, 3, 4, 5];
array.shift();
console.log(array);
// [2, 3, 4, 5]
splice
Add or remove elements from an array at a specific index.
The splice function takes three arguments:
index
- the index to start changing the array atdeleteCount
- the number of elements to remove (optional), set to 0 if you want to add elementselement1, element2, ...
- the elements to add to the array (optional)
This example adds a new element at index 2.
const array = [1, 2, 3, 4, 5];
array.splice(2, 0, 2.5);
console.log(array);
// [1, 2, 2.5, 3, 4, 5]
This example removes the element at index 2.
const array = [1, 2, 3, 4, 5];
array.splice(2, 1);
console.log(array);
// [1, 2, 4, 5]
slice
Create a new array from part of an existing array
The slice function takes two arguments:
start
- the index to start the new array atend
- the index to end the new array at (optional), if you leave it blank it will slice to the end of the array
const array = [1, 2, 3, 4, 5];
const newArray = array.slice(2, 4);
console.log(newArray);
// [3, 4]
concat
Create a new array by merging two or more existing arrays.
You can pass as many arrays as you want in the concat function.
const array1 = [1, 2, 3];
const array2 = [4, 5];
const newArray = array1.concat(array2);
console.log(newArray);
// [1, 2, 3, 4, 5]
reverse
Reverse the order of the elements in an array.
const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array);
// [5, 4, 3, 2, 1]
Sorting & searching methods
sort
Sort the elements in an array.
By default, the sort function sorts the values as strings in alphabetical and ascending order.
You can also pass in a function to sort the elements in a different way. The function takes two arguments:
a
- the first element to compareb
- the second element to compare
The function should return a number, where:
- negative number -
a
should come beforeb
- positive number -
b
should come beforea
- 0 -
a
andb
are the same
Default sort
const array = [5, 4, 3, 2, 1];
array.sort();
console.log(array);
// [1, 2, 3, 4, 5]
Custom sort
const array = [1, 4, 3, 5, 2];
array.sort((a, b) => {
return a - b;
});
console.log(array);
// [1, 2, 3, 4, 5]
indexOf
Find the index of the first element in an array that matches a condition.
const array = [1, 2, 3, 4, 5, 3];
const index = array.indexOf(3);
console.log(index);
// 2 (because JavaScript is zero-indexed)
lastIndexOf
Find the index of the last element in an array that matches a condition.
const array = [1, 2, 3, 4, 5, 3]
const index = array.lastIndexOf(3);
console.log(index);
// 5 (because JavaScript is zero-indexed)
includes
Check if an array contains a specific element.
const array = [1, 2, 3, 4, 5];
const result = array.includes(3);
console.log(result);
// true
const result2 = array.includes(6);
console.log(result2);
// false
flat
Create a new array with any sub arrays flattened
const array = [1, 2, [3, 4], 5];
const newArray = array.flat();
console.log(newArray);
// [1, 2, 3, 4, 5]
You can optionally pass in a number to specify how many levels of nesting you want to flatten.
const array = [1, 2, [3, [4, 5]], 6];
const newArray = array.flat(1);
console.log(newArray);
// [1, 2, 3, [4, 5], 6]
flatMap
Create a new array by running a function on each element in an array and then flattening the result.
const array = [1, 2, 3, 4, 5];
const newArray = array.flatMap((element) => {
return [element * 2];
});
console.log(newArray);
// [2, 4, 6, 8, 10]