To remove first and last array elements in JavaScript, you can use any of these methods –
- Use the Array.shift() and Array.pop() methods to remove the first and the last element respectively, in place.
- Use the Array.slice() method to create a copy of the array and remove the first and the last elements of the array.
- Use the Array.splice() method to remove the first and last elements of the array.
Let’s discuss each of these methods in detail below.
Array.shift() And Array.pop() To Remove First And Last Array Elements In JavaScript
The Array.shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.
Similarly, the Array.pop() method removal the last element from an array and return that element. This too changes the length of the array.
Consider the following example –
const arr = ['a', 'b', 'c'];
console.log(arr.shift()); // outputs "a"
console.log(arr); // outputs ["b", "c"];
console.log(arr.pop()); // outputs "c"
console.log(arr); // outputs ["b"];
In the above code snippet, we have declared an array of three elements – ‘a’, ‘b’, and ‘c’. We have used the Array.shift() method to remove the first element from this array. The output in the console shows that the shift() method returns the removed element “a” and modifies the original array by removing this element from it.
Similarly, we have used the Array.pop() method to remove and return the last element from the array. The output in the console shows that the pop() method removed “c” from the original array and returned it.
The shift() and pop() methods modify the original array and can be used when you want to remove first and last elements from the same array.
If you do not wish to change the original array, use the next method instead.
Array.slice() To Remove First And Last Array Elements In JavaScript
The Array.slice() method copies a given number of elements from the beginning or end of an array and returns them in a new array. The original array is not modified by this method.
This method takes two optional parameters –
- The starting index of the copy (defaults to 0)
- The ending index of the copy (defaults to arr.length)
The following example illustrates how this method can be used to remove the first and last elements from an array –
var arr = ['a', 'b', 'c'];
var newArr = arr.slice(1, arr.length-1); //remove first and last element
console.log(newArr); // outputs ["b"]
In the above code snippet, we have declared an array of three elements – ‘a’, ‘b’, and ‘c’. We have used the slice() method to copy all elements from index 1 till the second last element in the newArr variable. The output in the console verifies that only the “b” element was copied, which is the desired output.
This method does not modify the original array and can be used to remove first and last elements from different arrays.
Array.splice() To Remove First And Last Array Elements In JavaScript
The Array.splice() method removes a given number of elements from an array from a given start index and returns them in a new array. This method changes the original array.
This method takes at least one required parameter and up to two optional parameters –
- The starting index (required)
- The number of elements to remove (optional, defaults to arr.length)
- The elements to insert at the start index (optional)
Consider the following example of how to use this method to remove first and last array elements in JavaScript –
var arr = ['a', 'b', 'c'];
arr.splice(0, 1); // removes 1 element from the starting of the array
console.log(arr); // outputs ["b", "c"];
arr.splice(-1,1); //removes 1 element from the end of the array
console.log(arr); // outputs ["b"];
In the above code snippet, we have declared an array of three elements – ‘a’, ‘b’, and ‘c’. We have used the splice() method to remove one element from the starting index 0. The output in the console verifies that the “a” element was removed from the original array.
Similarly, we have used the splice() method to remove one element from the ending index -1. The output in the console verifies that the “c” element was removed from the original array and only “b” remains.
The splice() method can be used when you want to remove elements from an array and do not mind if the original array is modified.
Conclusion
In this article, we learned about how to remove first and last array elements in JavaScript. We also learned about different methods that can be used for this purpose – shift() and pop() methods, slice() method, and splice() method.
Which method you use depends on your use case. If you want to modify the original array, use the shift() or pop() method as its the fastest. If you want to create a new array without modifying the original one, use the slice() method.
I hope this article was helpful and that you now have a clear understanding of how to remove the first and last element from an array in JavaScript. Thanks for reading!