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:

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.

Copied!
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.

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

Copied!
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.

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

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

Further Reading #

• Remove Duplicates from an Array in JavaScript
• How to Remove Element(s) from an Array in JavaScript
• Remove the last N elements from an Array in JavaScript
• Get the first N elements from an Array in JavaScript
• Get the last N elements from an Array in JavaScript
• How to check if an Array Index exists in JavaScript
• Remove Undefined Values from an Array in JavaScript
• Remove Null Values from an Array in Javascript
• Remove Empty Elements from an Array in JavaScript