JS Array Shift and Unshift Methods: Full Tutorial

shift() and unshift() work like pop() and push(), but they operate on the beginning of the array instead of the end. shift() removes the first element.

unshift() adds elements to the front.

Both methods mutate the original array. Both are slower than push() and pop() on large arrays because every remaining element must be re-indexed.

shift() -- Remove the First Element

shift() removes the element at index 0 and returns it, which is useful whenever you need to process items in the order they arrived. Every other element shifts down by one position.

javascript

const queue = ["first", "second", "third"];
 
const removed = queue.shift();
 
console.log(queue);   // ["second", "third"]
console.log(removed); // "first"

Before the call, "second" was at index 1 and "third" was at index 2. After the call, both elements move down by one position to fill the gap left at the front.

This re-indexing is why shift() takes more time as the array grows.

On an empty array, shift() returns undefined:

javascript

const empty = [];
 
console.log(empty.shift()); // undefined
console.log(empty);         // []

unshift() -- Add to the Beginning

unshift() adds one or more elements to the front of the array. It returns the new length.

javascript

const colors = ["green", "blue"];
 
const newLength = colors.unshift("red");
 
console.log(colors);    // ["red", "green", "blue"]
console.log(newLength); // 3

Like push(), the return value is the new length, not the added element.

You can add multiple elements at once:

javascript

const numbers = [3, 4];
 
numbers.unshift(1, 2);
 
console.log(numbers); // [1, 2, 3, 4]

The arguments are added in order: 1 first, then 2. So 1 becomes index 0 and 2 becomes index 1.

The Queue Pattern: shift() + push()

A queue is a FIFO (first in, first out) data structure. The first item added is the first item removed. Think of a line at a store: the person who arrives first gets served first, so new arrivals join at the end:

javascript

const line = [];
 
line.push("Alice");
line.push("Bob");
line.push("Carol");
 
console.log(line); // ["Alice", "Bob", "Carol"]

Serving a customer removes the person at the front of the line and hands them back to whoever is running the checkout, which is exactly what shift() does on the array:

javascript

const line = ["Alice", "Bob", "Carol"];
 
const served = line.shift();
console.log(served); // "Alice"
console.log(line);   // ["Bob", "Carol"]

push() adds to the end and shift() removes from the front. Together they create a perfect queue.

This pattern is useful for task processing, print queues, event handling, and any system where order of arrival matters.

Performance: Why shift/unshift Are Slower

push() and pop() only touch the end of the array, so they are O(1), meaning the time they take does not depend on the array size. shift() and unshift() are O(n), meaning the time grows with the array size because every element must move.

Here is the difference visually. When you unshift "A" onto ["B", "C", "D"]:

text

Before: ["B", "C", "D"]
          ^0   ^1   ^2
 
After:  ["A", "B", "C", "D"]
          ^0   ^1   ^2   ^3

"B" moves from index 0 to index 1, "C" moves from 1 to 2, and "D" moves from 2 to 3.

Three elements had to shift position for a single addition.

For small arrays of a few hundred items, the difference is not noticeable. For arrays with tens of thousands of items, prefer push() and pop() when the order of elements does not matter.

Comparison: All Four Mutating Methods

When to Use Each

• push(): Adding items to a growing list, building arrays from loops.
• pop(): Processing items in reverse order, undo stacks.
• shift(): Processing items in arrival order, queue management.
• unshift(): Prepending items when a newer item should take priority.

Common Mistakes

Using unshift() in a loop on large arrays. Calling unshift() once per item re-indexes the whole array every time, which gets slow as the source list grows:

javascript

const source = [1, 2, 3, 4, 5];
const result = [];
 
for (const item of source) {
  result.unshift(item);
}
 
console.log(result); // [5, 4, 3, 2, 1]

Building the array with push() and reversing it once at the end produces the exact same result with far less work overall, because push() never has to re-index the existing elements the way unshift() does on every call:

javascript

const source = [1, 2, 3, 4, 5];
const resultFast = [];
 
for (const item of source) {
  resultFast.push(item);
}
resultFast.reverse();
 
console.log(resultFast); // [5, 4, 3, 2, 1]

Expecting unshift() to return the element. This is easy to get wrong, just like push(), because the return value looks like it could be the item you just added instead of the array's new length:

javascript

const arr = [2, 3];
 
// Wrong: unshift returns the new length, not 1
const element = arr.unshift(1);
console.log(element); // 3 (the length, not the value 1)
 
// The array was still modified correctly
console.log(arr); // [1, 2, 3]

Just like push(), unshift() returns the new length, not the added value. The array itself is already updated.

For a full comparison between adding and removing from both ends, see push and pop methods. When you need to extract a section from the middle without mutating, learn slice vs splice.