JavaScript Array shift
Summary: in this tutorial, you’ll learn how to use the JavaScript Array shift()
method to remove the first element from an array.
Introduction to the JavaScript Array shift() function
The Array.prototype.shift()
method removes the first element from an array and returns that element. The following shows the syntax of the shift()
method:
array.shift()
Code language: CSS (css)
If the array is empty, the shift()
method returns undefined
. Otherwise, it returns the removed element. Also, the shift()
method reduces the length
property of the array by one.
If you want to remove the last element from an array, you can use the pop()
method.
Note that the shift()
method has to reindex all the remaining elements of an array. Therefore, it’s slower in comparison with the pop()
method.
JavaScript Array shift() method examples
Let’s take some examples of using the shift()
method.
1) Using the JavaScript array shift() method example
The following example uses the shift()
method to remove the first element from an array:
const numbers = [10, 20, 30];
let number = numbers.shift();console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });
Code language: JavaScript (javascript)
Output:
{ number: 10 }
{ numbers: [ 20, 30 ] }
{ length: 2 }
Code language: CSS (css)
How it works.
First, define the numbers
array that has three elements:
const numbers = [10, 20, 30];
Code language: JavaScript (javascript)
Second, remove the first element from the numbers
array and assign the removed element to the number
variable.
let number = numbers.shift();
Code language: JavaScript (javascript)
Third, output the removed element, array, and the array’s length to the console:
console.log({ number });
console.log({ numbers });
console.log({ length: numbers.length });
Code language: JavaScript (javascript)
The following picture illustrates how the above example works:
2) Using the JavaScript array shift() method example
The following example shows how to use the shift()
method with a while
loop to remove all elements of an array:
const numbers = [10, 20, 30];
let number;
while ((number = numbers.shift()) != undefined) {
console.log(number);
}
Code language: JavaScript (javascript)
Output:
10
20
30
Using the JavaScript array shift() with array-like object
The shift()
method is generic. Therefore, you can use it with array-like objects. To use the shift()
method with an array-like object, you use the call()
or apply()
method.
Consider the following example:
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
removeFirst() {
return [].shift.call(this);
},
};const greeting = greetings.removeFirst();
console.log(greeting);
console.log(greetings);
Code language: JavaScript (javascript)
Output:
Hi
{
'0': 'Hello',
'1': 'Howdy',
length: 2,
removeFirst: [Function: removeFirst]
}
Code language: JavaScript (javascript)
How it works.
First, define the greetings
object:
let greetings = {
0: 'Hi',
1: 'Hello',
2: 'Howdy',
length: 3,
removeFirst() {
return [].shift.call(this);
},
};
Code language: JavaScript (javascript)
The greetings
object has three elements denoted by the properties 0
, 1
, and 2
. Also, it has the length
property that stores the number of elements of the object.
The removeFirst()
method uses the call()
method to invoke the shift()
method of an array with the this
references to the greetings
object.
Second, call the removeFirst()
method and assigned the removed element to the greeting
variable:
const greeting = greetings.removeFirst();
Code language: JavaScript (javascript)
Third, output the greeting
and greetings
to the console:
console.log(greeting);
console.log(greetings);
Code language: JavaScript (javascript)
The output shows that the length
is reduced by one, the property with the index 0
is removed, and the indexes of other properties were adjusted accordingly.
Summary
- Use the
shift()
method to remove the first element from an array and return that element. - Use the
shift()
method with an array-like object via thecall()
orapply()
method.