All JavaScript Array Methods (with Examples)

By /

In JavaScript, the array is an extremely commonly used data type.

You can use an array in a variety of tasks to store and access values with ease.

Some common tasks you want to do with arrays include:

  • Adding elements
  • Removing elements
  • Sorting elements
  • Transforming elements
  • Looping elements
  • Copying elements

And so much more.

The Array data structure comes with a bunch of helpful built-in methods.

You can use these methods to perform the most common tasks without spending time reinventing the wheel.

In this article, you are going to find all the array methods in JavaScript.

Each section quickly goes through the basic theory of the method. You are also going to learn the basic syntax of each method. Last but not least, each section consists of at least one useful example to support understanding.

In JavaScript, you can have two types of methods:

  • Static methods. These are called in the class itself.
  • Instance methods. These are called on the class instance.

There are 3 static array methods and 32 instance array methods in total.

In this guide, you are going to learn how to use each of these methods.

Notice that not all the methods are equally as useful. You do not need to know each method by heart.

However, I recommend reading through each method. You can always find something new or remember something you have already forgotten.

Anyway, let’s jump right into the array methods! We have a long list to cover.

Static Methods

In the context of arrays, the static method means the method is not tied to a particular instance of an array. In other words, you do not need an array object to call a static method.

Array.from()

The Array.from() method creates an array from an array-like object.

Syntax

Here is the basic syntax of the Array.from() method.

Array.from(arrayLike, mapFn)

Where:

  • arrayLike is an array-like object that is going to be converted to an array.
  • mapFn is an optional argument. It is an operation that is performed on each element before converting it to the array.

Let’s see a couple of examples.

Example

For instance, let’s convert a string to an array:

const arr = Array.from("ABCDE")
console.log(arr)

Output:

[ 'A', 'B', 'C', 'D', 'E' ]

As another example, let’s convert a lower-case string to an array of uppercase letters.

To do this, convert each character to uppercase and then convert the string to an array of characters.

This is possible by specifying mapFn as the second argument.

Here is how it looks in the code:

const arr = Array.from("alice", char => char.toUpperCase())

console.log(arr)

Output:

[ 'A', 'L', 'I', 'C', 'E' ]

Array.isArray()

Array.isArray() method checks whether an object is an array or not.

Syntax

Array.isArray(value)

Where:

  • value is the object you want to check.

Example

Here are some examples of checking different types of elements:

Array.isArray([1, 2, 3])       // true
Array.isArray("Hello")         // false
Array.isArray({test: "value"}) // false
Array.isArray(undefined)       // false

As you can see, only the first line evaluates true because the argument is an array.

Array.of()

Syntax

Array.of(e1, e2, /* ... ,*/ eN)

Where:

  • e1, e2, … , eN are elements that are inserted into an array. There can be as many arguments as you want.

Example

For instance, let’s create an array from three integers:

const arr = Array.of(1, 2, 3)
console.log(arr)

Output:

[ 1, 2, 3 ]

Now you know how the three static array methods work on JavaScript.

Next, let’s go through the list of instance methods. These are the array methods you can call on specific array objects.

Instance Methods

An instance method is a method that is called on a particular array object An instance method uses the instance information to perform a task, such as to sort the array.

Array.at()

The at() method takes an integer and returns the item at that index.

It works the same way as the square bracket accessing operator (e.g. myArr[0] = myArr.at(0))

You can use both positive and negative indexes to call the at() method. (Negative indexing means counting back from the last element of the array).

Syntax

myArray.at(index)

Where:

  • index is an integer that represents the index at which you want to retrieve an element.

The method returns the element.

Example

For instance:

const arr = ["A", "B", "C", "D", "E"]
const secondChar = arr.at(1)

console.log(secondChar)

Output:

B

The at() method is really useful when you want to access the latter elements of an array.

Instead of accessing them like this:

arr[arr.length-1]

You can use the at() method to make the expression look nicer:

arr[-1]

Array.concat()

