How to Remove the First Element of an Array in JavaScript?

Are you looking for different methods to remove the first element of an array in JavaScript? Congratulations🥳, you are at the right place. 

An array is a built-in global object in JavaScript that allows you to store multiple elements simultaneously. On this reference page, you will find all the methods and properties to remove the first element in the array. 

In this article, we will discuss the array, how we can access its first element and how we can remove the array’s first element by using shift, splice, reverse, and pop methods. Now, let’s start this topic without any further delay.🏃

What is an Array in JavaScript?

An array is a collection of variables, a special variable with the same name for all the values but a different index. An index is the pinpoint location used to access each element of an array. The array is a number index, which means you can use only numbers as an index. The JavaScript array has a particular characteristic that it can store mixed data.

We have two ways to declare an array in JavaScript and they are the following.

let myarray = [value1, value2, ...]; //initialize array with help of []

let myarray = new Array();  //declare array with Array constructor

How to Access the First Element of an Array in JavaScript?

We can access the first element of an array with index 0; remember array’s first element is always on index 0. Now understand this concept with the help of an example:

Code

let myarray = [10, 15, 20, 25];

console.log("First element on index 0 is ",myarray[0]);

Output

First element on index 0 is  10

How to “Remove the First Element of Array in JavaScript”?

We have several ways to remove the first element of an array in JavaScript. We can use built-in functions or use over own functions to remove the first element of an array.  The following are the different ways to remove the first element of an array in JavaScript.

1. Using Shift Method
2. Using Splice Method
3. Using Delete Operator
4. Using the reverse and pop method
5. Using rest operator

Method 1: Using The Shift Method

We can use the shift method to remove the first element of an array; this method performs three tasks:

1. Removing the first element of an array
2. Change original array
3. Returns deleted element

Now let’s explain the working of the shift method with the help of an example:

Code

console.log("Example of Shift method");

let myarray = [10, 15, 20, 25];

console.log("Array Elements are: ", myarray);

// calling shift method

let deleteedelement= myarray.shift();

console.log("shift method returns: ",deleteedelement);

console.log("Array Elements after shift method ", myarray);

Output

Example of Shift method

Array Elements are:  [ 10, 15, 20, 25 ]

shift method returns:  10

Array Elements after shift method  [ 15, 20, 25 ]

Method 2: Using The Splice Method

The splice() method is a built-in method of the array that changes an array’s contents. We can use this method to delete the first item of an array. This method can perform the following tasks:

1. Removing existing elements
2. Replacing existing elements 
3. Adding new elements
4. Return deleted element if we delete a single element.

The General syntax of the splice method is as follows:

arrayName.splice(Position, RemoveCount, NewItems)

RemoveCount and NewItems are optional in this syntax, but Position(Index of an array) is mandatory. In the below example, we will see how we can delete the first element of an array with the help of the splice() method:

Code

console.log("Example of Splice method");

let myarray = ["one", "two", "three", "four"];

console.log("Array Elements are: ", myarray);

// Calling Splice method to delete first element

// Delete index 0 element 

let deletedelement= myarray.splice(0,1);

console.log("Splice method returns: ",deletedelement);

console.log("Array Elements after splice method ", myarray);

Output

Example of Splice method

Array Elements are:  [ 'one', 'two', 'three', 'four' ]

Splice method returns:  [ 'one' ]

Array Elements after splice method  [ 'two', 'three', 'four' ]

Method 3: Using The Delete Operator

We can delete the first element of an array with the delete operator, but it will not change the array’s length. It leaves empty in place of a deleted element. If it deletes the element successfully, it will return true in case of deleting variable or function delete operator return false.

Code

console.log("Example of Delete Operator");

let myarray = ["Apple", "Mango", "Orange", "Date"];

console.log("Array Elements are: ", myarray);



// Delete index 0 element with delete operator

let deleteedelement= delete myarray[0];



console.log("Delete operator returns: ",deleteedelement);

console.log("Array Elements after delete operator ", myarray);



// Delete operator dont affect the length of array

// index 0 is empty now

console.log("Array length is:",myarray.length);

Output

Example of Delete Operator

Array Elements are:  [ 'Apple', 'Mango', 'Orange', 'Date' ]

Delete operator returns:  true

Array Elements after delete operator  [ <1 empty item>, 'Mango', 'Orange', 'Date' ]

Array length is: 4

Method 4: Reverse And Pop Method

To remove the first item of an array, we can use two methods reverse() and pop() together. The reverse method reverses the array element so we can remove the last element of an array with the help of the pop() method. The pop() method is just like stack operation it is used to eliminate the last element of the array. In the end, we have to call the reverse method again, so the array returns to its original arrangement.

Code

console.log("Example of reverse and pop methods");

let myarray = [1,3,4,6,10,20];

console.log("Array Elements are: ", myarray);



// Use reverse method to reverse the array

myarray.reverse();



//Pop method remove last element of the array

myarray.pop();



//Reverse array again

myarray.reverse();



console.log("Array Elements after Rest operator ", myarray);

Output

Example of reverse and pop methods

Array Elements are:  [ 1, 3, 4, 6, 10, 20 ]

Array Elements after Rest operator  [ 3, 4, 6, 10, 20 ]

Method 5: Using The Rest Operator

We can rest the operator (…) to remove the first element of an array. It will change the reference of the array. Now see how it works with the help of an example:

Code

console.log("Example of Rest Operator");

let myarray = ["Apple", "Mango", "Orange", "Date"];

console.log("Array Elements are: ", myarray);



// use rest operator 

// Store array in new array but remove first element

let [ , ...newarray]= myarray;



//assign new array to myarray again

myarray=newarray;



console.log("Array Elements after Rest operator ", myarray);

Output

Example of Rest Operator

Array Elements are:  [ 'Apple', 'Mango', 'Orange', 'Date' ]

Array Elements after Rest operator  [ 'Mango', 'Orange', 'Date' ]

Conclusion

After all this debate, we can quickly delete the first element of an array with the help of these methods and properties, but the shift() method is much quicker and easier than all other methods. We can use them too but shift() is the best because it doesn’t use any unnecessary array or doesn’t change array reference.

Here is a quick recap of the topics discussed in the article:

1. What is an array?
2. How to access the first element of an array?
3. How to remove the first element of an array?
4. Discussed Shift, splice, reverse, and pop methods.
5. Discussed delete and rest operators.

If you find this article helpful, do share it with your friends 👫and let us know in the comment section below which method or operator is more convenient for you.

Happy Coding!