Skip to main content

Array Methods

JavaScript provides a variety of methods that can be used to manipulate arrays.

These methods can be used to add, remove, and replace elements in an array, merge arrays, flatten arrays, and more.

In this tutorial, we'll explore the methods available to manipulate arrays in JavaScript.

Let's first take a look at the methods that can be used to convert an array to a string.

Converting Arrays to Strings​

You can convert an array to a string using the toString() method. This method converts each element of the array to a string, separates them with commas, and returns a single string.

As an example:

let fruits = ["apple", "banana", "orange"];
let fruitsString = fruits.toString();
console.log(fruitsString); // 'apple,banana,orange'

You can also use the join() method to convert an array to a string with a specified separator.

The join() method takes a separator as an argument and returns a string that separates each element of the array with the specified separator.

let fruits = ["apple", "banana", "orange"];
let fruitsString = fruits.join(" | ");
console.log(fruitsString); // 'apple | banana | orange'

In this example:

  • We use the join() method to convert the fruits array to a string with a pipe symbol (|) as the separator.
  • The resulting string is 'apple | banana | orange'.

Popping and Pushing​

push() and pop() are methods used to add and remove elements from the end of an array, respectively.

JavaScript Array push()​

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

As an example:

let fruits = ["apple", "banana"];
let length = fruits.push("orange", "mango");
console.log(length); // 4
console.log(fruits); // ['apple', 'banana', 'orange', 'mango']

In this example:

  • We use the push() method to add the elements 'orange' and 'mango' to the end of the fruits array.
  • The push() method returns the new length of the array, which is 4.

Array pop()​

The pop() method removes the last element from an array and returns that element.

As an example:

let fruits = ["apple", "banana", "orange", "mango"];
let lastFruit = fruits.pop();
console.log(lastFruit); // 'mango'
console.log(fruits); // ['apple', 'banana', 'orange']

In this example:

  • We use the pop() method to remove the last element ('mango') from the fruits array.
  • The pop() method returns the removed element, which is 'mango'.
info

Note that push() and pop() change the original array directly. To avoid modifying the original array, use slice() to make a copy and use push() and pop() on the copied array.

Shifting Elements​

In JavaScript, there are several methods that allow you to shift the elements of an array.

These methods are:

Array shift()​

The shift() method is a JavaScript array method that removes the first element from an array and returns the removed element.

The remaining elements in the array are shifted down by one index.

As an example:

let numbers = [1, 2, 3];
let firstNumber = numbers.shift();
console.log(firstNumber); // 1
console.log(numbers); // [2, 3]

In this example:

  • We have an array of numbers ([1, 2, 3]).
  • We use the shift() method to remove the first element (1) and assign it to the firstNumber variable. The shift() method modifies the original array, so after it's called, the numbers array contains only [2, 3].
note

If the array is empty, shift() returns undefined and it can have unintended consequences like other methods that modify the original array.

Array unshift()​

The unshift() method is a JavaScript array method that adds one or more elements to the beginning of an array and returns the new length of the array.

The existing elements in the array are shifted to higher indexes to make room for the new elements.

As an example:

let numbers = [1, 2, 3];
let newLength = numbers.unshift(0, -1);
console.log(newLength); // 5
console.log(numbers); // [0, -1, 1, 2, 3]

In this example:

  • We have an array of numbers ([1, 2, 3]).
  • We use the unshift() method to add the elements 0 and -1 to the beginning of the array.
  • The unshift() method returns the new length of the array, which is 5.
  • After the method is called, the numbers array contains [0, -1, 1, 2, 3].

Changing Elements​

You can change the value of an element in a JavaScript array by accessing the element using its index and assigning a new value to it.

As an example:

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ['apple', 'banana', 'orange']

fruits[1] = "pear";
console.log(fruits); // ['apple', 'pear', 'orange']

