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

Покращити цю статтю

Допрацюйте відповідь до «Метод push()». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`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` у них немає.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати500 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.