JavaScript Array Methods

JavaScript array methods are built-in methods that help you add, remove, search, copy, combine, and rearrange elements in an array. They make it easier to work with collections of data without writing every operation from scratch.

For example, you can use push() to add an element, pop() to remove an element, slice() to copy part of an array, and sort() to arrange elements.

In this tutorial, you will learn 12 commonly used JavaScript array methods with practical examples and outputs.

What Are JavaScript Array Methods?

Array methods are built-in functions available on JavaScript arrays. They allow you to perform common operations on array elements.

Consider this example:

let fruits = ["Apple", "Banana", "Mango"];

fruits.push("Orange");

console.log(fruits);

Output:

["Apple", "Banana", "Mango", "Orange"]

The push() method adds "Orange" to the end of the array.

If you are new to arrays, read JavaScript Arrays to understand how elements are stored and accessed.

JavaScript push() Method

The push() method adds one or more elements to the end of an array. It modifies the original array and returns its new length.

Syntax:

array.push(element1, element2, ...);

Example:

let fruits = ["Apple", "Banana"];

let result = fruits.push("Mango", "Orange");

console.log(fruits);
console.log(result);

Output:

["Apple", "Banana", "Mango", "Orange"]
4

The method adds two elements to the array. The returned value, 4, is the new array length.

Use push() when you want to add elements without replacing existing values.

JavaScript pop() Method

The pop() method removes the last element from an array and returns the removed element. It modifies the original array.

Syntax:

array.pop();

Example:

let fruits = ["Apple", "Banana", "Mango"];

let removedFruit = fruits.pop();

console.log(fruits);
console.log(removedFruit);

Output:

["Apple", "Banana"]
Mango

The last element, "Mango", is removed and stored in removedFruit.

If you call pop() on an empty array, it returns undefined.

JavaScript shift() Method

The shift() method removes the first element from an array and returns the removed value. The remaining elements move one position toward the beginning.

Syntax:

array.shift();

Example:

let fruits = ["Apple", "Banana", "Mango"];

let removedFruit = fruits.shift();

console.log(fruits);
console.log(removedFruit);

Output:

["Banana", "Mango"]
Apple

The first element, "Apple", is removed from the array.

The shift() method is useful when processing a list from the beginning.

JavaScript unshift() Method

The unshift() method adds one or more elements to the beginning of an array. It modifies the original array and returns its new length.

Syntax:

array.unshift(element1, element2, ...);

Example:

let fruits = ["Banana", "Mango"];

let result = fruits.unshift("Apple");

console.log(fruits);
console.log(result);

Output:

["Apple", "Banana", "Mango"]
3

The element "Apple" is inserted at the beginning, and the new array length is 3.

The difference between push() and unshift() is that push() adds elements at the end, while unshift() adds them at the beginning.

JavaScript slice() Method

The slice() method returns a shallow copy of a selected portion of an array. It does not modify the original array.

Syntax:

array.slice(start, end);

start specifies the index where copying begins.
end specifies the index where copying stops. The end index is excluded.
If end is omitted, the method copies through the end of the array.

Example:

let fruits = ["Apple", "Banana", "Mango", "Orange"];

let selectedFruits = fruits.slice(1, 3);

console.log(selectedFruits);
console.log(fruits);

Output:

["Banana", "Mango"]
["Apple", "Banana", "Mango", "Orange"]

The method copies elements at indexes 1 and 2. The element at index 3 is excluded.

You can also use negative indexes to count backward from the end.

let numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(-2));

Output:

[40, 50]

The slice() method is useful when you want to extract elements without changing the original array.

JavaScript splice() Method

The splice() method adds, removes, or replaces elements in an array. Unlike slice(), it modifies the original array.

Syntax:

array.splice(start, deleteCount, item1, item2, ...);

start specifies the index where the operation begins.
deleteCount specifies how many elements to remove.
Additional arguments specify elements to insert.

Removing Elements with splice()

let fruits = ["Apple", "Banana", "Mango", "Orange"];

let removedFruits = fruits.splice(1, 2);

console.log(fruits);
console.log(removedFruits);

Output:

["Apple", "Orange"]
["Banana", "Mango"]

Starting at index 1, the method removes two elements.

Adding Elements with splice()

let fruits = ["Apple", "Mango"];

fruits.splice(1, 0, "Banana", "Orange");

console.log(fruits);

Output:

["Apple", "Banana", "Orange", "Mango"]

The method inserts two elements at index 1 without removing anything.

Replacing Elements with splice()

let fruits = ["Apple", "Banana", "Mango"];

fruits.splice(1, 1, "Orange");

console.log(fruits);

Output:

["Apple", "Orange", "Mango"]

The method removes "Banana" and replaces it with "Orange".

JavaScript concat() Method

The concat() method combines two or more arrays or adds individual values to create a new array. It does not modify the original arrays.

Syntax:

array1.concat(array2, array3, ...);

Example:

let fruits = ["Apple", "Banana"];
let vegetables = ["Carrot", "Potato"];

let food = fruits.concat(vegetables);

console.log(food);
console.log(fruits);

Output:

["Apple", "Banana", "Carrot", "Potato"]
["Apple", "Banana"]

The concat() method combines the two arrays into a new array called food. The original fruits array remains unchanged.

You can also concatenate individual values:

let numbers = [10, 20];

let result = numbers.concat(30, 40);

console.log(result);

Output:

[10, 20, 30, 40]

JavaScript includes() Method

The includes() method checks whether an array contains a specified value. It returns true if the value is found and false otherwise.

Syntax:

array.includes(searchElement, fromIndex);

Example:

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.includes("Banana"));
console.log(fruits.includes("Orange"));

Output:

true
false

The array contains "Banana", so the first result is true. It does not contain "Orange", so the second result is false.

You can also start searching from a specific index:

let numbers = [10, 20, 30, 40];

console.log(numbers.includes(20, 2));

Output:

false

The search starts at index 2, so the element at index 1 is not considered.

The includes() method is useful for checking whether a value exists before performing an operation.

JavaScript indexOf() Method

The indexOf() method returns the index of the first occurrence of a specified value. If the value is not found, it returns -1.

Syntax:

array.indexOf(searchElement, fromIndex);

Example:

let fruits = ["Apple", "Banana", "Mango", "Banana"];

console.log(fruits.indexOf("Banana"));
console.log(fruits.indexOf("Orange"));

Output:

1
-1

The first occurrence of "Banana" is at index 1. Since "Orange" is not in the array, its result is -1.

You can use indexOf() to locate a value before updating or removing it.

let fruits = ["Apple", "Banana", "Mango"];

let index = fruits.indexOf("Banana");

if (index !== -1) {
    fruits.splice(index, 1);
}

console.log(fruits);

Output:

["Apple", "Mango"]

This example finds "Banana" and removes it only if it exists.

JavaScript join() Method

The join() method combines all array elements into a string. You can specify a separator between the elements.

Syntax:

array.join(separator);

Example:

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.join());
console.log(fruits.join(" - "));
console.log(fruits.join(", "));

Output:

Apple,Banana,Mango
Apple - Banana - Mango
Apple, Banana, Mango

If you omit the separator, JavaScript uses a comma.

The join() method is useful when displaying array values as a sentence, a comma-separated list, or other formatted text.

JavaScript reverse() Method

The reverse() method reverses the order of elements in an array. It modifies the original array and returns the same array.

Syntax:

array.reverse();

Example:

let numbers = [10, 20, 30, 40];

numbers.reverse();

console.log(numbers);

Output:

[40, 30, 20, 10]

The first element becomes the last, and the last becomes the first.

If you need to reverse an array without changing the original, create a copy first:

let numbers = [10, 20, 30, 40];

let reversedNumbers = numbers.slice().reverse();

console.log(reversedNumbers);
console.log(numbers);

Output:

[40, 30, 20, 10]
[10, 20, 30, 40]

Here, slice() creates a shallow copy before reverse() changes the order.

JavaScript sort() Method

The sort() method sorts the elements of an array in place and returns the same array. By default, it sorts elements as strings in ascending order according to their UTF-16 code units.

Syntax:

array.sort(compareFunction);

Sorting Strings

let fruits = ["Mango", "Apple", "Banana", "Orange"];

fruits.sort();

console.log(fruits);

Output:

["Apple", "Banana", "Mango", "Orange"]

The strings are sorted alphabetically according to their string comparison order.

Sorting Numbers in Ascending Order

Default sorting does not perform numeric comparison. For example, [100, 20, 3] would not be sorted numerically as expected.

Use a comparison function to sort numbers in ascending order.

let numbers = [100, 20, 3, 45, 8];

numbers.sort((a, b) => a - b);

console.log(numbers);

Output:

[3, 8, 20, 45, 100]

The expression a - b tells JavaScript to place smaller numbers before larger numbers.

Sorting Numbers in Descending Order

let numbers = [100, 20, 3, 45, 8];

numbers.sort((a, b) => b - a);

console.log(numbers);

Output:

[100, 45, 20, 8, 3]

The expression b - a places larger numbers before smaller numbers.

For more advanced examples of functions passed into other functions, read JavaScript Callback Functions.

JavaScript Array Methods Comparison

The following table summarizes the behavior of the 12 array methods covered in this tutorial.

Method	Purpose	Modifies original array?
`push()`	Adds elements to the end	Yes
`pop()`	Removes the last element	Yes
`shift()`	Removes the first element	Yes
`unshift()`	Adds elements to the beginning	Yes
`slice()`	Copies a selected portion	No
`splice()`	Adds, removes, or replaces elements	Yes
`concat()`	Combines arrays or values	No
`includes()`	Checks whether a value exists	No
`indexOf()`	Finds the first matching index	No
`join()`	Combines elements into a string	No
`reverse()`	Reverses element order	Yes
`sort()`	Sorts array elements	Yes

Methods that modify the original array are often called mutating methods. Methods such as slice() and concat() return new results without changing the original array.

For a deeper understanding of how JavaScript functions transform data, explore JavaScript Higher-Order Functions and JavaScript Pure Functions.

Frequently Asked Questions

What are array methods in JavaScript?

Array methods are built-in operations that help you add, remove, search, combine, copy, and rearrange array elements.

What is the difference between push() and pop()?

push() adds elements to the end of an array, while pop() removes and returns the last element.

What is the difference between slice() and splice()?

slice() returns a shallow copy of a selected portion without changing the original array. splice() changes the original array by adding, removing, or replacing elements.

What is the difference between includes() and indexOf()?

includes() returns a Boolean value indicating whether an element exists. indexOf() returns the first matching index or -1 if the value is not found.

Does sort() arrange numbers correctly by default?

No. The default sort() method compares elements as strings. Use sort((a, b) => a - b) for numeric ascending order.

Which array methods modify the original array?

push(), pop(), shift(), unshift(), splice(), reverse(), and sort() modify the original array.

How can you combine two arrays in JavaScript?

You can use concat() to create a new array containing elements from both arrays.