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

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

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

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

Контент

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

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

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

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

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

**Властивість видаляють оператором `delete`, а коли початковий об'єкт чіпати не можна, використовують деструктуризацію з rest-синтаксисом, яка повертає новий об'єкт без зайвого ключа.** Додатково є `Reflect.deleteProperty()` для метапрограмування і звичайне обнулення значення, коли ключ має лишитися в об'єкті.

## Теорія

### TL;DR

- `delete obj.key`, найпростіший і найпоширеніший спосіб, змінює об'єкт.
- `delete` працює тільки з властивостями об'єкта, а не зі змінними.
- `delete` повертає `true` навіть тоді, коли властивості не існувало, і не впливає на прототип.
- `const { key, ...rest } = obj`, імутабельний спосіб: створює новий об'єкт без ключа.
- `Reflect.deleteProperty(obj, key)`, той самий ефект, але у вигляді звичайної функції.
- `obj.key = null` або `undefined` не видаляє ключ, а лише очищає значення.

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

```javascript
const user = { name: 'Maria', age: 25, city: 'Kyiv' };

delete user.age;

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

### Оператор delete

Найпростіший і найпоширеніший спосіб:

```javascript
const user = {
  name: 'Maria',
  age: 25,
  city: 'Kyiv'
};

delete user.age;

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

Оператор `delete` видаляє властивість **безпосередньо з об'єкта**.

Важливі деталі:

- `delete` працює **тільки з властивостями об'єкта**, а не зі змінними.
- Повертає `true`, навіть якщо властивості не існувало:

```javascript
delete user.nonexistent; // true
```

- **Не впливає на прототип**, лише на сам об'єкт. Якщо однойменна властивість є у прототипі, після видалення власної властивості читання почне повертати прототипну.
- У strict mode спроба видалити ненастроювану (`configurable: false`) властивість кидає `TypeError`, а поза strict mode просто повертає `false`.

### Деструктуризація (імутабельний спосіб)

Якщо потрібно **створити новий об'єкт без властивості**, не змінюючи початковий:

```javascript
const user = { name: 'Maria', age: 25, city: 'Kyiv' };

const { age, ...updatedUser } = user;

console.log(updatedUser);
// { name: 'Maria', city: 'Kyiv' }
```

Тут `...rest` збирає всі властивості, що лишилися, тож видалення відбувається «м'яко», без зміни оригіналу. Саме цей підхід потрібен у React і Redux, де стан порівнюється за посиланням. Якщо ім'я ключа відоме лише під час виконання, використовуйте обчислюваний ключ: `const { [key]: removed, ...rest } = user;`.

### Reflect.deleteProperty()

Це сучасна альтернатива `delete`, еквівалентна за змістом, але зручна у формальніших сценаріях, наприклад у метапрограмуванні:

```javascript
const user = { name: 'Maria', age: 25 };
Reflect.deleteProperty(user, 'age');

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

Поведінка така сама, як у `delete`, але це звичайна функція, тож ключ можна передати змінною, а результат (`true` або `false`) повертається строго, без винятків у strict mode.

### Обнулення або перевизначення

Іноді безпечніше не видаляти, а просто обнулити значення:

```javascript
user.age = null;   // значення очищене логічно
// або
user.age = undefined;
```

Така властивість лишається в об'єкті, але її значення вважається «порожнім». Різниця помітна одразу: `'age' in user` і далі поверне `true`, а `Object.keys(user)` покаже ключ. При цьому `JSON.stringify()` викине властивості зі значенням `undefined`, але збереже ті, що дорівнюють `null`.

### Порівняння способів

| Спосіб | Змінює початковий об'єкт | Що робить | Примітка |
| --- | --- | --- | --- |
| `delete obj.key` | Так | Видаляє властивість | Простий і частий спосіб |
| `Reflect.deleteProperty(obj, key)` | Так | Те саме, але у вигляді функції | Використовують у метапрограмуванні |
| Деструктуризація `{ key, ...rest }` | Ні | Створює новий об'єкт без властивості | Імутабельний підхід |
| `obj.key = null` | Так | «Очищає» значення, але не видаляє ключ | Зручно при скиданні стану |

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

- **Вважати, що `= undefined` видаляє властивість.** Ключ лишається: `'age' in user` поверне `true`, а `Object.keys()` його покаже. Видаляє тільки `delete`.
- **Покладатися на результат `delete`.** Він повертає `true` і для неіснуючої властивості, тож це не перевірка успіху. Наявність ключа перевіряйте через `Object.hasOwn()`.
- **Застосовувати `delete` до елементів масиву.** `delete arr[1]` лишає порожній слот і не зменшує `length`. Для масивів потрібні `splice()` або `filter()`.
- **Очікувати, що `delete` прибере успадковану властивість.** Він видаляє лише власну; те, що приходить із прототипу, лишається доступним.
- **Мутувати спільний об'єкт.** Якщо об'єкт використовується в кількох місцях, `delete` змінить його для всіх. Коли потрібне нове посилання, беріть деструктуризацію з rest.

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

Для рев’юера

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

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