Deleting a Property from a JavaScript Object: 3 Approaches and Pitfalls

"The property disappeared, but the object remained": how to delete something unnecessary in JavaScript?

Imagine a situation: you are working with a large object that came from the server. It has 20 fields, but only 15 are needed for submitting a form. Or you are writing a function that should return data without a service field _id. What to do? The most popular question on Stack Overflow on this topic has garnered hundreds of thousands of views — and this is no coincidence.

Deleting a property from an object is one of those tasks that seems trivial but hides several surprises. In this article, we will break down all the main ways to delete a property from an object in JavaScript, compare their performance and mutability, and figure out which approach to choose in 2025.

Method #1: The delete Operator — A Classic

The most obvious and historically first way is to use the delete operator. It permanently and irrevocably removes a property from an object.

const user = {\n  name: 'Anna',\n  email: 'anna@example.com',\n  password: 'super_secret_123'\n};\n\ndelete user.password;\n\nconsole.log(user);\n// { name: 'Anna', email: 'anna@example.com' }\nconsole.log(user.password); // undefined\n

How does delete actually work?

The delete operator does not just assign undefined. It completely removes the property from the object. You can verify this using the hasOwnProperty method:

const car = { brand: 'Tesla' };\nconsole.log(car.hasOwnProperty('brand')); // true\n\ndelete car.brand;\nconsole.log(car.hasOwnProperty('brand')); // false\n

An important difference: after delete, the property ceases to exist. It will not appear during iteration with for...in or Object.keys().

When will delete not work?

There are several "pitfalls":

\n
• You cannot delete properties declared with var/let/const. The delete operator only works with object properties.
\n
• Inherited properties from the prototype are not deleted — only own properties.
\n
• Properties with the configurable: false flag (e.g., on built-in objects) are not deleted. In strict mode, this will throw an error.
\n

// Example: a property with configurable: false\nconst obj = {};\nObject.defineProperty(obj, 'fixed', {\n  value: 42,\n  configurable: false\n});\n\ndelete obj.fixed; // false (not deleted)\nconsole.log(obj.fixed); // 42\n

Method #2: Destructuring and the Rest Operator — A Modern Approach

If you work with immutable data (and in modern JavaScript this is considered good practice), then delete might not be the best choice — it mutates the original object. An alternative is to create a new object without the unwanted property using destructuring:

const user = {\n  name: 'Ivan',\n  email: 'ivan@example.com',\n  role: 'admin',\n  token: 'abc123'\n};\n\n// Remove the token field by creating a new object\nconst { token, ...userWithoutToken } = user;\n\nconsole.log(userWithoutToken);\n// { name: 'Ivan', email: 'ivan@example.com', role: 'admin' }\nconsole.log(user.token); // 'abc123' — the original object is untouched!\n

This approach is especially popular in React development, when you need to pass only a subset of props to a component, excluding service fields.

Pros and Cons of Destructuring

\n
• + Immutability: the original object remains unchanged. This is important for Redux, Vuex, and functional programming.
\n
• + Readability: it is visually clear which fields we are excluding.
\n
• - Performance: a copy of the object is created, which can be costly for large objects.
\n
• - Inconvenient for deleting many properties: if you need to remove 5 fields out of 20,