In this example:

  • We have an array of fruits (['apple', 'banana', 'orange']).
  • We use square brackets ([]) and the index 1 to access the second element in the array ('banana') and assign the new value 'pear' to it.
  • The resulting array is ['apple', 'pear', 'orange'].
note

JavaScript arrays are zero-indexed, so the first element has an index of 0, the second has an index of 1, and so on. In the given example, index 1 refers to the second element ('banana').

Array length​

The length property of a JavaScript array returns the number of elements in the array.

You can use this property to check the size of an array or to resize the array by setting its value.

Here's an example of using the length property to check the size of an array:

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5

In this example:

  • We have an array of numbers ([1, 2, 3, 4, 5]).
  • We use the length property to determine the number of elements in the array, which is 5.

Here's an example of using the length property to resize an array:

let numbers = [1, 2, 3];
console.log(numbers.length); // 3

numbers.length = 5;
console.log(numbers); // [1, 2, 3, undefined, undefined]
console.log(numbers.length); // 5

numbers.length = 2;
console.log(numbers); // [1, 2]
console.log(numbers.length); // 2

In this example:

  • We start with an array of numbers ([1, 2, 3]) and use the length property to resize the array to 5 elements.
  • The new elements have the value undefined.
  • We then resize the array back to 2 elements, discarding the last 3 elements.

Array delete()​

The delete operator in JavaScript can be used to remove an element from an array. However, it's important to note that this method does not actually change the length of the array, it simply sets the value of the deleted element to undefined.

As an example:

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ['apple', 'banana', 'orange']

delete fruits[1];
console.log(fruits); // ['apple', undefined, 'orange']
console.log(fruits.length); // 3

In this example:

  • We have an array of fruits (['apple', 'banana', 'orange']).
  • We use the delete operator to remove the second element in the array (which has an index of 1).
  • The resulting array is ['apple', undefined, 'orange'].
  • Note that the length of the array is still 3.

Merging (Concatenating) Arrays​

You can concatenate (merge) two or more arrays using the concat() method.

The concat() method does not modify the original arrays, but instead returns a new array that contains the elements of the original arrays.

As an example:

let numbers1 = [1, 2, 3];
let numbers2 = [4, 5, 6];
let mergedNumbers = numbers1.concat(numbers2);

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

In this example:

  • We have two arrays numbers1 and numbers2.
  • We use the concat() method to concatenate the two arrays and store the result in a new array called mergedNumbers.
  • The resulting array contains all the elements from both arrays.

You can also use the concat() method to concatenate more than two arrays:

let numbers1 = [1, 2, 3];
let numbers2 = [4, 5, 6];
let numbers3 = [7, 8, 9];
let mergedNumbers = numbers1.concat(numbers2, numbers3);