In JavaScript, you can call concat() method on an array to merge one or more arrays into it.

Syntax

myArray.concat(a1, a2, ... , aN)

Where:

  • a1, a2, … , aN is an arbitrary number of arrays. These arrays are concatenated to myArray.

This method does not modify the original array. Instead, it creates a new array.

Example

For instance, let’s merge an array with another:

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]

const combo = arr1.concat(arr2)

console.log(combo)

Output:

[ 1, 2, 3, 4, 5, 6 ]

Array.copyWithin()

The copyWithin() method works such that it:

  • Copies a part of an array.
  • Puts the part into another position in the same array.
  • Returns the array without changing its length.

In plain English, you can use the copyWithin() method to perform actions such as “Copy the element at index 3 to index 0.”

Syntax

Here is the syntax of the copyWithin() method:

myArray.copyWithin(target, start, end)

Where:

  • target is the target index at which the copied elements are going to be placed.
  • start is the optional start index at which to start copying elements.
  • end is the optional end index at which to stop copying elements. If you leave this parameter out, copying will continue from the start to the end of the array.

Example

For instance, let’s copy the last three characters in an array to the beginning of the array:

const arr = ["A", "B", "C", "D", "E"]
const arrNew = arr.copyWithin(0, 2)

console.log(arrNew)

Output:

[ 'C', 'D', 'E', 'D', 'E' ]

Array.entries()

The entries() method returns an iterator that consists of key-value pairs for the array elements.

If you are unfamiliar with iterators in JavaScript, you are not going to understand this method. Here you can find more information about an iterator.

Syntax

myArray.entries()

This method takes no argument.

It returns an iterator object.

Example

For instance, let’s get the iterator of an array and use it to spit out the key-value information about each element in the array.

const arr = ["A", "B", "C"]
const iter = arr.entries()

console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

Output:

{ value: [ 0, 'A' ], done: false }
{ value: [ 1, 'B' ], done: false }
{ value: [ 2, 'C' ], done: false }

Array.every()

In JavaScript, you can use the array’s every() method to check if each element in the array satisfy a condition.

Syntax

myArray.every(criterion)

Where:

  • criterion is a function that returns a boolean value. This function is called on each element in the array. If each function call returns true, the method returns true because all elements satisfied the condition.

The every() method returns true if all values in the array satisfied the condition. Otherwise, it returns false.

Example

For instance, let’s check if the numbers in an array are all negative:

const arr = [-1, -5, -2]

console.log(arr.every(number => number < 0))

Output:

true

Array.fill()

The fill() method replaces array elements with static values starting from a specific index.

Syntax

myArray.fill(value, start, end)

Where:

  • value is the value that the array is going to be filled with.
  • start is an optional parameter. It specifies the index at which the filling should start. This is 0 by default.
  • end is also an optional parameter. It specifies at which index the filling should stop. By default, the filling continues all the way to the end of the array.

This method does not modify the original array. Instead, it creates a new array with the filled values and returns it.

Let’s see an example.

Example

For instance, let’s create a filled array where the first two elements come from the original array but the last three elements are filled with 0s.

Here is how it looks in the code:

const arr = [1, 2, 3, 4, 5]
const arrNew = arr.fill(0, 2, 5)

console.log(arrNew)

Output:

[ 1, 2, 0, 0, 0 ]

Array.filter()

You can use the filter() method to filter out values that do not meet a criterion.

This method returns a new array instead of modifying the original array.

The filter() method is one of the most commonly used array methods, so make sure you understand how it works.

Syntax

The basic syntax of calling the filter() method is as follows:

myArray.filter(criterion)

Where:

  • criterion is a function applied to each element in the array. Only the elements for which the function returns true end up in the result array.

Notice that this method does not modify the original array. Instead, it returns a new one.

Example

For instance, let’s filter even numbers in an array that has both odd and even numbers

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const arrNew = arr.filter((number) => number % 2 == 0)

console.log(arrNew)

Output:

