Видалення властивості з об'єкта

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

Властивість видаляють оператором 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.

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

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

Premium

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