JavaScript Array shift() Method

What You’ll Learn

The shift() method removes the first element, shifts the rest down, and returns the removed value. This tutorial covers syntax, five examples, FIFO queues with push(), comparison with pop(), and why shifting large arrays can be slower than end removal.

Introduction

pop() removes from the end; shift() removes from the start. Every remaining element moves down one index, so the array stays dense with no gap at the front.

Pair push (add to end) with shift (remove from start) to model a first-in-first-out (FIFO) queue—like a line where the first person in is the first person served.

Understanding the shift() Method

array.shift() deletes the element at index 0, moves index 1 to 0, 2 to 1, and so on, decrements length, and returns the removed first element.

On an empty array, shift() returns undefined without throwing. Like pop(), it mutates the array all references point to.

📝 Syntax

General form of Array.prototype.shift:

array.shift()

Parameters

• None.

Return value

• The removed first element.
• undefined if the array is empty.

Side effects

• Mutates the array: first element removed, others shift down, length decreases by 1.

Common patterns

• const first = arr.shift() — remove and capture.
• queue.push(item); queue.shift() — FIFO dequeue.
• while (arr.length) arr.shift() — drain from front.
• if (arr.length) arr.shift() — guard empty arrays.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const colors = ["red", "blue", "green", "yellow"];

const removed = colors.shift();

console.log(removed);
// "red"

console.log(colors);
// ["blue", "green", "yellow"]

red
["blue", "green", "yellow"]

const empty = [];

const result = empty.shift();

console.log(result);
// undefined

console.log(empty.length);
// 0

undefined
0

const queue = ["task-a"];

let next;

if (queue.length > 0) {
  next = queue.shift();
  console.log("Processing:", next);
} else {
  console.log("Queue is empty.");
}
// Processing: task-a

console.log(queue);
// []

Processing: task-a
[]

const queue = ["alice", "bob"];

queue.push("carol");

const served = queue.shift();

console.log(served);
// "alice"

console.log(queue);
// ["bob", "carol"]

alice
["bob", "carol"]

const startQueue = ["a", "b", "c"];
const endStack = ["a", "b", "c"];

console.log("shift:", startQueue.shift());
// "a"

console.log("after shift:", startQueue);
// ["b", "c"]

console.log("pop:", endStack.pop());
// "c"

console.log("after pop:", endStack);
// ["a", "b"]

shift: a
after shift: ["b", "c"]
pop: c
after pop: ["a", "b"]

🚀 Common Use Cases

• FIFO queues — process tasks in arrival order.
• Breadth-first hints — dequeue next node from front of list.
• Drain buffers — consume oldest items first.
• Parser token streams — read next token from head.
• Job schedulers — paired with push for simple queues.
• Teaching opposites — contrast with pop and unshift.

📝 Notes

• Mutates the array—elements shift down, length - 1.
• Empty array → undefined (no throw).
• Slower than pop() on large arrays (O(n) re-indexing).
• For immutable “drop first”, use arr.slice(1).
• Pair with push for FIFO; with unshift for front inserts.
• ES3—supported everywhere JavaScript runs.

💡 Best Practices