Метод unshift()

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

unshift() робить протилежне до того, що робить shift(): він додає один або кілька елементів на початок масиву і повертає нову довжину масиву. Метод змінює (мутує) вихідний масив, а всі наявні елементи при цьому зсуваються вправо на нові індекси.

Теорія

TL;DR

unshift() додає елементи на початок масиву, на індекс 0.
Усі наявні елементи зсуваються вправо.
Метод мутує вихідний масив.
Повертає нову довжину масиву, а не сам масив.
Можна передати кілька значень одразу, вони збережуть свій порядок.
Пара до нього: shift() знімає елемент з початку.

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

javascript

const fruits = ['banana', 'cherry'];
const newLength = fruits.unshift('apple');

console.log(fruits);     // ['apple', 'banana', 'cherry']
console.log(newLength);  // 3

Тут 'apple' став елементом з індексом 0, 'banana' переїхав з 0 на 1, 'cherry' з 1 на 2. У змінну потрапило число 3, бо метод повертає довжину, а не масив.

Кілька елементів за один виклик

javascript

const numbers = [3, 4];
numbers.unshift(1, 2);

console.log(numbers); // [1, 2, 3, 4]

Аргументи вставляються блоком і в тому самому порядку, у якому їх передали. Тобто unshift(1, 2) це не те саме, що два послідовні виклики unshift(1) та unshift(2): другий варіант дав би [2, 1, 3, 4].

Як це працює всередині

Створює місце на початку масиву.
Зсуває всі поточні елементи на нові індекси.
Вставляє нові значення на позиції, починаючи з 0.
Оновлює властивість length.

Саме через крок 2 unshift() дорожчий за push(): додавання в кінець не чіпає індекси інших елементів, а додавання на початок вимагає переписати індекси всього масиву.

Порівняння з іншими методами

Метод	Що робить	Де додає / видаляє	Що повертає	Мутує масив
`push()`	Додає елемент	У кінець	Нову довжину	Так
`pop()`	Видаляє елемент	З кінця	Видалений елемент	Так
`unshift()`	Додає елемент	На початок	Нову довжину	Так
`shift()`	Видаляє елемент	З початку	Видалений елемент	Так

Приклад використання: черга

javascript

const queue = [];

queue.unshift('first');
queue.unshift('second');

console.log(queue); // ['second', 'first']

Кожен новий елемент лягає перед попереднім, тому найстаріше значення лишається в кінці масиву. Таку чергу зручно обслуговувати через pop(): беремо з кінця те, що потрапило туди найраніше, і отримуємо поведінку FIFO (First In - First Out).

Коротко

Дія	Опис
`arr.unshift(value1, value2, ...)`	Додає елемент або елементи на початок
Повертає	Нову довжину масиву
Змінює масив	Так
Приклад	`[2, 3].unshift(1)` дає `[1, 2, 3]`

Підсумок: unshift() це метод для додавання елементів на початок масиву, з автоматичним зсувом усіх індексів і оновленням довжини.

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

Вважати, що метод повертає масив. const arr = old.unshift(x) покладе в arr число. Щоб працювати з масивом далі, викликайте unshift() окремим рядком.
Розраховувати на незмінність. unshift() мутує вихідний масив. Якщо потрібна нова копія, беріть [newItem, ...arr] або arr.toSpliced(0, 0, newItem).
Плутати порядок аргументів. unshift(1, 2) дає [1, 2, ...], а не [2, 1, ...].
Ставити unshift() у гарячий цикл. Кожен виклик переіндексовує весь масив, тож накопичення тисяч елементів з початку працює помітно повільніше за push() з подальшим reverse().
Використовувати на «масивоподібних» об'єктах без обережності. На arguments чи на колекції DOM метод доступний тільки через Array.prototype.unshift.call(...), і на живій колекції DOM він не спрацює.

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

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

Premium

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