JavaScript Notes

JavaScript Array shift() and unshift() - Complete Tutorial with Examples

Master JavaScript array shift() and unshift(): add/remove from start, queue pattern, return values, mutation, performance vs push/pop, real-world examples, and interview Q&A.

shift() and unshift() are the counterparts of pop() and push() — but they work at the beginning (front) of the array. Together, all four methods give you full control over both ends of an array.

Example

Visual: shift() removes from front, unshift() adds to front UNSHIFT: Before: ["Banana", "Cherry"] After: ["Apple", "Banana", "Cherry"] ← Apple added at front SHIFT: Before: ["Apple", "Banana", "Cherry"] After: ["Banana", "Cherry"] ← Apple removed, returned

shift() — Remove from the Front

Syntax

js example

array.shift()
// Returns: the removed element (or undefined if empty)
// Mutates: YES
// Performance: O(n) — must re-index all remaining elements

Basic Examples

Example

const queue = ["first", "second", "third"]; // Shift removes and returns the first element const removed = queue.shift(); console.log("Removed:", removed); console.log("Remaining:", queue);

Output

Removed: "first"
Remaining: ["second", "third"]

Shift from Empty Array

js example

const empty = [];
const result = empty.shift();
console.log(result);       // undefined — no error!
console.log(empty.length); // 0

Output

undefined
0

Queue Data Structure with unshift() + shift()

A queue follows FIFO (First In, First Out) — like a ticket line. People join at the back (push) and leave from the front (shift):

Example

Queue Visualization (FIFO): push("Alice") → ["Alice"] push("Bob") → ["Alice", "Bob"] push("Carol") → ["Alice", "Bob", "Carol"] shift() → ["Bob", "Carol"] returns "Alice" shift() → ["Carol"] returns "Bob"

Example

