JavaScript Array pop() method: Syntax, Usage, and Examples

The pop() method in JavaScript removes the last element from an array and returns that element. It changes the original array by reducing its length by one. The JavaScript array pop method is often used when working with stacks, where the last item added is the first one removed (LIFO – Last In, First Out). Whether you're managing undo operations, trimming arrays, or writing logic for custom data structures, array pop JavaScript techniques are both efficient and easy to implement.

How to Use JavaScript Array pop

Here’s the basic syntax:

array.pop()

• Removes the last element in the array.
• Returns that element.
• Mutates the original array by decreasing its length by one.

Basic Example

let fruits = ["apple", "banana", "cherry"];
let lastFruit = fruits.pop();

console.log(lastFruit); // "cherry"
console.log(fruits);    // ["apple", "banana"]

The last item is removed and returned. The array is updated in place.

When to Use the Array pop JavaScript Method

Stack-Based Data Structures

Stacks follow the Last In, First Out (LIFO) principle. You can build one easily using push and pop:

let stack = [];

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

console.log(stack.pop()); // "third"
console.log(stack);       // ["first", "second"]

Trimming an Array

If you want to remove the last element conditionally or trim data:

let scores = [10, 20, 30, 40];
scores.pop();

console.log(scores); // [10, 20, 30]

This is helpful when cleaning up data or adjusting array length manually.

Reversing Actions

In undo functionality, pop() lets you remove the last operation from a history log:

let history = ["open", "edit", "save"];
let lastAction = history.pop();

console.log(lastAction); // "save"
console.log(history);    // ["open", "edit"]

Examples of JavaScript Array pop() in Practice

Removing the Last Element

let colors = ["red", "green", "blue"];
let removedColor = colors.pop();

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

Using pop() Until the Array Is Empty

let stack = ["task1", "task2", "task3"];

while (stack.length > 0) {
  console.log("Processing:", stack.pop());
}

This loop continues until the array has no more elements.

pop with Array of Objects

let users = [
  { id: 1, name: "Ana" },
  { id: 2, name: "Ben" }
];

let lastUser = users.pop();
console.log(lastUser.name); // "Ben"
console.log(users.length);  // 1

Works the same way regardless of the type of element in the array.

Learn More About JavaScript Array pop()

What Happens on an Empty Array?

If you use pop() on an empty array, it returns undefined:

let empty = [];
let result = empty.pop();

console.log(result); // undefined
console.log(empty);  // []

The method is safe to call without checking length first.

pop() vs shift()

• pop() removes the last element.
• shift() removes the first element.

let items = [1, 2, 3];
items.pop();   // [1, 2]
items.shift(); // [2]

Choose based on whether you’re working from the end or the beginning.

Modifies the Original Array

Unlike methods like slice() or concat(), pop() changes the array in place.

let list = ["a", "b", "c"];
let result = list.pop();

console.log(result); // "c"
console.log(list);   // ["a", "b"]

This is important to remember when passing arrays to functions or managing shared data.

Using pop() in Conditional Statements

let messages = ["msg1", "msg2"];

if (messages.length > 0) {
  let latest = messages.pop();
  console.log("Deleted:", latest);
}

Always checking length before calling pop() helps avoid unnecessary undefined values.

Combining push and pop

let recentEdits = [];

recentEdits.push("Edit 1");
recentEdits.push("Edit 2");

let undo = recentEdits.pop(); // "Edit 2"

This mirrors undo/redo logic in text editors, drawing apps, or form states.

pop() in Custom Functions

You can build custom functions using pop() to manage history, remove items, or simplify user flows.

function removeLastItem(arr) {
  if (arr.length === 0) return null;
  return arr.pop();
}

let items = [100, 200, 300];
console.log(removeLastItem(items)); // 300

You control return behavior and error handling.

Accessing the Last Element Without Removing

If you want to check the last item but not remove it:

let things = ["pen", "pencil", "eraser"];
let lastItem = things[things.length - 1];

console.log(lastItem); // "eraser"
console.log(things);   // ["pen", "pencil", "eraser"]

Use this when you need to inspect without mutating.

pop() with Function Callbacks

let todos = ["task1", "task2", "task3"];

function completeTask(tasks) {
  const done = tasks.pop();
  console.log("Completed:", done);
}

completeTask(todos); // "Completed: task3"

Use this pattern for modular logic in task queues or process flows.

Edge Case: Using pop() on Strings (Incorrect)

let name = "John";
name.pop(); // ❌ This will throw an error

Strings are not arrays. Only arrays support pop(). Use slice() or convert the string to an array if needed:

let chars = name.split("");
chars.pop();
console.log(chars.join("")); // "Joh"

The JavaScript array pop method is a powerful way to remove and retrieve the last element of an array. It plays a central role in stack behavior, array manipulation, and undo patterns. Whether you’re managing user actions, trimming results, or simplifying data processing, knowing when and how to use array pop JavaScript operations makes your code more predictable and efficient.