Suggest an edit

Improve this article

Refine the answer for “The pop() method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts561 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.