Remove the first N elements from an Array in JavaScript

Remove the first N elements from an Array #

To remove the first n elements from an array:

Call the splice method on the array, passing it the start index and the number of elements to remove as arguments.
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

Copied!
const arr = ['a', 'b', 'c', 'd'];

const removeFirstTwo = arr.splice(0, 2);
console.log(removeFirstTwo); // 👉️ ['a', 'b']

console.log(arr); // 👉️ ['c', 'd']

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

start index - the index at which to start changing the array.

Note that JavaScript indexes are zero-based. The first element in the array has an index of 0.

delete count - the number of elements to be removed from the start index onwards.

We supplied a start index of 0 and a delete count of 2 to remove the first 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 onwards 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

Copied!
const arr = ['a', 'b', 'c', 'd'];

const removeAll = arr.splice(0);
console.log(removeAll); // 👉️ ['a', 'b', 'c', 'd']

console.log(arr); // 👉️ []

We 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.

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

index.js

Copied!
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 doesn't remove the elements from the original array.

Instead, it created a shallow copy of the array containing the elements at the specified indexes.

We 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, but not including this index

In the code snippet, we start extracting values at index 1 go up to, but not including index 3.

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

Mutations are very difficult to reason about and track throughout a codebase.

Remove the first N elements from an Array in JavaScript

Remove the first N elements from an Array #

Further Reading #

Borislav Hadzhiev