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

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

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

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

Контент

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

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

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

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

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

**`delete` і `splice()` обидва можуть прибрати елемент масиву, але роблять це по-різному: `delete` видаляє лише властивість і залишає порожній слот, а `splice()` видаляє елемент, зсуває решту та зменшує `length`.** Саме тому для масивів стандартним інструментом є `splice()`, а `delete` доречний для звичайних об'єктів.

## Теорія

### TL;DR

- `delete arr[i]` видаляє **властивість**, а не елемент: індекси не зсуваються, `length` не змінюється.
- Після `delete` у масиві лишається **порожній слот**, тобто масив стає розрідженим.
- `splice(start, deleteCount)` видаляє елементи **по-справжньому**: решта зсувається, `length` перераховується.
- `splice()` повертає **масив видалених елементів**, `delete` повертає лише `true` або `false`.
- Методи перебору (`map`, `forEach`, `filter`) порожні слоти пропускають, що дає непередбачувану поведінку.
- Правило: `splice()` для масивів, `delete` для об'єктів.

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

```javascript
const a = [1, 2, 3];
const b = [1, 2, 3];

delete a[1];
b.splice(1, 1);

console.log(a);        // [1, <1 empty item>, 3]
console.log(b);        // [1, 3]
console.log(a.length); // 3
console.log(b.length); // 2
```

Один і той самий намір «прибрати другий елемент» дає два зовсім різні масиви.

### delete: видаляє значення, але не елемент масиву

```javascript
const arr = [10, 20, 30];
delete arr[1];

console.log(arr);        // [10, <1 empty item>, 30]
console.log(arr.length); // 3
```

Що сталося:

- `delete` **видаляє властивість** з об'єкта, а масив, це теж об'єкт з числовими ключами.
- Місце залишається **порожнім (empty slot)**.
- Індекси **не зсуваються**, довжина (`length`) **не змінюється**.

Мінуси такого підходу:

- Масив стає **«рваним»**, тобто з дірками.
- Методи на кшталт `.map()`, `.forEach()`, `.filter()` **пропускають порожні елементи**.
- Це часто призводить до непередбачуваної поведінки, бо `arr[1]` при цьому повертає `undefined`, а `1 in arr` повертає `false`.

### splice(): коректно видаляє елемент і зсуває решту

```javascript
const arr = [10, 20, 30];
arr.splice(1, 1); // видалити 1 елемент з індексу 1

console.log(arr);        // [10, 30]
console.log(arr.length); // 2
```

Що сталося:

- `splice(start, deleteCount)` **справді видаляє елементи**.
- Усі елементи, що залишилися, **зсуваються**, індекси перераховуються.
- `length` автоматично зменшується.

Додатковий бонус: метод повертає те, що видалив, і вміє одночасно вставляти нові значення.

```javascript
const arr = [10, 20, 30];

const removed = arr.splice(1, 1, 'a', 'b');

console.log(removed); // [20]
console.log(arr);     // [10, 'a', 'b', 30]
```

### Таблиця порівняння

| Критерій | `delete` | `splice()` |
| --- | --- | --- |
| Видаляє значення | Так | Так |
| Видаляє сам елемент | Ні | Так |
| Змінює довжину масиву | Ні | Так |
| Зсуває індекси | Ні | Так |
| Залишає «дірку» | Так | Ні |
| Повертає видалені елементи | Ні, лише `true` або `false` | Так, масив видалених елементів |
| Мутує вихідний масив | Так | Так |
| Рекомендується для масивів | Ні | Так |

### Коли що використовувати

- **Масив, потрібно видалити елемент:** `splice(i, 1)`.
- **Масив, мутувати не можна:** `arr.filter((_, i) => i !== index)` або `arr.slice()` з конкатенацією, обидва варіанти повертають новий щільний масив.
- **Перший або останній елемент:** `shift()` і `pop()` коротші за `splice()` і теж коректно оновлюють `length`.
- **Звичайний об'єкт, потрібно прибрати ключ:** `delete obj.key`, це саме той випадок, для якого оператор і створений.

```javascript
const user = { name: 'Maria', age: 25 };
delete user.age;

console.log(user); // { name: 'Maria' }
```

> **Висновок:** `delete` лише «затирає» комірку і залишає дірку, а `splice()` реально видаляє елемент і перебудовує масив. Тому для масивів завжди беріть `splice()`, а `delete` використовуйте тільки для звичайних об'єктів.

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

- **Видаляти елемент масиву через `delete`, очікуючи, що масив стане коротшим.** `length` не зміниться ніколи.
- **Перевіряти дірку через `arr[i] === undefined`.** Це не відрізнить порожній слот від реального значення `undefined`; беріть `i in arr` або `Object.hasOwn(arr, i)`.
- **Забувати другий аргумент `splice()`.** Виклик `arr.splice(1)` видалить усе від індексу `1` до кінця, а не один елемент.
- **Плутати `splice()` зі `slice()`.** `slice()` не мутує масив і нічого не видаляє, він лише повертає копію частини.
- **Видаляти елементи у циклі зліва направо через `splice()`.** Після кожного видалення індекси зсуваються, тому йдіть з кінця масиву або використовуйте `filter()`.
- **Розраховувати, що `delete` поверне видалене значення.** Він повертає лише `true` або `false`, значення потрібно зберегти заздалегідь.

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

Для рев’юера

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

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