How to Remove the First X Items from an Array in JavaScript

Arrays are versatile data structures in JavaScript. The most common task is removing a specified number of elements from the beginning of an array.

In this blog, we’ll explore 4 ways to remove the first X items from an array in JavaScript. We’ll break it down into different methods, each with a detailed explanation of how it works.

1. Using slice()

The slice() method is used to return a shallow copy of a portion of an array into a new array. The original array is not modified, making slice() a non-mutating method.

js
array.slice(startIndex, endIndex)

Removing the first X items using slice()

js
const array = [1, 2, 3, 4, 5, 6, 7];
const X = 3;
const newArray = array.slice(X);

console.log(newArray); // Output: [4, 5, 6, 7]

slice(X) returns a new array starting from the Xth index (3rd in this case). It effectively removes the first three elements from the array without modifying the original array.

2. Using splice()

The splice() method is a mutating method that changes the contents of an array by removing or replacing existing elements and/or adding new elements.

js
array.splice(startIndex, deleteCount)

Removing the first X items using splice()

js
const array = [1, 2, 3, 4, 5, 6, 7];
const X = 3;
array.splice(0, X);

console.log(array); // Output: [4, 5, 6, 7]

splice(0, X) removes the first X elements (from index 0). Since splice() modifies the original array, you no longer have the first X elements in array.

3. Using filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function. It’s generally used for filtering out elements based on conditions, but it can also be used to remove the first X items.

js
array.filter(function(currentValue, index, arr), thisValue)

Removing the first X items using filter()

js
const array = [1, 2, 3, 4, 5, 6, 7];
const X = 3;
const newArray = array.filter((_, index) => index >= X);

console.log(newArray); // Output: [4, 5, 6, 7]

Pass a function to filter() that returns true for every index that is >= X. This effectively removes the first X elements by excluding those indexes.

4. Using a for loop

A for loop is a basic way to remove the first X items from an array by manually shifting elements.

js
for (expression 1; expression 2; expression 3) {
  // code block to be executed
}

Removing the first X items using a for loop

js
const array = [1, 2, 3, 4, 5, 6, 7];
const X = 3;

for (let i = 0; i < X; i++) {
    array.shift();
}

console.log(array); // Output: [4, 5, 6, 7]

Loop X times, and in each iteration, we call array.shift() to remove the first element. The shift() method removes the first element of an array and returns it, mutating the original array.

Conclusion

Your choice of method depends on whether you want to modify the original array, how large the array is, and what level of flexibility you need. For most scenarios, slice() or splice() will likely be the most efficient and clear options. However, if you're working with a specific use case, one of the other methods might come in handy.