Remove first or first N elements from Array in JavaScript

# Table of Contents

1. Remove the first Element from an Array in JavaScript
2. Remove the first Element from an Array using Array.slice()
3. Remove the first N elements from an Array using slice()
4. Remove the first N elements from an Array using splice()

# Remove the first Element from an Array in JavaScript

Use the Array.shift() method to remove the first element from an array, e.g. const firstElement = arr.shift();.

The Array.shift() method removes the first element from an array and returns the removed element.

Copied!
// ✅ Remove the first element from an array WITH mutation
const arr = ['a', 'b', 'c'];

const firstElement = arr.shift();
console.log(firstElement); // 👉️ a

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

The Array.shift() method removes the first element from the array and returns it.

The shift method removes the array element at index 0.

If you call the Array.shift() method on an empty array, the method returns undefined.

Copied!
const arr = [];

const firstElement = arr.shift();
console.log(firstElement); // 👉️ undefined

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

# Remove the first element from an Array using slice()

An alternative is to create a copy of the array starting with the second element.

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

const withoutFirst = arr.slice(1);
console.log(withoutFirst); // 👉️ ['b', 'c']

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

The Array.slice method returns a copy of a portion of an array.

The method takes the following 2 arguments:

When only a single argument is passed to the Array.slice() method, the slice goes to the end of the array.

The method returns a shallow copy of the original array containing the elements from index 1 onwards.

The Array.slice() method is very different from Array.shift() because it doesn't change the contents of the original array.

# Remove the first N elements from an Array using slice()

You can also use the Array.slice() method to remove the first N elements from an array.

You just have to specify a start index of N.

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

const newArr = arr.slice(2);
console.log(newArr); // 👉️ ['c', 'd']

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

The code sample returns a new array without the first 2 elements of the original array.

Note that the Array.slice() method doesn't remove the elements from the original array.

The Array.slice() method takes the following 2 parameters:

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

Here is an example of specifying both indexes in the call to the Array.slice() method.

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

const newArr = arr.slice(1, 3);
console.log(newArr); // 👉️ [ 'b', 'c' ]

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

We start extracting values at index 1 and go up to, but not including index 3.

In other words, the new array contains the elements of the original array at indices 1 and 2.

# Remove the first N elements from an Array using splice()

This is a two-step process:

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']

The code sample removes the first two elements from the array.

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

We supplied a start index of 0 and a delete count of 2 to remove the first 2 elements from the array.

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

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

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

If you need to remove the first 3 elements from the array, set the delete count argument to 3.

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

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

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

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

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Remove last or last N elements from an Array in JavaScript
• Remove Null or Undefined Values from an Array in Javascript
• Remove Object from an Array by its Value in JavaScript
• Remove Property from all Objects in Array in JavaScript