[ 2, 4, 6, 8, 10 ]

Array.find()

The find() method returns the first array element that matches a condition.

This method returns the element which satisfies the condition. If no element does, it returns undefined.

Syntax

myArray.find(condition)

Where:

  • condition is a function. It takes an array element as its argument and returns a boolean.

The find() method executes the condition function on each element in the array. The first element at which the function returns true is returned.

Example

For instance, let’s find the first number greater than 100 in an array of numbers:

const arr = [1, 2, 4, 7, -6, 710, 819, 0, 7]

const vals = arr.find(number => number > 100)

console.log(vals)

Output:

700

Notice how this method only returns one element. It does not return all the numbers that are greater than 100.

Array.findIndex()

The findIndex() method is closely related to the previous chapter’s find() method.

The findIndex() method returns the first index of the element that meets a criterion.

If no number satisfies the criterion, the method returns -1.

Syntax

myArray.findIndex(condition)

Where:

  • condition is a function. It takes an array element as its argument and returns a boolean.

Example

For example, let’s find the index at which a number is greater than 100 in an array of numbers:

const arr = [1, 2, 4, 7, -6, 710, 819, 0, 7]

const vals = arr.findIndex(number => number > 100)

console.log(vals)

Output:

5

Array.flat()

In JavaScript, you can flatten a nested array using the flat() method.

This does not modify the original array. Instead, it returns a new flattened array.

Syntax

myArray.flat(depth)

Where:

  • depth is an optional argument. In a multidimensional array, the depth parameter specifies how deep to flatten the array. By default, the depth is 1.

Example

For instance, let’s create a 1D version of an array of arrays (2D array):

const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]

const flatArr = arr.flat()
console.log(flatArr)

Output:

[1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.flatMap()

The flatMap() method is a concise equivalent to chaining map() method and flat() method calls.

The flatMap() method first maps each element in a nested array. Then it flattens the nested array.

This method does not modify the original array. Instead, it returns a new one.

Syntax

myArray.flatMap(mapFN)

Where:

  • mapFn is a mapping function. This function is called for each element in the nested array to transform the values.

Example

For instance, given an array of arrays of numbers, let’s square each number and then flatten the array in one dimension.

Here is how it looks in the code:

const arr2D = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]

const newArr = arr2D.flatMap(row => row.map(n => n * n))

console.log(newArr)

Output:

[1, 4, 9, 16, 25, 36, 49, 64, 81]

This piece of code works such that it:

  • Takes each array of numbers.
  • Squares each number.
  • Flattens the squared arrays.

Without flatMap(), you would have to chain the operations together like this:

const arr2D = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]

const newArr = arr2D.map(row => row.map(n => n * n)).flat()

console.log(newArr)

Output:

[1, 4, 9, 16, 25, 36, 49, 64, 81]

Array.forEach()

In JavaScript, you can use the forEach() method to loop through an array more concisely.

The forEach() method acts as each element in the array.

Make sure to read my full guide to this method.

The method does not return anything. It is only used to call the action for each element.

Syntax

myArray.forEach(operation)

Where:

  • operation is a function that is called for each element in the array.

Example

For instance:

const arr = ["Alice", "Bob", "Charlie"]

arr.forEach(name => console.log(name))

Output:

Alice
Bob
Charlie

This piece of code corresponds to this for loop:

const arr = ["Alice", "Bob", "Charlie"]

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

As you can see, the forEach() method is much cleaner and shorter.

Array.includes()

You can use the includes() method to check if an array contains a specific value.

This method returns true if there is a match. Otherwise, it returns false.

Syntax

myArray.includes(searchElement, fromIndex)

Where:

  • searchElement is the value that you are looking for in the array.
  • fromIndex is an optional parameter. It specifies at which index to start looking for the search element.

Example

For instance, let’s see if an array of strings consists of the string “Alice”:

const arr = ["Alice", "Bob", "Charlie"]

console.log(arr.includes("Alice"))

Output:

true

Array.indexOf()

