Remove first or first N elements from Array in JavaScript

avatar
Borislav Hadzhiev

Last updated: Dec 21, 2022
4 min

banner

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

index.js
// โœ… 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']

remove first element from array

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

The Array.shift() method mutates the original array and changes its length.

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.

index.js
const arr = []; const firstElement = arr.shift(); console.log(firstElement); // ๐Ÿ‘‰๏ธ undefined console.log(arr); // ๐Ÿ‘‰๏ธ []
In my experience, mutating arrays and objects is difficult to track throughout a codebase, especially if you have to perform other operations on the array after mutating it.

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

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

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

remove first element from array using slice

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

The method takes the following 2 arguments:

NameDescription
start indexThe index of the first element to include in the returned array
end indexThe index of the first element to exclude from the returned array

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.

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

remove first element from array using slice

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.

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

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.

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

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

remove first n elements from array using splice

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.
Note that JavaScript indexes are zero-based, so 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.

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

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

index.js
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
index.js
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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev