JavaScript Array Methods That You Need To Know

Array.from()

Convert an iterable into an array. Can also be done with the spread operator […iterable].

Array.isArray()

Check if a value is an array.

.includes()

Check if the array contains a given value.

 [1, 2, 7, -1, 4].includes(-1) // true

.forEach() & .map()

They both loop through an array. .forEach() is mainly for iterating over the loop. .map() returns a new array with the transformation.

.filter()

Return an array that is truthy with the given condition.

 [1, 2, 3, 5, 7, -1, 4].filter(value => value < 4); // [1, 2, 3, -1]

.reduce()

Probably the most versatile method of Array. It allows you to loop through an array, do any operations, and return anything you like.

 const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
 const fruitCounts = fruits.reduce((accumulator, fruit) => {
   accumulator[fruit] = (accumulator[fruit] || 0) + 1;
   return accumulator;
 }, {}); // fruitCounts is { apple: 3, banana: 2, orange: 1 }

.join()

Convert an array into a string.

.concat()

Return a new array with additional items. The difference with .push is that .concat doesn’t mutate the original array.

 const array = [1, 2, 3];
 const newArray = array.concat(4, 5); // [1, 2, 3, 4, 5]
 const anotherArray = array.concat([4, 5], [6]); // [1, 2, 3, 4, 5, 6]
 const nestedArray = array.concat([[4, 5]], [6]); // [1, 2, 3, [4, 5], 6]

.slice()

Retrieve part of the array using the optional arguments - .slice(startIndex, endIndex). startIndex is default to 0, and endIndex is default to the length of the array.

 const array = [1, 2, 3, 4, 5, 6, 7]
 const array1 = array.slice() // shallow copy of array [1, 2, 3, 4, 5, 6, 7]
 const array2 = array.slice(1, array.length - 1) // [2, 3, 4, 5, 6]
 const array3 = array.slice(-2) // last two values
 const array4 = array.slice(-10) // greater than the length, same as .slice()

.reverse()

Change an array to be in reverse order.

let array = [1, 2, 3, 4];
array.reverse(); // array is now [4, 3, 2, 1]

.flat()

Flatten a nested array. The default flatten level is 1.

const nestedArray = [1, [[[2, 3], 4], 5]];
const flattenedNestedArray = nestedArray.flat(); // [1, [[[2, 3], 4], 5]]
const flattenedNestedArrayL3 = nestedArray.flat(3); // [1, 2, 3, 4, 5]

.push() & .pop()

.push() - add items to the end of the array.

.pop() - remove the last item from the array.

let array = [1, 2, 3];
array.push(4, 5); // array is now [1, 2, 3, 4, 5]
array.pop(); // array is now [1, 2, 3, 4]

.shift() & .unshift()

.unshift() - add items to the beginning of the array.

.shift() - remove the first item from the array.

let array = [2, 3, 4];
array.unshift(0, 1); // array is now [0, 1, 2, 3, 4]
array.shift(); // array is now [1, 2, 3, 4]

.sort()

Sort an array alphabetically by default. Note that it modifies the original array. So the best practice is to make a copy using .slice() or the spread operator.

const users = [
  { id: 1, name: 'Alice', email: 'alice@example.com', isActive: true },
  { id: 2, name: 'Bob', email: 'bob@example.com', isActive: false },
  { id: 3, name: 'Charlie', email: 'charlie@example.com', isActive: true },
];

const activeUserEmailsSorted = users
  .filter(user => user.isActive) // filter to keep the active users
  .map(user => user.email.toUpperCase()) // keep the emails in uppercase only
  .sort(); // sort the emails alphabetically

// activeUserEmailsSorted is ["ALICE@EXAMPLE.COM", "CHARLIE@EXAMPLE.COM"]

To sort an array of numbers in ascending order

const numbers = [40, 100, 1, 6, 25, 10];
[...numbers].sort((a, b) => a - b); // [1, 6, 10, 25, 40, 100]