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 array
• initialValue - 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 iteration
• element – 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 at
• deleteCount - the number of elements to remove (optional), set to 0 if you want to add elements
• element1, 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 at
• end - 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 compare
• b - the second element to compare

The function should return a number, where:

• negative number - a should come before b
• positive number - b should come before a
• 0 - a and b 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]