All 22 JavaScript Array Methods Explained with Examples

Whether you need a refresher or are learning JavaScript make sure to review all of these helpful 22 array methods today.

forEach()

This is like a for loop but a much cleaner syntax. It will loop thorough all the items in the array but does not return a new array:

const arr = [1, 2, 3, 4];

arr.forEach(item => {
  console.log(item); 
});

Output:

includes()

When you need to check if an array contains something, instead of looping through it all, you can call .includes(). This will return a boolean and will loop through all the items under the hood.

const arr = [1, 2, 3, 4];

arr.includes(2); // output: true
arr.includes(7); // output: false

filter()

This is a very handy tool you want to remove things based on an condition from any array. This will loop through the array and return a new array that satisfies the condition and does not modify the array it is looping over. In the example below we are filtering everything that is greater than or equal to 10.

const arr = [1, 10, 5, 3, 6, 1, 32];

// item(s) greater than 3
const filteredArray = arr.filter(num => num >= 10);
console.log(filteredArray); // output: [1, 5, 3, 6, 1]

console.log(arr); // output: [1, 10, 5, 3, 6, 1, 32]

map()

Map is a very simple and commonly used array method in React. What .map() does is it loops over an array and give you the power to make any changes and returns a new array with the changes in the same order. Note this does not modify the array it was looped over.

const arr = [1, 2, 3, 4, 5, 6];

// add one to every element
const oneAdded = arr.map(num => num + 1);
console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]

console.log(arr); // output: [1, 2, 3, 4, 5, 6]

In React we usually loop over an array of objects and return JSX with the data.

reduce()

Reduce is a little bit tricky to explain and is one of those that you have to write it a few times until you really get it. So here is a MDN definition of .reduce():

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value

In simple terms it's a loop with an extra variable/argument which holds some value during the loop and returns the value at the end. Note this does not modify the existing array.

const arr = [1, 2, 3, 4, 5, 6];

const sum = arr.reduce((total, value) => total + value, 0);
console.log(sum); // 21

some()

Some is a simple array method that is like a .includes() but instead of checking for a specific value it will check against a condition. Once the condition is met just once it will break the loop and return a boolean, either true or false.

const arr = [1, 2, 3, 4, 5, 6];

const greaterThanFive = arr.some(num => num > 4);
console.log(greaterThanFive); // output: true

every()

Every is like .some() but the slight difference is that in order for this to return a true every item in the array must satisfy the condition, otherwise it will return false.

const arr = [1, 2, 3, 4, 5, 6];

const allOverFive = arr.every(num => num > 4);
console.log(allOverFive); // output: false

sort()

As the name suggests this method is used to sort the items in the array either in ascending or decending order.

const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];

// sort in descending order
descOrder = arr.sort((a, b) => a > b);
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

// sort in ascending order
ascOrder = alpha.sort((a, b) => a > b);
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

Array.isArray()

This method comes in handy something when we're not sure what type of data we have. If we wanted to do array operations first we'd have to check whether it is an array or not.

console.log(Array.isArray({ hello: 'world' })) // false
console.log(Array.isArray(['hello', 'world'])) // true

push()

Like it's name, this method will push an item into an array. The key things to remember is it can only push one at a time, it will push to the end of the array and it modifies the array it is called on.

const arr = [1, 2, 3, 4, 5];

arr.push(6);
console.log(arr); // output: [1, 2, 3, 4, 5, 6]

pop()

This method will pop an item from an array, meaning it will remove the last item from the array it is called on. The key things to remember is it can only pop one item at a time, it will pop form the end of the array and it modifies the array it is called on.

const arr = [1, 2, 3, 4, 5, 6];

const poppedValue = arr.pop();
console.log(arr); // output: [1, 2, 3, 4, 5]
console.log(poppedValue); // output: 6

shift()

const arr = [1, 2, 3, 4, 5, 6];

const poppedValue = arr.pop();
console.log(arr); // output: [1, 2, 3, 4, 5]
console.log(poppedValue); // output: 6

unshift()

const arr = [1, 2, 3, 4, 5, 6];

const poppedValue = arr.pop();
console.log(arr); // output: [1, 2, 3, 4, 5]
console.log(poppedValue); // output: 6

splice()

This method is very helpful and can be used for two different use cases. First use case is to remove n number of elements in the array at a specific index:

// Remove
const arr = [1, 2, 3, 4, 5]
const splicedArr = arr.splice(2, 2)
console.log(splicedArr) // output: [1, 2, 5]

The second use case is to replace & insert at a specific index:

// Replace & Insert
const arr = [1, 10, 23, 5]
const splicedArr = arr.splice(1, 2, 2, 3, 4)
console.log(splicedArr) // output: [1, 2, 3, 4, 5]

Note in both uses cases it modifies the existing array.

slice()

This method slices a shallow copy of an array, meaning you can get a subset of an existing array starting with the specificed index. For example:

const arr = [1, 2, 3, 4, 5]
const slicedArr = arr.slice(2)
console.log(slicedArr) // output: [3, 4, 5]

With the second parameter you can specify start to end of the array, the end being the optional parameter.

const arr = [1, 2, 3, 4, 5]
const slicedArr = arr.slice(2, 3)
console.log(slicedArr) // output: [3]

Note in both cases it returns a new array and does not modify the array it was called on.

concat()

This method is a simple method that joins two arrays without modifying either arrays, it simply creates a new one.

const arr1 = [1, 2]
const arr2 = [3, 4, 5]
const combinedArr = arr1.concat(arr2)
console.log(combinedArr) // output: [1, 2, 3, 4, 5]

flat()

This method creates a new array making sure the array isn't nested up to a certain depth. For example:

const arr = [1, [2, 3], [4, 5]]
const flattenedArr = arr.flat(1)
console.log(flattenedArr) // output: [1, 2, 3, 4, 5]

join()

This method joins all the elements into a string seperated by what's passed in the parameter and returns the string. For example:

const arr = [1, 2, 3, 4, 5]
const joinedArr = arr.join(' | ')
console.log(joinedArr) // output: '1 | 2 | 3 | 4 | 5'

find()

This method will loop through the items in the array and returns the first value that satisfies what you are looking for. You can pass things such as a specific value or a callback function.

const arr = [1, 2, 3, 4, 5]
const firstGreaterThanThree = arr.find((num) => num > 3)
constole.log(firstGreaterThanThree) // output: 4

indexOf()

This method will search an array and return the index number of the item you were looking for.

const arr = [1, 2, 3, 4, 5]
const whereIsThree = arr.find(3)
console.log(whereIsThree) // output: 2

toString()

This is similar to .join() but and it will return a string representation of the array seperated by commas.

const arr = [1, 2, 3, 4, 5]
const stringArr =  arr.toString()
console.log(stringArr) // output: '1,2,3,4,5'

fill()

This method will fill all the elements of an array with the value specified. It takes in three parameters: value, start (optional), end (optional)

const arr = [1, 2, 3, 4, 5]
arr.fill(0, 1, 3)
console.log(arr) // output: [1, 0, 0, 4, 5]

These are all the Array methods in JavaScript so if you ever get confused just bookmark this page and come back to it anytime. If you're just learning JavaScript make sure to checkout Learn JavaScript in 4 Weeks: Beginners Guide.

Happy learning!