Remove One Or More Elements From An Array In JavaScript

You can use the following methods to remove one or more elements from an array in JavaScript –

  1. Use the Array.splice() method to remove elements from a starting index in-place.
  2. Use the Array.pop() method to remove the last element from the array,
  3. Use the Array.shift() method to remove the first element from the array.
  4. Use the Array.slice() method to remove elements from a specific starting and ending index.
  5. Use the delete keyword to remove an element from the array but leave a hole in its place.

Let’s discuss each of these methods in detail below.

remove one or more elements from an array in javascript

Array.splice() To Remove One Or More Elements From An Array In JavaScript

The Array.splice() method takes at least two arguments –

  • the starting index from where you want to remove the element(s) and
  • the number of elements you want to delete.

This method mutates (changes) the original array in-place and returns a new array containing the removed items –

For example,

var arr = [‘a’, ‘b’, ‘c’]

arr.splice(2, 1);

console.log(arr); // Output: [‘a’, ‘b’]

In the above code, we have declared an array with three elements – ‘a’, ‘b’, and ‘c’.

Then, we have used the Array.splice() method to remove one element from index 2.

This method returns the removed items in a new array.

As you can see, the original arr array has also changed after using the Array.splice() method.

If you don’t pass the second argument to .splice(), all elements from the starting index will be removed –

var arr = [‘a’, ‘b’, ‘c’, ‘d’]

arr.splice(2);

console.log(arr); // Output: [‘a’, ‘b’]

In the above code, we have again declared an array with four elements –

‘a’, ‘b’, ‘c’, and ‘d’. Then, we have used Array.splice() to remove all elements from index 2.

This time we have not passed the second argument, so all remaining items in the array are removed.

Array.pop() To Remove One Or More Elements From An Array In JavaScript

The Array.pop() method is used to remove the last element from an array. It also returns the removed item.

For example,

var arr = [‘a’, ‘b’, ‘c’]

console.log(arr.pop()) // Output: c

In the above code, we have declared an array with three elements – ‘a’, ‘b’, and ‘c’.

Then, we have used the Array.pop() method to remove and return the last element from the array.

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

Array.shift() To Remove One Or More Elements From An Array In JavaScript

The Array.shift() method is similar to Array.pop(), except that it removes and returns the first element from the array.

For example,

var arr = [‘a’, ‘b’, ‘c’]

console.log(arr.shift()) // Output: a

In the above code, we have declared an array with three elements – ‘a’, ‘b’, and ‘c’.

Then, we have used the Array.shift() method to remove and return the first element from the array.

Array.slice() Method

The Array.slice() method can be used to remove elements from a specific starting and ending index.

This method does not mutate (change) the original array. It returns a new array containing the removed items.

For example,

var arr = [‘a’, ‘b’, ‘c’, ‘d’]

console.log(arr.slice(1, 3)) // Output: [‘b’, ‘c’]

In the above code, we have declared an array with four elements – ‘a’, ‘b’, ‘c’, and ‘d’.

Then, we have used the Array.slice() method to remove elements from index 1 to 3 (excluding element at index 3).

Delete Keyword

The delete keyword can be used to remove an element from an array but it leaves a hole in its place. There is no real need for using the delete keyword in case of arrays. This keyword is more appropriate for objects.

For example,

var arr = [‘a’, ‘b’, ‘c’, ‘d’];

delete arr[1];

console.log(arr); // Output: [‘a’, undefined, ‘c’, ‘d’]

In the above code, we have declared an array with four elements – ‘a’, ‘b’, ‘c’, and ‘d’.

Then, we have used the delete keyword to remove the element at index 1. As you can see, after deleting the element, the array now contains a hole in place of that element.

The delete keyword does not change the length of the array. It only assigns undefined to the removed element(s).

Hence, it is not a good idea to use the delete keyword for removing elements from arrays.

Conclusion

In this article, you have learned different ways of removing elements from an array in JavaScript.

You have also seen the difference between mutating and non-mutating methods.

It is always a good idea to use non-mutating methods whenever possible as they are more straightforward and easier to reason about.

Leave a Reply