You can use the includes() method to check if an array contains a specific value.

More specifically, this method returns the index at which the element occurs. If the element is not found in the array, -1 is returned.

Syntax

myArray.indexOf(searchElement, fromIndex)

Where:

  • searchElement is the value that you are looking for in the array.
  • fromIndex is an optional parameter. It specifies at which index to start looking for the search element.

Example

For instance, let’s check which index “Alice” occurs in an array of strings (if any).

const arr = ["Alice", "Bob", "Alice"]

console.log(arr.indexOf("Alice"))

Output:

0

Array.join()

You can use the join() method to join array elements into a string.

Syntax

myArray.join(separator)

Where:

  • separator is a string that is inserted between each joined element. This can be a blank space or dash for example. This is an optional parameter. If you leave it out, a comma is used as a default separator.

Example

For instance, let’s join an array of characters in a bunch of ways:

const arr = ["H", "e", "l", "l", "o"]

console.log(arr.join(""))
console.log(arr.join("-"))
console.log(arr.join("."))

Output:

Hello
H-e-l-l-o
H.e.l.l.o

Array.keys()

The keys() method returns an iterator that consists of keys of the array elements.

Syntax

myArray.keys()

This method takes no arguments. It returns an iterator object that consists of the keys of the array.

Example

For example:

const arr = ["H", "e", "l", "l", "o"]

for (const key of arr.keys()) {
    console.log(key)
}

Output:

0
1
2
3
4

Array.lastIndexOf()

The lastIndexOf() method checks if an element occurs in an array and returns the index of the last such element.

This is similar to the indexOf() method from earlier.

Syntax

Here is the syntax of the lastIndexOf() method:

myArray.lastIndexOf(searchElement, fromIndex)

Where:

  • searchElement is the value that you are looking for in the array.
  • fromIndex is an optional parameter. It specifies at which index to start looking for the search element.

Example

For instance, given an array of numbers, let’s find the last index at which a number equals 3.

const arr = [10, 2, 3, 3, 3, 3]

const last = arr.lastIndexOf(3)

console.log(last)

Output:

5

Array.map()

The map() method lets you transform an array into another by calling a function on each element.

This method is very commonly used in JavaScript, so make sure you nail it.

Syntax

myArray.map(transformation)

Where:

  • transformation is a function called on each element in the array. The result of this function is a new element that is added to the result array.

Example

For instance, let’s square an array of numbers:

const arr = [1, 2, 3, 4, 5]
const newArr = arr.map(x => x * x)

console.log(newArr)

Output:

[ 1, 4, 9, 16, 25 ]

Array.pop()

You can remove the last element in an array in JavaScript by using the pop() method.

This method removes the last element of the array and returns the element.

Notice that this method does not return a new array! Instead, it changes the original one.

Syntax

Here is the syntax of the pop() method:

myArray.pop()

This method takes no arguments.

Example

For instance, given an array of numbers, let’s remove the last number and show it:

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

const removed = arr.pop()

console.log(removed)
console.log(arr)

Output:

5
[ 1, 2, 3, 4 ]

As you can see, the pop() method returned the last element.

This can be useful if you need to perform an action on the removed element.

Array.push()

To add an element to an array in JavaScript, use the push() method. It adds the element to the original array and thus does not return a new one.

This method returns the new length of the modified array.

Syntax

myArray.push(e1, e2, ..., e3)

Where:

  • e1, e2, …, e3 is an arbitrary number of elements pushed into an array.

Example

For instance, let’s add a new number to an array of numbers:

const arr = [1, 2, 3, 4, 5]
arr.push(6)

console.log(arr)

Output:

[ 1, 2, 3, 4, 5, 6 ]

Array.reduce()

The reduce() method folds an array to a single value.

It executes a “reducer” function on each element, passing the return value to the next element.

The reduce() method accumulates a result over the array. When there are no elements left, it returns the cumulative result.

A great example of using the reduce() method is by calculating the sum of an array.

