JavaScript Notes

JavaScript Array push() and pop() - Complete Tutorial with Examples

Master JavaScript array push() and pop() methods: add/remove from end, stack pattern, return values, mutation, performance, vs other methods, and interview Q&A.

push() and pop() are the two simplest array methods — and among the most used. They work on the end of an array and are the building blocks of the stack data structure.

Example

Visual: push() adds to end, pop() removes from end PUSH: Before: ["Apple", "Banana"] After: ["Apple", "Banana", "Cherry"] ← Cherry added at end POP: Before: ["Apple", "Banana", "Cherry"] After: ["Apple", "Banana"] ← Cherry removed, returned

pop() — Remove from the End

Syntax

js example

array.pop()
// Returns: the removed element (or undefined if empty)
// Mutates: YES

Basic Examples

Example

const fruits = ["Apple", "Banana", "Cherry"]; // Pop returns the removed element const removed = fruits.pop(); console.log("Removed:", removed); console.log("Remaining:", fruits);

Output

Removed: "Cherry"
Remaining: ["Apple", "Banana"]

Pop from Empty Array

js example

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

Output

undefined
0

Stack Data Structure with push() + pop()

A stack follows LIFO (Last In, First Out) — like a stack of plates. push() and pop() implement this perfectly:

Example

Stack Visualization (LIFO): push("HTML") → [HTML] push("CSS") → [HTML, CSS] push("JS") → [HTML, CSS, JS] pop() → [HTML, CSS] returns "JS" pop() → [HTML] returns "CSS"

Example

class Stack { constructor() { this.items = []; } push(item) { this.items.push(item); } pop() { return this.items.pop(); } peek() { return this.items[this.items.length - 1]; } isEmpty() { return this.items.length === 0; } size() { return this.items.length; } } const stack = new Stack(); stack.push("HTML"); stack.push("CSS"); stack.push("JavaScript"); console.log("Top:", stack.peek()); console.log("Pop:", stack.pop()); console.log("Pop:", stack.pop()); console.log("Size:", stack.size());

Output

Top: "JavaScript"
Pop: "JavaScript"
Pop: "CSS"
Size: 1

Real World Use Cases

Example

// 1. Undo functionality (like Ctrl+Z) const history = []; function addAction(action) { history.push(action); console.log(`Done: ${action}`); } function undo() { const last = history.pop(); if (last) console.log(`Undone: ${last}`); else console.log("Nothing to undo"); } addAction("Draw circle"); addAction("Fill red"); addAction("Add text"); undo(); // Undo "Add text" undo(); // Undo "Fill red" // 2. Call stack simulation const callStack = []; callStack.push("main()"); callStack.push("fetchData()"); callStack.push("parseJSON()"); console.log("Stack:", callStack); callStack.pop(); // parseJSON returns callStack.pop(); // fetchData returns console.log("Stack:", callStack); // 3. Building arrays dynamically const results = []; [1, 2, 3, 4, 5].forEach(n => { if (n % 2 === 0) results.push(n * 10); }); console.log("Even × 10:", results);

Output

Done: Draw circle
Done: Fill red
Done: Add text
Undone: Add text
Undone: Fill red
Stack: ["main()", "fetchData()", "parseJSON()"]
Stack: ["main()"]
Even × 10: [20, 40]

push() and pop() vs Other Methods

Method	End/Start	Action	Returns	Mutates
`push()`	End	Add	New length	✅ Yes
`pop()`	End	Remove	Removed element	✅ Yes
`unshift()`	Start	Add	New length	✅ Yes
`shift()`	Start	Remove	Removed element	✅ Yes
`concat()`	End	Add (copy)	New array	❌ No
`splice()`	Any	Add/Remove	Removed elements	✅ Yes

Example

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

Output

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

Common Mistakes

❌ Wrong	✅ Correct	Why
`arr.push([1, 2, 3])` to merge	`arr.push(...[1, 2, 3])`	Push without spread creates nested array
`arr.pop(item)` — passing argument	`arr.pop()`	`pop()` takes no arguments — extra args are ignored
`arr.push()` ignoring return value	`const len = arr.push(item)`	Return value is the new `length` — useful to know
Calling `pop()` without checking empty	`if (arr.length) arr.pop()` or use optional: `arr.at(-1)` check	`pop()` on empty returns `undefined` — can cause bugs if used as object

Cheat Sheet

Example

Add to end: arr.push("value") → returns new length Add multiple: arr.push("a", "b", "c") → adds all Add array spread: arr.push(...otherArr) → adds elements (not nested array) Remove last: arr.pop() → returns removed element Remove safely: const val = arr.length ? arr.pop() : null Peek last (no remove): arr[arr.length - 1] or arr.at(-1)

Interview Questions

Q1. What does push() return?

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

Q2. What does pop() return?

The removed element from the end. If the array is empty, returns undefined.

Q3. Do push() and pop() mutate the original array?

Yes, both mutate the original array directly. They are in-place operations.

Q4. How do you add all elements of one array into another using push()?

Use the spread operator: arr1.push(...arr2). Without spread, the entire second array is added as a single nested element.

Q5. What is the difference between push() and concat()?

push() mutates the original array and adds elements directly. concat() returns a new array and does not modify the original.

Q6. How would you implement a stack in JavaScript?

Use an array with push() to add (PUSH) and pop() to remove (POP). The last item pushed is always the first item popped — LIFO behavior.

Q7. What is the time complexity of push() and pop()?

Both are O(1) (constant time) — they only operate on the last element without re-indexing the array.

Key Takeaways

push() adds to the end, returns new length
pop() removes from the end, returns the removed element
Both mutate the original array
pop() on an empty array returns undefined — no error thrown
push(...otherArr) spreads elements; push(otherArr) creates a nested array
Together, push() + pop() implement the LIFO stack pattern
Time complexity: O(1) — fastest array operations

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Array push() and pop() - 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, push, pop

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 map() vs forEach() - Key Differences with Examples NextJavaScript Array reduce() Method - Complete Tutorial with Examples