JavaScript Roadmap — Day 32: Array Methods — Push, Pop, Shift, Unshift

📋 In This Lesson Day 32

1. The Problem

2. push() and pop()

3. unshift() and shift()

4. Stack vs Queue

5. Common Mistakes

6. Best Practices

7. Try It Yourself

8. Practice Tasks

Day 32 of 180 🕐 12 min read · ⚡ Intermediate Phase

Array Methods — Push, Pop, Shift, Unshift

Learn how to add and remove elements from arrays using push, pop, shift, and unshift — the foundation of array manipulation.

1. The Problem — Adding and Removing Items

Once you have an array, you'll often need to add new items or remove existing ones. JavaScript provides four fundamental methods for this: push(), pop(), unshift(), and shift(). These methods let you manipulate arrays efficiently.

Array Manipulation

// Starting array
let fruits = ["apple", "banana"];

// Add to END
fruits.push("cherry");     // ["apple", "banana", "cherry"]

// Remove from END
fruits.pop();            // ["apple", "banana"] (returns "cherry")

// Add to BEGINNING
fruits.unshift("mango");   // ["mango", "apple", "banana"]

// Remove from BEGINNING
fruits.shift();          // ["apple", "banana"] (returns "mango")

💡 The insight: push() and pop() work on the end of the array (fast). unshift() and shift() work on the beginning (slower because all elements need to reindex).

2. push() and pop() — Working with the End

push() adds one or more elements to the end of an array and returns the new length. pop() removes the last element and returns it. These are the most commonly used array methods because they are fast (O(1) operation).

push() and pop() Examples

let stack = [];

// push() — add to end
stack.push("first");
stack.push("second");
stack.push("third");
console.log(stack);  // ["first", "second", "third"]

// pop() — remove from end
let last = stack.pop();
console.log(last);     // "third"
console.log(stack);    // ["first", "second"]

// push() can add multiple items at once
stack.push("fourth", "fifth");
console.log(stack);  // ["first", "second", "fourth", "fifth"]

📝 QUIZ Test Your Understanding

Question 1: What does pop() return?

A) The new array length B) The removed element C) The updated array D) undefined

3. unshift() and shift() — Working with the Beginning

unshift() adds elements to the beginning of an array. shift() removes the first element. These operations are slower than push/pop because all other elements need to be re-indexed.

unshift() and shift() Examples

let queue = ["second", "third"];

// unshift() — add to beginning
queue.unshift("first");
console.log(queue);  // ["first", "second", "third"]

// shift() — remove from beginning
let first = queue.shift();
console.log(first);    // "first"
console.log(queue);    // ["second", "third"]

// unshift() can add multiple items
queue.unshift("zero", "one");
console.log(queue);  // ["zero", "one", "second", "third"]

📝 QUIZ Test Your Understanding

Question 2: Which method adds an element to the BEGINNING of an array?

A) push() B) pop() C) unshift() D) shift()

4. Stack vs Queue — Real-World Patterns

These four methods enable two important data structures: Stacks (LIFO — Last In, First Out) using push/pop, and Queues (FIFO — First In, First Out) using push/shift.

Stack and Queue

// STACK (LIFO) — Last In, First Out
let stack = [];
stack.push("first");
stack.push("second");
stack.push("third");
stack.pop();  // removes "third" (last in)
console.log(stack);  // ["first", "second"]

// QUEUE (FIFO) — First In, First Out
let queue = [];
queue.push("first");
queue.push("second");
queue.push("third");
queue.shift();  // removes "first" (first in)
console.log(queue);  // ["second", "third"]

📝 QUIZ Test Your Understanding

Question 3: Which methods create a Stack (LIFO) pattern?

A) push() and shift() B) unshift() and pop() C) push() and pop() D) unshift() and shift()

5. Common Mistakes to Avoid

Mistakes & Fixes

// ❌ MISTAKE 1: Forgetting that pop() returns the removed element
let arr = [1, 2, 3];
arr.pop();           // removes 3 but you didn't capture it
console.log(arr);    // [1, 2]

// ✅ FIX: Capture the returned value if you need it
let removed = arr.pop();
console.log(removed);  // 3

// ❌ MISTAKE 2: Confusing push() return value
let len = arr.push(4);
console.log(len);  // returns NEW length, not the array

// ✅ FIX: Remember push() returns length, not the array
arr.push(4);
console.log(arr);  // [1, 2, 4]

// ❌ MISTAKE 3: Using shift() on empty array
let empty = [];
let result = empty.shift();
console.log(result);  // undefined (not an error)

6. Best Practices — Professional Advice

🎯 Prefer push() and pop() for Performance

push() and pop() are O(1) operations (very fast). unshift() and shift() are O(n) (slower for large arrays). Use push/pop when possible.

📦 Use push() with Spread Operator for Merging

arr.push(...otherArr) is a clean way to merge arrays without loops.

🔄 Choose the Right Data Structure

Use Stack (push/pop) for undo/redo functionality. Use Queue (push/shift) for task processing.

7. Try It Yourself — Array Methods Playground

Experiment with push, pop, unshift, and shift below. See how each method changes the array.

✏️ Array Methods Playground

HTML

<div style="padding:24px;font-family:sans-serif;max-width:550px;">
  <h3 style="color:#0f1117;margin-bottom:16px;">🔧 Array Methods Demo</h3>
  
  <div style="margin-bottom:16px;">
    <label style="display:block;margin-bottom:8px;font-size:12px;font-weight:700;">Current Array:</label>
    <div id="arrayDisplay" style="background:#1e2235;padding:12px;border-radius:8px;font-family:monospace;color:#cdd6f4;margin-bottom:12px;">[1, 2, 3, 4, 5]</div>
  </div>
  
  <div style="margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;">
    <input type="text" id="itemInput" placeholder="Enter value" style="flex:1;padding:8px;border-radius:8px;border:1px solid #e5e7eb;">
    <button id="pushBtn" style="background:#4f6ef7;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">push()</button>
    <button id="popBtn" style="background:#f39c12;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">pop()</button>
    <button id="unshiftBtn" style="background:#00c896;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">unshift()</button>
    <button id="shiftBtn" style="background:#f38ba8;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">shift()</button>
    <button id="resetBtn" style="background:#6b7280;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;">Reset</button>
  </div>
  
  <div style="background:#1e2235;border-radius:8px;padding:12px;">
    <div style="font-size:12px;font-weight:700;color:#a8b8ff;margin-bottom:8px;">📤 Result:</div>
    <div id="output" style="font-family:monospace;font-size:13px;color:#cdd6f4;"></div>
  </div>
</div>

JAVASCRIPT

let items = [1, 2, 3, 4, 5];

function getValue() {
  const input = document.querySelector("#itemInput");
  const value = input.value.trim();
  input.value = "";
  if (value === "") return null;
  return isNaN(value) ? value : Number(value);
}

document.querySelector("#resetBtn").addEventListener("click", () => {
  items = [1, 2, 3, 4, 5];
  updateDisplay(`🔄 Array reset to original`);
});

updateDisplay(`✨ Ready! Click buttons to modify the array.`);

LIVE PREVIEW

💡 Try push(), pop(), unshift(), and shift()!

8. Practice Tasks

Task 1 — Easy: Shopping Cart

Create an empty array called cart. Use push() to add "Apple", "Banana", and "Cherry". Then use pop() to remove the last item. Log the final cart.

Task 2 — Medium: Queue Simulator

Create a queue using push() to add tasks: "Task 1", "Task 2", "Task 3". Then use shift() to process each task one by one. Log each task as it's processed.

Task 3 — Hard: Undo/Redo System

Create a simple undo/redo system using two stacks (push/pop). When user "adds" an action, push to history. When undo is called, pop from history and push to redo stack.

🎯 Key Takeaways

push() — adds to end, returns new length
pop() — removes from end, returns removed element
unshift() — adds to beginning, returns new length (slower)
shift() — removes from beginning, returns removed element (slower)
Stack (LIFO) — push() + pop()
Queue (FIFO) — push() + shift()

💼 Common Interview Questions

❓ Q: What's the difference between push() and unshift()?

💡 A: push() adds to the end, unshift() adds to the beginning.

❓ Q: Which is faster: pop() or shift()? Why?

💡 A: pop() is faster (O(1)) because it doesn't need to reindex. shift() is slower (O(n)) because all elements must move.

❓ Q: What does pop() return if the array is empty?

💡 A: undefined (not an error).

📖 Download Array Methods Cheat Sheet

Quick reference for push, pop, unshift, shift

Next Lesson

Day 33 — More Array Methods (slice, splice)

View Full Roadmap →

Enjoying this roadmap?

Follow Muhammad Waheed Asghar for daily JavaScript tips and updates!

Follow on LinkedIn Follow on Facebook

Search This Blog

WaheedBlog | Free Web Development Tutorials for Beginners

JavaScript Roadmap — Day 32: Array Methods — Push, Pop, Shift, Unshift

Array Methods — Push, Pop, Shift, Unshift

1. The Problem — Adding and Removing Items

2. push() and pop() — Working with the End

3. unshift() and shift() — Working with the Beginning

4. Stack vs Queue — Real-World Patterns

5. Common Mistakes to Avoid

6. Best Practices — Professional Advice

7. Try It Yourself — Array Methods Playground

8. Practice Tasks

Task 1 — Easy: Shopping Cart

Task 2 — Medium: Queue Simulator

Task 3 — Hard: Undo/Redo System

Popular Posts

Data Analytics Complete Course (2025–26): Beginner to Pro Script

Artificial Intelligence in Business: Strategy & Competitive Advantage (2025–26)