JavaScript Reference
Array.prototype.shift()
Remove and return the first element. Re-indexes the rest.
Last updated: October 2026
Definition: Array.prototype.shift() removes the first element from an array and returns it. It mutates the original array and shifts every remaining element down by one index. On an empty array, returns undefined.
🎬 Live Example
Five shift patterns. Click any button to see the output.
💡 shift is O(n) — slow on large arrays. pop is O(1).
Basic Syntax
array.shift()
// No arguments
// Returns the removed first element, or undefined if empty
// Mutates the original array — re-indexes all elementsRemove the First Element
const fruits = ['apple', 'banana', 'cherry'];
const first = fruits.shift();
// first: 'apple'
// fruits: ['banana', 'cherry']Queue Pattern (FIFO)
const queue = [];
queue.push('email1');
queue.push('email2');
// Process in order received
while (queue.length > 0) {
send(queue.shift());
}
// Sends email1, then email2Performance note: For large queues, use a pointer index instead of shift. shift re-indexes all remaining elements on each call.
Safe on Empty Arrays
const arr = [];
const val = arr.shift();
// val: undefined
// arr: [] (no error)Performance Warning
// ❌ SLOW for large arrays — O(n²) total
const big = [...Array(100000).keys()];
while (big.length) {
big.shift(); // re-indexes 100K elements each call
}
// ✅ FAST — use pointer
let head = 0;
while (head < big.length) {
process(big[head++]);
}O(n) per call. shift is the slowest array removal method. For hot loops, use a pointer or reverse-then-pop.
Non-Destructive Alternative
// ❌ Mutates
const arr = ['a', 'b', 'c'];
arr.shift();
// ✅ Non-destructive
const original = ['a', 'b', 'c'];
const rest = original.slice(1);
// original: ['a', 'b', 'c']
// rest: ['b', 'c']
// ✅ ES2023+ (modern browsers)
const newer = original.toSpliced(0, 1);🎯 shift vs pop vs unshift vs splice
| Method | Action | Complexity |
|---|---|---|
shift | Remove from start | O(n) — slow |
pop | Remove from end | O(1) — fastest |
unshift | Add to start | O(n) — slow |
splice | Remove anywhere | O(n) |
⚠️ Common Mistakes
- Using shift in hot loops. O(n) per call makes it O(n²). Use a pointer.
- Assuming shift returns the array. It returns the removed element.
- React state mutation.
state.shift()won't re-render. Usestate.slice(1). - Confusing shift with unshift. shift = remove, unshift = add (both at start).
- Forgetting index changes. After shift, every element's index decreases by 1.
- Using shift on an empty array and expecting error. It returns undefined silently.
❓ Frequently Asked Questions
What does Array.shift() do in JavaScript?
Array.shift() removes the first element from an array and returns that element. It mutates the original array and shifts all remaining elements down by one index.
Is shift slower than pop?
Yes. pop removes from the end and is O(1). shift removes from the start and must re-index every remaining element, making it O(n). For large arrays, pop is significantly faster.
What does shift return on an empty array?
shift() returns undefined on an empty array and does not change the array. It never throws an error.
What is the difference between shift and slice?
shift mutates the original array by removing the first element. slice(1) returns a new array with the first element removed without modifying the original.
When should I use shift?
Use shift when implementing a queue (FIFO) where you process items in the order they were added. Avoid it in performance-critical loops on large arrays.