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:
jsx
array.pop()
- Removes the last element in the array.
- Returns that element.
- Mutates the original array by decreasing its length by one.
Basic Example
jsx
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:
jsx
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:
jsx
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:
jsx
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
jsx
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
jsx
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
jsx
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:
jsx
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.
jsx
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.
jsx
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
jsx
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
jsx
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.
jsx
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:
jsx
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
jsx
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)
jsx
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:
jsx
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.