JavaScriptArraysBeginner

Array.shift()

Removes and returns the first element of an array (mutates).

Review the syntaxStudy the examplesOpen the coding app
array.shift()
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Removes and returns the first element of an array (mutates).

The shift() method removes the first element from an array and returns that removed element. This operation mutates the original array by changing its length and re-indexing every remaining element to a position one lower than its previous index. Because all subsequent elements must be moved, shift() has a time complexity of O(n). This makes it significantly less efficient than pop() (which is O(1)) when dealing with large datasets. If the array is empty (length is 0), the method returns undefined and the array remains unchanged. It is a generic method and can be called or applied to objects resembling arrays, provided they have a length property and integer-keyed properties.

Quick reference

Syntax

array.shift()

See it in practice

Examples

1

Basic Element Removal

var snacks = ['apple', 'banana', 'cherry'];
var firstSnack = snacks.shift();

console.log(firstSnack);
console.log(snacks);
Output:
"apple" ["banana", "cherry"]

The first element 'apple' is removed and stored in the variable, while the remaining elements are shifted forward.

2

Processing a Queue with a While Loop

var tasks = ['Task 1', 'Task 2', 'Task 3'];

while (tasks.length > 0) {
  var currentTask = tasks.shift();
  console.log('Processing: ' + currentTask);
}

console.log('Queue empty. Length:', tasks.length);
Output:
"Processing: Task 1" "Processing: Task 2" "Processing: Task 3" "Queue empty. Length: 0"

shift() is frequently used to process items in a First-In-First-Out (FIFO) order. Note that for very large queues, a linked list might be more performant than an array.

3

Handling an Empty Array

var emptyList = [];
var result = emptyList.shift();

console.log(result);
console.log(emptyList.length);
Output:
undefined 0

Calling shift() on an empty array does not throw an error; it safely returns undefined and the length remains 0.

Debug faster

Common Errors

1

LogicError

Cause: Assuming shift() returns the modified array instead of the removed element.

Fix: Access the original array variable after calling shift() if you need the remaining elements.

var arr = [1, 2, 3];
var newArr = arr.shift(); // newArr is 1, not [2, 3]
2

TypeError

Cause: Attempting to call shift() on a value that is null or undefined.

Fix: Ensure the variable is an array or use an existence check before calling the method.

var data = null;
// data.shift(); // Throws TypeError
if (Array.isArray(data)) { data.shift(); }

Runtime support

Compatibility

Node.js, BrowserAll browsersES3+

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Removes and returns the first element of an array (mutates).

LogicError: Access the original array variable after calling shift() if you need the remaining elements. TypeError: Ensure the variable is an array or use an existence check before calling the method.