class Queue { constructor() { this.items = []; } enqueue(item) { this.items.push(item); } // Add to back dequeue() { return this.items.shift(); } // Remove from front front() { return this.items[0]; } isEmpty() { return this.items.length === 0; } size() { return this.items.length; } } const q = new Queue(); q.enqueue("Alice"); q.enqueue("Bob"); q.enqueue("Carol"); console.log("Front:", q.front()); console.log("Serve:", q.dequeue()); console.log("Serve:", q.dequeue()); console.log("Size:", q.size());

Output

Front: "Alice"
Serve: "Alice"
Serve: "Bob"
Size: 1

Real World Use Cases

Example

// 1. Task queue (print queue, job queue) const printQueue = []; printQueue.push("Document1.pdf"); // Add job printQueue.push("Report.xlsx"); printQueue.push("Photo.png"); while (printQueue.length > 0) { const job = printQueue.shift(); console.log(`Printing: ${job}`); } // 2. Add priority item to front of list const notifications = ["Email received", "Meeting at 3pm"]; notifications.unshift("🚨 URGENT: Server down!"); console.log(notifications[0]); // 3. Sliding window (keep last N items) const recentSearches = []; function addSearch(term) { recentSearches.unshift(term); if (recentSearches.length > 5) recentSearches.pop(); // Keep only 5 } ["javascript", "python", "react", "node", "typescript", "vue"].forEach(addSearch); console.log("Recent:", recentSearches);

Output

Printing: Document1.pdf
Printing: Report.xlsx
Printing: Photo.png
"🚨 URGENT: Server down!"
Recent: ["vue", "typescript", "node", "react", "python"]

All Four Array End Methods Compared

Method	End	Action	Returns	Mutates	O(?)
`push()`	Back	Add	New length	✅ Yes	O(1)
`pop()`	Back	Remove	Removed element	✅ Yes	O(1)
`unshift()`	Front	Add	New length	✅ Yes	O(n)
`shift()`	Front	Remove	Removed element	✅ Yes	O(n)

Why is shift/unshift O(n)? They must re-index every element after the operation. If you add to position 0, elements at index 0, 1, 2... must become 1, 2, 3... — that's O(n).

Example

const arr = ["B", "C", "D"]; arr.unshift("A"); // Add to front console.log(arr); // ["A", "B", "C", "D"] arr.push("E"); // Add to back console.log(arr); // ["A", "B", "C", "D", "E"] const first = arr.shift(); // Remove from front console.log(first, arr); // "A" ["B", "C", "D", "E"] const last = arr.pop(); // Remove from back console.log(last, arr); // "E" ["B", "C", "D"]

Output

["A", "B", "C", "D"]
["A", "B", "C", "D", "E"]
A ["B", "C", "D", "E"]
E ["B", "C", "D"]

Memory Diagram: Why shift/unshift is O(n)

Example

Array in Memory (indices are contiguous): Before unshift("X"): [A][B][C][D] 0 1 2 3 After unshift("X"): X gets index 0 A must move to index 1 ← re-indexed B must move to index 2 ← re-indexed C must move to index 3 ← re-indexed D must move to index 4 ← re-indexed Result: [X][A][B][C][D] 0 1 2 3 4 This re-indexing is O(n) work! Compare push(): just append to end — no re-indexing needed → O(1)

Common Mistakes

❌ Wrong	✅ Correct	Why
`arr.unshift(item)` in performance-critical loops	Use `arr.push(item)` then reverse	unshift is O(n) — in loops it becomes O(n²)
`arr.shift()` without checking empty	`if (arr.length) arr.shift()`	Returns `undefined` on empty — can cause bugs
`arr.unshift(a, b)` expecting `[b, a, ...]`	Gets `[a, b, ...]`	Multiple args are inserted in the order given
Using `unshift` when `push` is sufficient	Check which end you need	Prefer `push/pop` (O(1)) over `shift/unshift` (O(n)) when order allows

Cheat Sheet

Example

Add to front: arr.unshift("value") → returns new length Add multiple front: arr.unshift("a", "b") → inserts ["a", "b"] in order Remove from front: arr.shift() → returns removed element Remove safely: const val = arr.length ? arr.shift() : null Peek front (no remove): arr[0] Queue pattern: push() to add, shift() to serve (FIFO) Stack pattern: push() to add, pop() to serve (LIFO)

Interview Questions

Q1. What does unshift() return?

The new length of the array after the element(s) were added.

Q2. What does shift() return?

The removed element from the front of the array. Returns undefined if the array is empty.

Q3. Do shift() and unshift() mutate the original array?

Yes, both mutate the original array. They re-index all existing elements.

Q4. What is the time complexity of shift() vs pop()?

shift() is O(n) — it must re-index every element after removing index 0. pop() is O(1) — it only removes the last element, no re-indexing needed.

Q5. How is a queue different from a stack?

A stack is LIFO (Last In, First Out) — use push()/pop(). A queue is FIFO (First In, First Out) — use push() to add and shift() to remove.

Q6. Why is unshift() slower than push() for large arrays?

push() just appends to the end in O(1) time. unshift() inserts at the front, forcing JavaScript to move every existing element one position to the right — O(n) work.

Q7. How would you add multiple elements to the front while preserving their order?

arr.unshift("a", "b", "c") inserts them in order — result starts with ["a", "b", "c", ...]. This is the same order you'd expect.

Key Takeaways

unshift() adds to the front, returns new length — O(n)
shift() removes from the front, returns the removed element — O(n)
Both mutate the original array
shift/unshift are slower than push/pop due to re-indexing
Together, push() + shift() implement the FIFO queue pattern
For performance-sensitive code, prefer push/pop (O(1)) over shift/unshift (O(n))

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Array shift() and unshift() - Complete Tutorial with Examples.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, arrays, shift, unshift

Continue learning this concept

ArraysJavaScript Array Basics - Complete BeginnerLearn JavaScript array basics from scratch: creation, indexing, length, iteration, mutation vs copy, and real-world patterns. 30+ examples with outputs.ArraysJavaScript Array Methods - Complete Reference Guide with ExamplesComprehensive guide to all JavaScript array methods: push, pop, splice, slice, sort, flat, map, filter, reduce, ES2023 methods with examples, outputs, and performance tips.ArraysJavaScript Array Programs - 20+ Practice Problems with SolutionsMaster JavaScript arrays with 20+ practical programs: sum, max, reverse, duplicates, sorting, searching, matrix operations, and real-world coding patterns.ArraysJavaScript Arrays Basics - Complete Guide with Examples & DiagramsMaster JavaScript arrays from scratch. Learn array creation, indexing, iteration, multidimensional arrays, reference types, and memory behavior with 30+ examples.ArraysJavaScript Array filter() Method - Complete Tutorial with ExamplesMaster JavaScript array filter() method: syntax, callback, filtering objects, chaining, remove falsy values, duplicates, real-world use cases, and interview Q&A.ArraysJavaScript filter() Method — Complete Guide with Examples 2026Master the JavaScript Array filter() method with detailed syntax, 6+ code examples with output, comparison with find() and forEach(), common mistakes, interview questions, and FAQ. Beginner-friendly guide in English with detailed explanations.

PreviousJavaScript reduce() Method — Complete Deep Dive with Examples 2026 NextJavaScript Array sort() Method - Complete Tutorial with Examples