The array shift of the Javascript method removes the first element from an array. It will return the element it removes to the caller. This article will look at JavaScript’s shift method, Its syntax, how it works, and how to use it.
Table of Contents
Array Shift Method
The array shift method removes and returns the first element from the array. If the array is empty, it will do nothing but return undefined.
It mutates the array and changes its length.
The shift method returns the element it removed from the array. If it does not remove the element, it will return undefined.
Note that if the shift method returns undefined does not mean that the array is empty. It may happen the element it removed has undefined in it, or it may be an empty slot(sparse array)
Syntax
The syntax of the array.shift method is as follows:
1 2 3 | array.shift() |
It does not take any arguments.
Array shift Example
In the following example, we have an array of numbers. We call the shift method on it. It removes the first element, number 1, from the array and returns its value.
We store the returned value in a variable named removedValue. Finally, we log the modified array and the removed value to the console.
1 2 3 4 5 6 | let numbers = [1, 2, 3, 4, 5]; let removedValue = numbers.shift(); console.log(numbers); // [ 2, 3, 4, 5 ] console.log(removedValue); // 1 |
Array Shift Performance
Shift removes the first element and re-indexes all the other elements in the array. Re-indexing is a time-consuming process, especially if the array is large. If you call shift frequently, it may be wiser to rethink the structure of your application.
Vs. Pop
Array shift & pop are similar, except that shift removes the element from the start, while array pop removes the element from the end.
The code below uses the pop method to remove the last element from the array.
1 2 3 4 5 6 | let numbers = [1, 2, 3, 4, 5]; let lastNumber = numbers.pop(); console.log(numbers); // [1, 2, 3, 4] console.log(lastNumber); // 5 |
Vs. Slice
The slice method is another option to remove the first element. It will not mutate the original array but returns a new array.
Hence if you do not want to mutate the array, using the slice may be an option. But note that the slice method is slower as it needs to create a new array and update each element with the values from the original array.
1 2 3 4 5 6 7 8 9 10 11 | let numbers = [1, 2, 3, 4, 5]; let newNumbers = numbers.slice(1); //new array is returned console.log(newNumbers) //[ 2, 3, 4, 5 ] //original array is intact console.log(numbers) //[ 1, 2, 3, 4, 5 ] |
Vs splice()
The splice is another way to remove the last element from the array. The syntax of the splice is as follows.
1 2 3 | array.splice(start, deleteCount, item1, item2, …) |
Where start is the index position from where you want to remove the elements, and deleteCount is the number of elements you want to remove from the array. The subsequent arguments, if any, are inserted at the start index.
We can remove the last element from the array by setting start as 0 and deleteCount as 1.
Splice, just like pop, mutates the original array.
1 2 3 4 5 6 | let numbers = [1, 2, 3, 4, 5]; let removedElement = numbers.splice(0, 1)[0]; console.log(numbers); // [ 2, 3, 4, 5 ] console.log(removedElement); // 1 |
Array Like objects and shift method
The shift method is generic. It only expects this value to have a length property and integer-keyed properties.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const arrayLike = { 0: 0, 1: 1, 2: 2, length: 3, unrelated: "foo", }; let removedItem = Array.prototype.shift.call(arrayLike); console.log(removedItem) // 0 console.log(arrayLike); // { '0': 1, '1': 2, length: 2, unrelated: 'foo' } |
Summary
- The array shift method removes and returns the first element from the array.
- If the array is empty, it will do nothing but return undefined.
- It mutates the array and changes its length.
