Blog

To remove the first element of an array in JavaScript, you can use any of these two methods –

1. Use the Array.shift() method to remove the first element of an array.
2. Use the Array.slice() method to remove the first element of an array.
3. Use the Array.filter() method to remove the first element of an array.

Array.shift() To Remove The First Element Of An Array In JavaScript

The shift() method can be used to remove the first element of an array in JavaScript and returns that removed element. This method changes the array:

The shift() method returns undefined if the array is empty.

Example:

In this example, we will use the shift() method to remove the first element of an array and print it.

var array = ["JavaScript", "C++", "Python"];

console.log(array.shift()); // Output: JavaScript

In the above code, we have defined an array with three elements. The shift() method removes the first element of the array and returns it. Since “JavaScript” is the first element in the array, it will be removed and returned by this method.

The only drawback of this method is that it changes the original array and in my personal experience, when you change the original array, it is always better to have a copy of it before you make any changes, because things can get really messy otherwise.

Array.slice() To Remove The First Element Of An Array In JavaScript

The slice() method returns a shallow copy of the array and does not change the original array. This means that you can use this method to remove the first element of an array in JavaScript without changing the original array:

Example:

In this example, we will use the slice() method to remove the first element of an array and print it.

var array = ["JavaScript", "C++", "Python"];

console.log(array.slice(1)); // Output: C++,Python

console.log(array); // Output: JavaScript,C++,Python

Note that if you use the slice() method with only one parameter, it will return all elements from the given index to the end of the array.

If you use the slice() method with two parameters, it will return all elements from the given start index to the given end index:

Example:

In this example, we will use the slice() method to remove the first and second elements of an array.

var array = ["JavaScript", "C++", "Python"];

console.log(array.slice(2)); // Output: Python

console.log(array); // Output: JavaScript,C++,Python

As you can see from the output, the slice() method does not change the original array.

Use The filter() Method To Remove The First Element Of An Array

The filter() method is used to create a new array from the existing array and does not change the original array. This means that you can use this method to remove the first element from an array without changing the original array:

Example:

In this example, we will use the filter() method to remove the first element of an array and print it.

var array = ["JavaScript", "C++", "Python"];

console.log(array.filter((element,index) => index != 0)); // Output: C++,Python

console.log(array); // Output: JavaScript,C++,Python

Note that the filter() method takes a callback function as an argument and this callback function takes two parameters, element and index. The element is the current element being processed in the array and the index is the index of the current element being processed.

The filter() method will iterate through all elements of the array and will call the callback function for each element. If the callback function returns true, the element will be added to the new array, otherwise, it will not be added.

In our example, we are using the arrow function as a callback function and inside that function, we are checking if the index is not equal to 0(which means it is not the first element), then only it will return true and the element will be added to the new array, otherwise, it will not be added.

Which Method Is Better?

If you want to remove the first element of an array and return the removed element, you can use the shift() method. If you want to remove the first element of an array without changing the original array, you can use the slice() method or the filter() method.

If you want to know specifically about the performance, shift() is way faster than slice(). Why so?

The difference lies in the initialization of a new array to store the first element of the original array. When you use the shift() method, no new array is initialized. So, it is faster than slice().

But if you do not want to change the original array and just want to return a new array with the first element removed, then I would recommend using slice(), because that is what it is meant for.

The filter() method is also a good choice because it returns a new array and does not change the original array.

But if you want to use a method that is faster and does not return a new array, then go for shift().