By the way, the reduce() method is a slightly more advanced concept, and you should put in some time to understand learning it.

Syntax

myArray.reduce(operation)

Where:

  • operation is the reducer function that accumulates the result. This function should take two arguments:
    • An initial value (used as a partial result).
    • An array element.

Example

For instance, let’s calculate the sum of an array of numbers:

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((total, next) => total + next)

console.log(sum)

Output:

15

Array.reduceRight()

In the previous chapter, you learned what reduce() method does. Before reading this chapter, make sure to understand reduce().

The reduceRight() method performs reduce() from right to left.

Syntax

myArray.reduceRight(operation)

Where:

  • operation is the reducer function that accumulates the result. This function should take two arguments:
    • An initial value (used as a partial result).
    • An array element.

Example

In the previous chapter, you saw an example of how to sum an array of numbers using the reduce() method.

Now we could see an example of how to do the same with reduceRight(). However, this is boring because it produces the same result as the reduce() method.

Instead, let’s see a more illustrative example.

In this example, we flatten a nested array. However, we start from the right, that is, we add the last array elements as the first, and so on.

Here is how it looks in the code:

const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]

const newArr = arr.reduceRight((res, row) => res.concat(row))

console.log(newArr)

Output:

[ 7, 8, 9, 4, 5, 6, 1, 2, 3 ]

If you used the reduce() method on this task instead, you would get the numbers in ascending order.

Array.reverse()

In JavaScript, you can use the reverse() method to reverse the order of an array.

This method modifies the original array directly!

Syntax

myArray.reverse()

Example

For instance, let’s reverse an array of numbers:

const arr = [1, 2, 3]
arr.reverse()

console.log(arr)

Output:

[ 3, 2, 1 ]

Array.shift()

To remove the first element of an array in JavaScript, use the shift() method.

This removes the first element from the array directly. It then returns the removed element.

Syntax

myArray.shift()

Example

For instance, let’s remove the first number in an array of numbers:

const arr = [1, 2, 3]
const removed = arr.shift()

console.log(removed)
console.log(arr)

Output:

1
[ 2, 3 ]

As you can see, this method returns the removed element. You can store it for later use if necessary.

Array.slice()

The slice() method returns a (shallow) copy of a portion of an array. The return value is a new array with the copied elements.

This method does not modify the original array.

Syntax

myArray.slice(start, end)

Where:

  • start is an optional argument. It is the starting index of the slice.
  • end is an optional argument. It is the end index of the slice.

Example

For instance, let’s slice an array of characters in a bunch of ways:

const arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]

// Last five characters
arr.slice(5)     // [ 'F', 'G', 'H', 'I', 'J' ]

// 2nd, 3rd, and 4th character
arr.slice(1, 4)  // [ 'B', 'C', 'D' ]

// Last three characters
arr.slice(-3)    // [ 'H', 'I', 'J' ]

Array.some()

The some() method can be used to check if an array has at least one item that passes a test.

This method returns true if there is at least one element that matches the criterion. If there is none, false is returned.

Syntax

Here is the basic syntax of the some() method:

myArray.some(condition)

Where:

  • condition is a criterion function. This function is called one by one for each element in the array until it returns true.

If no item matches the criterion, the method returns false.

Example

For instance, let’s see if at least one number in an array is less than 0:

const arr = [1, 2, 0, 9, -5]
console.log(arr.some((num) => num < 0))

Output:

true

Array.sort()

The sort() method sorts the original array directly.

By default, it sorts elements in ascending order.

To change the default sorting order, you can pass the sort() method a sorting function as an argument.

Syntax

myArray.sort(comparison)

Where:

  • comparison is a function. This specifies the sorting order. This function compares two elements. Based on the comparison, the sort() method sets the element in their correct positions in the array.

Example

For instance, given an array of numbers, let’s sort them first in ascending order and then in descending order:

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

arr.sort()
console.log(arr)

arr.sort((a, b) => b > a)
console.log(arr)

Output:

[ 1, 2, 3, 4, 5, 6, 7, 8 ]
[ 8, 7, 6, 5, 4, 3, 2, 1 ]

Array.splice()

The splice() method changes the contents of an array. It does this by removing existing elements and adding new elements to the array.

This method modifies the array directly.

Syntax

myArray.splice(start, deleteCount, item1, item2, ..., itemN)

Where:

  • start is the starting index at which to start changing the contents of the array.
  • deleteCount is an optional argument. It specifies the number of elements to remove from the array starting at the start.
  • item1, item2, …, itemN are optional arguments. This can be any number of new elements to add to an array.

If you do not specify the elements to add, splice() only removes elements from an array.

Example

Here are some examples with useful code comments:

const arr = ["A", "B", "C", "D", "E", "F"]

// Replace first element with "N/A"
arr.splice(0, 1, "N/A")

console.log(arr)

// Remove 3 first elements and add XYZ as the first element
arr.splice(0, 3, "XYZ")
console.log(arr)

Output:

[ 'N/A', 'B', 'C', 'D', 'E', 'F' ]
[ 'XYZ', 'D', 'E', 'F' ]

Array.toLocaleString()

The toLocaleStrin() method returns a string that represents the contents of an array.

For instance, if an array consists of a date, this method converts it to a string in the correct local format.

Syntax

myArray.toLocaleString(locales, options)

Where:

  • locales is an optional parameter. This can be either a string with a BCP 47 language code or an array of those.
  • options is an optional parameter. This is an object that has configuration properties.
    • For numbers, please make sure to check this article.
    • For dates, feel free to look at this article.

Example

For instance, given an array of values, let’s produce a locale string:

const arr = [
    "Test",
    "Date",
    new Date('21 Dec 2021 14:12:00 UTC')
]

const locale = arr.toLocaleString('en', { timeZone: 'UTC' })

console.log(locale)

Output:

Test,Date,12/21/2021, 2:12:00 PM

Array.toString()

The toString() method converts an array to a string.

This method returns a string with an array of elements separated by commas.

Syntax

myArray.toString()

Example

For instance:

const arr = [1, 2, 3]

const string = arr.toString()

console.log(string)

This results in a string:

1,2,3

Array.unshift()

To add an element or elements to the beginning of an array in JavaScript, use the unshift() method.

This method modifies the original array.

The unshift() method returns the new length of the array.

Syntax

myArray.unshift(e1, e2, ... , eN)

Where:

  • e1, e2, … , eN is any number of elements to be added to the array.

Example

For instance, let’s add a number as the first element to an array of numbers:

const arr = [1, 2, 3]

arr.unshift(4)

console.log(arr)

Output:

[ 4, 1, 2, 3 ]

Array.values()

Array.values() returns the values of an array as an iterator.

Under the hood, an array element is a key-value pair.

As you learned earlier, there is a method called keys() that returns an iterator of array keys.

The values() method is the corresponding method to the keys() method.

Syntax

myArray.values()

Example

For instance, let’s grab the values iterator of an array of numbers:

const arr = ["Alice", "Bob", "Charlie"]

for (name of arr.values()) {
    console.log(name)
}

Output:

Alice
Bob
Charlie

Array[Symbol.iterator]()

By default, [Symbol.iterator]() returns the same as the values() method. That is, it returns the values of an array as an iterator object.

Syntax

myArray[Symbol.iterator]()

Example

For instance, let’s access the values of an array of strings:

const arr = ["Alice", "Bob", "Charlie"]

for (item of arr[Symbol.iterator]()) {
    console.log(item)
}

Output:

Alice
Bob
Charlie

Conclusion

That is a whole bunch of array methods!

I hope you found what you were looking for and perhaps learned something new!

Notice that this list did not cover the experimental array methods, that is:

  • groupBy
  • groupByToMap

These methods are still not supported by most browsers because they are at the experimental level.

Later on, there is a chance these will be added to the JavaScript language.

Scroll to Top