Skip to main content

Метод push()

JavaScriptJunior~2 хв читання
Запропонувати правку

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

Теорія

TL;DR

  • Додає елементи в кінець масиву.
  • Мутує вихідний масив, нового масиву не створює.
  • Повертає нову довжину масиву, тобто число, а не сам масив.
  • Приймає скільки завгодно аргументів: arr.push(3, 4, 5).
  • Немутуюча альтернатива, це spread: const newArr = [...arr, 3].

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

javascript
const fruits = ["apple", "banana"]; const newLength = fruits.push("cherry"); console.log(fruits); // ["apple", "banana", "cherry"] console.log(newLength); // 3

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

  • Метод змінює вихідний масив, мутує його.
  • Повертає не сам масив, а кількість елементів після додавання.

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

push() приймає будь-яку кількість аргументів і додає їх по черзі.

javascript
const arr = [1, 2]; arr.push(3, 4, 5); console.log(arr); // [1, 2, 3, 4, 5]

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

  • Елементи додаються в кінець масиву.
  • Індекси нових елементів починаються з поточного значення length.
  • Значення, яке повертається, це нове значення arr.length.

Тобто для масиву з двох елементів перший доданий елемент отримає індекс 2, наступний 3 і так далі.

Важливі нюанси

  • push() працює тільки з масивами або з масивоподібними об'єктами, наприклад через Array.prototype.push.call(arrayLike, value).

  • Якщо написати arr = arr.push(...), ви втратите сам масив, бо у змінну потрапить число:

    javascript
    let arr = [1, 2]; arr = arr.push(3); // arr now holds the number 3, the array is lost console.log(arr); // 3

    Якщо масив оголошено через const, такий рядок взагалі впаде з TypeError: Assignment to constant variable. І це добре, бо помилку видно одразу.

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

ПитанняВідповідь
Що робитьДодає елементи в кінець масиву
Чи змінює вихідний масивТак, мутує його
Що повертаєНову довжину масиву
Чи можна додати кілька елементівТак
Прикладarr.push(1, 2, 3)

Альтернатива без мутації

Якщо потрібно додати елемент без зміни оригіналу, наприклад у React state або в Redux reducer, використовуйте spread:

javascript
const arr = [1, 2]; const newArr = [...arr, 3]; console.log(newArr); // [1, 2, 3] console.log(arr); // [1, 2] (unchanged)

Такий підхід створює новий масив, тому порівняння за посиланням спрацює і компонент перерендериться.

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

  • Присвоювати результат назад: arr = arr.push(x) перетворює змінну на число і знищує посилання на масив.
  • Очікувати новий масив. push() не повертає масив, тому ланцюжок arr.push(1).push(2) впаде з помилкою: у числа немає методу push.
  • Мутувати state напряму. У React state.push(item) не спричинить перерендер, бо посилання на масив не змінилося. Потрібен [...state, item].
  • Плутати push() і concat(). concat() не мутує і повертає новий масив, push() мутує і повертає довжину.
  • Розгортати масив у масив. arr.push([1, 2]) додасть один елемент, вкладений масив. Щоб додати елементи по одному, потрібен arr.push(...[1, 2]).
  • Викликати push() на рядку. Рядки незмінні, методу push у них немає.

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

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

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

Запропонувати правку