Definition and Usage

The shift() function removes the first element from an array and returns it.

Features

  • Removes the first element from an array.
  • Directly modifies the original array.
  • This operation decreases the length of the array by one
  • Returns the removed element.

Basic Example

JavaScript 
const arr = [1, 2, 3];

// Removes the first element from the array
arr.shift();
console.log(arr); // Output: [2, 3]

The pop() function is similar to shift() , but it removes the last element from an array.

Syntax

JavaScript 
arr.shift()

arr is the array to which the shift() function is applied.

Parameters

none.

Return Value

The shift() function returns the first element removed from the array.
If the array is empty and there is no element to remove, it returns undefined.

JavaScript Return Value of shift() 
// Initialize the array
const arr = [1, 2, 3];

// Remove the first element from the array
const removedItem = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(removedItem); // Output: 1

// Empty array
const emptyArray = [];
const emptyArrayRemovedItem = emptyArray.shift(); // Array is empty, no element to remove

console.log(emptyArrayRemovedItem); // Output: undefined

Important Notes and Use Cases

There are several key concepts and precautions to keep in mind when using the shift() function.

  • Return Value
  • Modification of the Original Array and Array Length
  • Removing the First Element with the delete Operator
  • Filtering an Array with a Loop

Return Value

The shift() function returns the removed element. You can store the returned value in a variable.

JavaScript 
const fruits = ["apple", "banana", "cherry"];
const removedFruit = fruits.shift();

console.log(removedFruit); // Output: "apple"

Modification of the Original Array and Array Length

The shift() function modifies the original array. Therefore, when you remove an element, the array changes and its length decreases.

JavaScript 
const fruits = ["apple", "banana", "cherry"];
const removedFruit = fruits.shift();

console.log(fruits.length); // Output: 2

Code Explanation
The length property of an array returns the number of elements in the array.

Removing the First Element with the delete Operator

If you use the delete operator to remove the first element instead of using shift(), the element’s value is removed, but the slot remains empty. The array length does not change.

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// Remove the first element
delete fruits[0];

// Print the array
console.log(fruits);   // Output: [<empty>, "banana", "cherry"]
console.log(fruits[0]); // Output: undefined

Using the delete operator to remove the first element of an array is not recommended.

Filtering an Array with a Loop

The shift() function can be useful when combined with a loop to filter elements or process them sequentially.

In the following example, only positive numbers are extracted from an array:

JavaScript 
const numbers = [3, -2, 8, -5, 7, -1, 6];
const positiveNumbers = [];

while ((number = numbers.shift()) !== undefined) {
    if (number > 0) {
        positiveNumbers[positiveNumbers.length] = number; // Add only positive numbers to the new array
    }
}

console.log(positiveNumbers); // Output: [3, 8, 7, 6]

Code Explanation
A while loop repeatedly executes a block of code as long as the condition evaluates to true.

Specifications

Specification for JavaScript shift() Function
Specification
shift() ECMAScript Language Specification
#sec-array.prototype.shift

Browser compatibility

Specification for JavaScript shift() Function
Method
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
shift() 1 12 1 1

References

See also