Метод pop()

JavaScriptJunior~2 хв читання

pop() видаляє останній елемент масиву і повертає його значення. Це «зворотний брат» методу push(): там елемент додається в кінець, тут забирається з кінця, і обидва змінюють вихідний масив на місці.

Теорія

TL;DR

Видаляє елемент з кінця масиву.
Повертає саме видалений елемент, а не довжину.
Мутує вихідний масив і зменшує length на 1.
На порожньому масиві повертає undefined.
Разом з push() реалізує стек, тобто структуру LIFO.

Швидкий приклад

javascript

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

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

Зверніть увагу:

pop() змінює вихідний масив, мутує його.
Повертає саме видалений елемент, а не довжину.
Якщо масив порожній, повертає undefined.

Порожній масив

javascript

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

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

Помилки не буде: метод просто нічого не робить і віддає undefined. Через це варто перевіряти результат перед подальшим використанням, наприклад if (removed !== undefined).

Як працює метод

Видаляє елемент з індексом length - 1.
Зменшує length на 1.
Повертає значення цього елемента.

Оскільки метод працює саме з кінцем масиву, індекси решти елементів не зсуваються, і операція виконується за константний час. Для порівняння, shift(), який знімає перший елемент, змушує рушій переіндексувати весь масив.

Порівняння з `push()`

Метод	Що робить	Повертає	Змінює масив
`push()`	Додає в кінець	Нову довжину	Так
`pop()`	Видаляє з кінця	Видалений елемент	Так

Спільне використання: стек

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() і pop() часто використовують разом, щоб реалізувати стек (stack), структуру даних за принципом «останній увійшов, перший вийшов» (LIFO). Саме так працюють історія переходів, скасування дій (undo) і стек викликів самого JavaScript.

Коротка таблиця

Дія	Опис
`arr.pop()`	Видаляє останній елемент
Повертає	Видалений елемент
Змінює масив	Так
На порожньому масиві	Повертає `undefined`

Типові помилки

Очікувати довжину. pop() повертає елемент, а push() довжину. Їх легко переплутати.
Використовувати pop(), щоб просто подивитися на останній елемент. Це руйнівна операція. Для читання беріть arr.at(-1) або arr[arr.length - 1].
Не розрізняти undefined від пустого масиву і undefined як реального значення. Масив [undefined] теж поверне undefined, тому перевіряйте arr.length перед викликом.
Мутувати state напряму. У React state.pop() не спричинить перерендер, бо посилання на масив не змінилося. Використовуйте state.slice(0, -1).
Плутати pop() і shift(). pop() знімає елемент з кінця, shift() з початку.
Викликати в ланцюжку. arr.pop().pop() впаде, бо перший виклик повертає елемент, а не масив.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.