The pop() method

JavaScriptJunior~2 min read

pop() removes the last element of an array and returns its value. It is the "opposite twin" of push(): one appends to the end, the other takes from the end, and both change the original array in place.

Theory

TL;DR

Removes an element from the end of the array.
Returns the removed element, not the length.
Mutates the original array and decreases length by 1.
On an empty array it returns undefined.
Together with push() it implements a stack, that is a LIFO structure.

Quick example

javascript

const fruits = ["apple", "banana", "cherry"];
const last = fruits.pop();

console.log(last);   // "cherry", the removed element
console.log(fruits); // ["apple", "banana"]

Note that:

pop() changes the original array, it mutates it.
It returns the removed element, not the length.
If the array is empty it returns undefined.

An empty array

javascript

const arr = [];
const removed = arr.pop();

console.log(removed); // undefined
console.log(arr);     // []

There is no error: the method simply does nothing and hands back undefined. That is why it is worth checking the result before using it further, for example with if (removed !== undefined).

How the method works

It removes the element at index length - 1.
It decreases length by 1.
It returns that element's value.

Because the method works at the end of the array, the indexes of the remaining elements do not shift and the operation runs in constant time. By contrast shift(), which takes the first element, forces the engine to reindex the whole array.

Comparison with `push()`

Method	What it does	Returns	Changes the array
`push()`	Adds to the end	The new length	Yes
`pop()`	Removes from the end	The removed element	Yes

Using them together: a stack

javascript

const stack = [];

stack.push("a");
stack.push("b");
stack.push("c");

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

console.log(stack.pop()); // "c"
console.log(stack.pop()); // "b"
console.log(stack);       // ["a"]

push() and pop() are often used together to implement a stack, a data structure that follows the "last in, first out" (LIFO) principle. This is exactly how navigation history, undo functionality and the JavaScript call stack itself work.

Summary table

Action	Description
`arr.pop()`	Removes the last element
Returns	The removed element
Changes the array	Yes
On an empty array	Returns `undefined`

Common mistakes

Expecting the length. pop() returns the element while push() returns the length. The two are easy to mix up.
Using pop() just to look at the last element. It is a destructive operation. To read a value, use arr.at(-1) or arr[arr.length - 1].
Not distinguishing undefined from an empty array and undefined as a real value. The array [undefined] also returns undefined, so check arr.length before the call.
Mutating state directly. In React, state.pop() will not trigger a re-render because the array reference did not change. Use state.slice(0, -1) instead.
Confusing pop() with shift(). pop() takes an element from the end, shift() from the beginning.
Chaining the call. arr.pop().pop() throws, because the first call returns an element, not an array.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.