console.log(mergedNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

In this example:,

  • We have three arrays numbers1, numbers2, and numbers3.
  • We use the concat() method to concatenate all three arrays and store the result in a new array called mergedNumbers.
  • The resulting array contains all the elements from all three arrays.
note

Note that the concat() method does not modify the original arrays, so the original arrays remain unchanged after concatenation.

Flattening an Array​

To flatten a multi-dimensional array to a one-dimensional array in JavaScript, use the flat() method.

It creates a new flattened array with a specified depth (default is 1).

As an example:

let multiDimensionalArray = [1, [2, 3], [4, [5, 6]]];
let flattenedArray = multiDimensionalArray.flat();

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

In this example:

  • We have a multi-dimensional array multiDimensionalArray.
  • We use the flat() method to flatten the array to a depth of 1 and store the result in a new array called flattenedArray.
  • The resulting array contains all the elements from the multi-dimensional array in a single dimension.

You can also specify a depth level for the flat() method:

let multiDimensionalArray = [1, [2, [3, 4]], [5, [6, 7]]];
let flattenedArray = multiDimensionalArray.flat(2);

console.log(flattenedArray); // [1, 2, 3, 4, 5, 6, 7]

In this example:

  • We have a multi-dimensional array multiDimensionalArray.
  • We use the flat() method to flatten the array to a depth of 2 and store the result in a new array called flattenedArray.
  • The resulting array contains all the elements from the multi-dimensional array in a single dimension up to a depth of 2.
note

Note that the flat() method creates a new array and does not modify the original array.

Array splice()​

The splice() method is a powerful and versatile method for manipulating arrays in JavaScript.

It allows you to add, remove, and replace elements in an array.

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

array.splice(index, count, item1, item2, ..., itemX)
  • index: The index at which to start changing the array.
  • count: The number of elements to remove starting from the index. If 0, no elements are removed.
  • item1, item2, ..., itemX: The elements to add to the array, starting at the index.

Examples of using the splice() method:

Removing Elements from an Array​

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(2, 1); // Removes 1 element at index 2 ("cherry")
console.log(fruits); // ["apple", "banana", "date"]

In this example:

  • The splice() method is used to remove one element at index 2 from the fruits array.

Adding Elements to an Array​

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(2, 0, "orange", "kiwi"); // Adds "orange" and "kiwi" at index 2
console.log(fruits); // ["apple", "banana", "orange", "kiwi", "cherry", "date"]

In this example:

  • The splice() method is used to add the elements "orange" and "kiwi" to the fruits array at index 2.

Replacing Elements in an Array​

let fruits = ["apple", "banana", "cherry", "date"];
fruits.splice(2, 1, "orange", "kiwi"); // Replaces 1 element at index 2 with "orange" and "kiwi"
console.log(fruits); // ["apple", "banana", "orange", "kiwi", "date"]

In this example:

  • The splice() method is used to replace one element at index 2 in the fruits array with the elements "orange" and "kiwi".
note

Note that the splice() method modifies the original array and returns an array of the removed elements (if any).

JavaScript Array slice()​

The slice() method in JavaScript returns a new array that contains a portion of the original array, starting from the specified start index and extending up to (but not including) the specified end index.

The original array is not modified.

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

array.slice(startIndex, endIndex);

Here:

  • startIndex is the index at which the slice should begin (inclusive) and endIndex is the index at which the slice should end (exclusive).
  • If endIndex is not specified, the slice will include all elements from the startIndex to the end of the array.

Here are some examples of using the slice() method:

Slicing a portion of an array​

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4);

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

In this example:

  • The slice() method is used to create a new array that contains elements from the original arr array, starting from index 1 and up to (but not including) index 4.
  • The resulting slicedArr array contains the elements [2, 3, 4], and the original arr array remains unchanged.

Slicing an array from a starting index to the end​

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(2);

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

In this example:

  • The slice() method is used to create a new array that contains elements from the original arr array, starting from index 2 and up to (but not including) the end of the array.
  • The resulting slicedArr array contains the elements [3, 4, 5], and the original arr array remains unchanged.

Creating a shallow copy of an array​

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.slice();

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

In this example:,

  • The slice() method is used to create a new array that is a shallow copy of the original arr array.
  • Since no start or end indices are provided, the resulting copyArr array contains all elements from the original arr array. Both arrays are identical.

Automatic toString()​

Every object has a toString() method that converts the object to a string representation.

When this method is called on an array, it returns a string that consists of the array elements separated by commas.

const arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); // "1,2,3,4,5"

In the example above:

  • The toString() method is called on the arr array, which returns a string that represents the array elements separated by commas.

The toString() method is automatically called when an array is used in a string context. As an example:

const arr = [1, 2, 3, 4, 5];
const str = "The array is: " + arr;
console.log(str); // "The array is: 1,2,3,4,5"

In the example above:

  • The arr array is used in a string concatenation operation.
  • When the array is concatenated with the string "The array is: ", the toString() method is automatically called on the arr array, which returns a string that represents the array elements separated by commas. The resulting string is "The array is: 1,2,3,4,5".