How to Remove Element(s) from an Array in JavaScript

avatar

Borislav Hadzhiev

Mon Oct 11 20214 min read

banner

Photo by Anthony Tran

Remove Element(s) from an Array #

To remove one or more elements from an array, use the splice() method. The splice method changes the contents of the original array by removing, replacing or adding new elements and returns an array containing the removed elements.

index.js
const arr = ['a', 'b', 'c']; const removed = arr.splice(1, 2); console.log(removed); // ๐Ÿ‘‰๏ธ ['b', 'c'] console.log(arr); // ๐Ÿ‘‰๏ธ ['a']

The parameters we passed to the Array.splice method are:

  1. the start index - the index at which to start changing the array
  2. the delete count - how many elements we want to remove from the array, from the start index onwards

Here's the same example, using named variables to make things a bit more readable:

index.js
const arr = ['a', 'b', 'c']; const startIndex = 1; const deleteCount = 2; const removed = arr.splice(startIndex, deleteCount); console.log(removed); // ๐Ÿ‘‰๏ธ ['b', 'c'] console.log(arr); // ๐Ÿ‘‰๏ธ ['a']

The splice method changes the contents of the original array and returns an array containing the removed elements.

If you need to empty the contents of an array, pass a start index of 0 as a parameter to the splice method. It will remove all elements from the original array and return a new array containing the removed elements.

index.js
const arr = ['a', 'b', 'c']; const removedElements = arr.splice(0); console.log(removedElements); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c'] console.log(arr); // ๐Ÿ‘‰๏ธ []

If the delete count parameter is not provided, then splice removes all elements from the start index onwards.

Remove the Last element from an Array #

To remove the last element from an array, use the pop() method. The method removes and returns the last element from an array and changes the array's length. If called on an empty array the pop method returns undefined.

index.js
const arr = ['a', 'b', 'c']; const removed = arr.pop(); console.log(removed); // ๐Ÿ‘‰๏ธ 'c' console.log(arr); // ['a', 'b']

The Array.pop method takes no parameters, removes and returns the last element from an array.

Remove the First element from an Array #

To remove the first element from an array, use the shift() method. The method removes and returns the first element from an array and changes the array's length. When called on an empty array the shift method returns undefined.

index.js
const arr = ['a', 'b', 'c']; const removed = arr.shift(); console.log(removed); // ๐Ÿ‘‰๏ธ 'a' console.log(arr); // ['b', 'c']

The Array.shift method is very similar to Array.pop, however applies to the first element of the array.

Filter out Elements from an Array #

To filter out elements from an array, use the filter() method. The method creates and returns a new array containing only the elements that satisfy the condition implemented by the provided to filter callback function.

index.js
const arr = ['a', 'b', 'c']; const filteredArr = arr.filter(element => { return element !== 'b'; }) console.log(filteredArr) // ๐Ÿ‘‰๏ธ ['a', 'c'] console.log(arr) // ๐Ÿ‘‰๏ธ ['a', 'b', 'c']

The function we passed to the Array.filter method gets called with each element in the array.

If the function returns a truthy value the array element gets added to the returned array.

The filter method does not change the contents of the original array, instead it returns a new array.

The filter method is useful when you need only the elements from an array that satisfy a specific condition, e.g. get only the odd numbers from an array, that contains both odd and even numbers.

Filter out Elements at Specific Indexes from an Array #

To filter out elements at specific indexes from an array, use the slice() method. The method does not change the original array, instead it returns a shallow copy of a portion of it.

index.js
const arr = ['a', 'b', 'c']; const newArr = arr.slice(0, 2); console.log(newArr); // ๐Ÿ‘‰๏ธ ['a', 'b'] console.log(arr); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c']

We pass the following parameters to the Array.slice method:

  1. start index - the index at which to start extracting items
  2. end index - extract up to, but not including this index

The slice method does not change the original array, as opposed to splice.

The slice method is useful when you need to get a part of an array, excluding multiple consecutive elements, without mutating the original array.

Never use the Delete Operator with Arrays #

The delete operator is used to remove a property from an object, however you might see people using it with arrays.

index.js
const arr = ['a', 'b', 'c']; delete arr[1]; console.log(arr); // ['a', , 'c'] console.log(arr.length); // ๐Ÿ‘‰๏ธ 3

The delete operator removes the array element, however it doesn't update the length of the array.

In the example, even after we deleted an element, the length of the array continues to be 3. This is the case even if you delete the last element in an array.

There is no good reason to use the delete operator on arrays. If we want to update the value of an element to be undefined or null we can do it directly:

index.js
const arr = ['a', 'b', 'c']; arr[1] = undefined; arr[2] = null; console.log(arr); // ['a', undefined, null] console.log(arr.length); // ๐Ÿ‘‰๏ธ 3

If you see the delete operator used on an array, they really meant to use the splice method instead.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee