Удаляем свойство из объекта JavaScript: 3 подхода и подводные камни

«Свойство исчезло, а объект остался»: как удалить ненужное в JavaScript?

Представьте ситуацию: вы работаете с большим объектом, который пришёл с сервера. В нём 20 полей, но для отправки формы нужны только 15. Или вы пишете функцию, которая должна вернуть данные без служебного поля _id. Как быть? Самый популярный вопрос на Stack Overflow по этой теме набрал сотни тысяч просмотров — и это не случайно.

Удаление свойства из объекта — одна из тех задач, которая кажется тривиальной, но таит в себе несколько сюрпризов. В этой статье мы разберём все основные способы удалить свойство из объекта в JavaScript, сравним их производительность и мутабельность, и выясним, какой подход выбрать в 2025 году.

Способ №1: Оператор delete — классика жанра

Самый очевидный и исторически первый способ — использовать оператор delete. Он удаляет свойство из объекта окончательно и бесповоротно.

const user = {
  name: 'Анна',
  email: 'anna@example.com',
  password: 'super_secret_123'
};

delete user.password;

console.log(user);
// { name: 'Анна', email: 'anna@example.com' }
console.log(user.password); // undefined

Как работает delete на самом деле?

Оператор delete не просто присваивает undefined. Он полностью убирает свойство из объекта. Вы можете проверить это с помощью метода hasOwnProperty:

const car = { brand: 'Tesla' };
console.log(car.hasOwnProperty('brand')); // true

delete car.brand;
console.log(car.hasOwnProperty('brand')); // false

Важное отличие: после delete свойство перестаёт существовать. При итерации через for...in или Object.keys() оно не появится.

Когда delete не сработает?

Есть несколько «подводных камней»:

• Нельзя удалить свойства, объявленные через var/let/const. Оператор delete работает только со свойствами объектов.
• Не удаляются унаследованные свойства из прототипа — только собственные.
• Свойства с флагом configurable: false (например, у встроенных объектов) не удаляются. В строгом режиме это вызовет ошибку.

// Пример: свойство с configurable: false
const obj = {};
Object.defineProperty(obj, 'fixed', {
  value: 42,
  configurable: false
});

delete obj.fixed; // false (не удалилось)
console.log(obj.fixed); // 42

Способ №2: Деструктуризация и rest-оператор — современный подход

Если вы работаете с иммутабельными данными (а в современном JavaScript это считается хорошим тоном), то delete может быть не лучшим выбором — он мутирует исходный объект. Альтернатива — создать новый объект без ненужного свойства с помощью деструктуризации:

const user = {
  name: 'Иван',
  email: 'ivan@example.com',
  role: 'admin',
  token: 'abc123'
};

// Удаляем поле token, создавая новый объект
const { token, ...userWithoutToken } = user;

console.log(userWithoutToken);
// { name: 'Иван', email: 'ivan@example.com', role: 'admin' }
console.log(user.token); // 'abc123' — исходный объект не тронут!

Этот подход особенно популярен в React-разработке, когда нужно передать в компонент только часть пропсов, исключив служебные поля.

Плюсы и минусы деструктуризации

• + Иммутабельность: исходный объект остаётся неизменным. Это важно для Redux, Vuex и функционального программирования.
• + Читаемость: наглядно видно, какие поля мы исключаем.
• - Производительность: создаётся копия объекта, что для больших объектов может быть затратно.
• - Неудобно для удаления многих свойств: если нужно убрать 5 полей из 20, код станет громоздким.

Способ №3: Установка undefined — ложный путь

Иногда новички пытаются «удалить» свойство, присваивая ему undefined:

const book = {
  title: '1984',
  author: 'Оруэлл',
  isbn: '978-5-17-123456-7'
};

book.isbn = undefined;

console.log(book);
// { title: '1984', author: 'Оруэлл', isbn: undefined }

На первый взгляд, свойство «исчезло». Но это иллюзия: ключ isbn всё ещё существует в объекте. Он будет виден при итерации и в Object.keys():

console.log(Object.keys(book)); 
// ['title', 'author', 'isbn'] — isbn никуда не делся!

Вывод: присваивание undefined — это не удаление, а всего лишь сброс значения. Используйте этот приём только если вам нужно сохранить структуру объекта, но очистить данные.

Сравнительная таблица подходов

Для наглядности сведём все три метода в одну таблицу:

Практический пример: чистим данные перед отправкой на сервер

Допустим, у нас есть форма регистрации, и мы не хотим отправлять на сервер поле confirmPassword и служебное поле _csrf. Вот как это можно сделать элегантно:

const formData = {
  username: 'john_doe',
  email: 'john@example.com',
  password: 'qwerty123',
  confirmPassword: 'qwerty123',
  _csrf: 'abc123token'
};

// Вариант 1: мутация (если объект больше не нужен)
delete formData.confirmPassword;
delete formData._csrf;

// Вариант 2: