JavaScript Array pop() Method

What You’ll Learn

The pop() method removes the last element from an array, returns that value, and shortens the array by one. This tutorial covers syntax, five examples, empty-array behavior, stack patterns with push(), and how pop() differs from non-mutating methods like slice().

Introduction

Arrays often grow and shrink. When you need to take something off the end—the most recently added item, the last breadcrumb, or the top of a stack—pop() is the built-in way to do it in one step.

Unlike map() or slice(), pop() mutates the original array. Always remember that the source array will be shorter after the call.

Understanding the pop() Method

array.pop() removes the element at index length - 1, decrements length, and returns the removed value. If the array is empty, it returns undefined and leaves the array unchanged.

Pair it with push() for a Last-In-First-Out (LIFO) stack: items go on top with push, come off top with pop.

📝 Syntax

General form of Array.prototype.pop:

array.pop()

Parameters

• None.

Return value

• The removed last element.
• undefined if the array is empty.

Side effects

• Mutates the array: length decreases by 1.
• Former last index becomes a hole that is discarded (array compacts).

Common patterns

• const last = arr.pop() — remove and capture.
• while (stack.length) stack.pop() — drain stack.
• if (arr.length) arr.pop() — guard empty arrays.
• stack.push(x); stack.pop() — LIFO pair.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const colors = ["red", "green", "blue", "yellow"];

const removed = colors.pop();

console.log(removed);
// "yellow"

console.log(colors);
// ["red", "green", "blue"]

yellow
["red", "green", "blue"]

const empty = [];

const result = empty.pop();

console.log(result);
// undefined

console.log(empty.length);
// 0

undefined
0

const colors = ["red"];

let removed;

if (colors.length > 0) {
  removed = colors.pop();
  console.log("Removed:", removed);
} else {
  console.log("Array is empty.");
}
// Removed: red

console.log(colors);
// []

Removed: red
[]

const stack = [];

stack.push("first");
stack.push("second");
stack.push("third");

console.log(stack.pop());
// "third"

console.log(stack.pop());
// "second"

console.log(stack);
// ["first"]

third
second
["first"]

const nums = [10, 20, 30];

const copyAllButLast = nums.slice(0, -1);

console.log("slice copy:", copyAllButLast);
// [10, 20]

console.log("original after slice:", nums);
// [10, 20, 30] — unchanged

const popped = nums.pop();

console.log("popped:", popped);
// 30

console.log("original after pop:", nums);
// [10, 20]

slice copy: [10, 20]
original after slice: [10, 20, 30]
popped: 30
original after pop: [10, 20]

🚀 Common Use Cases

• Stack operations — undo/redo, call stacks, DFS.
• Trim lists — remove the most recently added item.
• History navigation — pop previous state after push.
• Processing queues from the end — when order allows LIFO.
• Drain arrays — while (arr.length) arr.pop().
• Pair with push — dynamic stack without a class.

📝 Notes

• Mutates the array—length decreases by 1.
• Empty array → returns undefined (no throw).
• Return value is the removed element—store it if needed.
• O(1) for end removal; shift() at start is slower on large arrays.
• For immutable updates, use spread/slice: arr.slice(0, -1).
• ES3—supported everywhere JavaScript runs.

💡 Best Practices