Remove the first N elements from an Array in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 06 20212 min read

banner

Photo by Caleb Frith

Remove the first N elements from an Array #

To remove the first n elements from an array:

  1. Call the splice method on the array, passing it the start index and the number of elements to remove as arguments.

  2. For example, arr.splice(0,2) removes the first two elements from the array and returns a new array containing the removed elements.

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

We have passed the following 2 arguments to the Array.splice method:

  1. start index - the index at which to start changing the array.
Note that indexes are zero-based in JavaScript. The first element in the array has an index of 0.
  1. delete Count - the number of elements to be removed from the start index onwards

In the code snippet, we have a start index of 0 and we remove 2 elements from the array.

The Array.splice method removes the elements from the original array and returns them in a new array.

All of the elements from the start index onward will be deleted, if:

  • you omit the second parameter (delete count)
  • you specify a delete count greater than the number of elements left in the array
index.js
const arr = ['a', 'b', 'c', 'd']; const removeAll = arr.splice(0); console.log(removeAll); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c', 'd'] console.log(arr); // ๐Ÿ‘‰๏ธ []

In the code snippet, we have omitted the delete count parameter, which means that all elements from the specified start index onwards will get removed from the array.

Most experienced developers avoid mutating arrays and objects, instead they create a copy of the array containing only the elements that are needed.

Once you start mutating the same array multiple times, things get very confusing and difficult to debug.

To create a copy of the original array, containing only the elements we need, we can use the Array.slice method.

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

Note that the Array.slice method did not remove the elements from the original array, instead it created a shallow copy with the array elements at index 1 and 2.

We have passed the following parameters to the Array.slice method:

  • start index - the index (zero-based) at which we start extraction
  • end index - extract values up to this index, but not including

In the code snippet we start extracting values at index 1 and end at index 2.

Creating a copy of the original array, which contains only the elements we need is a better approach, than mutating the original array.

Mutations are very difficult to reason about and are more prone to bugs when refactoring code.

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