Массивы: добавление и удаление через push/pop/shift/unshift

Четыре базовых метода позволяют добавлять и удалять элементы в начале или в конце массива:

push - добавить в конец
pop - удалить из конца
unshift - добавить в начало
shift - удалить из начала

Все эти методы изменяют исходный массив.

push: добавить элемент в конец

push добавляет один или несколько элементов в конец массива и возвращает новую длину.

const items = ["a", "b"];

const newLen = items.push("c");
console.log(items);  // ["a", "b", "c"]
console.log(newLen); // 3

Можно добавить сразу несколько значений:

const items = ["a"];
items.push("b", "c", "d");
console.log(items); // ["a", "b", "c", "d"]

pop: удалить элемент с конца

pop удаляет последний элемент массива и возвращает удаленный элемент.

const items = ["a", "b", "c"];

const last = items.pop();
console.log(items); // ["a", "b"]
console.log(last);  // "c"

Если массив пустой, pop вернет undefined.

const items = [];

const value = items.pop();
console.log(value); // undefined
console.log(items); // []

unshift: добавить элемент в начало

unshift добавляет элементы в начало массива и возвращает новую длину.

const items = ["b", "c"];

const newLen = items.unshift("a");
console.log(items);  // ["a", "b", "c"]
console.log(newLen); // 3

Можно добавить несколько:

const items = ["c"];
items.unshift("a", "b");
console.log(items); // ["a", "b", "c"]

shift: удалить элемент с начала

shift удаляет первый элемент массива и возвращает удаленный элемент.

const items = ["a", "b", "c"];

const first = items.shift();
console.log(items); // ["b", "c"]
console.log(first); // "a"

Если массив пустой, shift вернет undefined.

const items = [];

const value = items.shift();
console.log(value); // undefined
console.log(items); // []

Что важно помнить про начало и конец массива

Операции с концом (push, pop) обычно быстрее и проще, потому что индексы других элементов не меняются.

Операции с началом (shift, unshift) двигают индексы всех элементов, поэтому на больших массивах они могут быть заметно медленнее.

Это не значит, что shift/unshift нельзя использовать - просто стоит помнить, что они “перестраивают” массив.

Типичные сценарии

Стек (stack): LIFO

Стек - “последним пришел, первым ушел”. Часто делается через push и pop.

const stack = [];
stack.push("a");
stack.push("b");
stack.push("c");

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

Очередь (queue): FIFO

Очередь - “первым пришел, первым ушел”. Часто делают через push и shift.

const queue = [];
queue.push("a");
queue.push("b");
queue.push("c");

console.log(queue.shift()); // "a"
console.log(queue.shift()); // "b"
console.log(queue);         // ["c"]

Частые ошибки

1) Ожидание, что методы вернут массив

push и unshift возвращают число (длину массива), а не массив.

const items = ["a", "b"];
const res = items.push("c");

console.log(res);   // 3
console.log(items); // ["a", "b", "c"]

Если нужен новый массив без изменения исходного, используются другие подходы (они будут дальше в модуле).

2) Смешивание методов и непонимание порядка

push/pop работают с концом, unshift/shift - с началом. Если перепутать, получится другой порядок элементов.

Что стоит запомнить

push добавляет в конец и возвращает новую длину.
pop удаляет с конца и возвращает удаленный элемент.
unshift добавляет в начало и возвращает новую длину.
shift удаляет с начала и возвращает удаленный элемент.
Все четыре метода изменяют исходный массив.
Операции с началом массива обычно тяжелее, чем с концом.