How to Delete a Property from an Object in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Removing properties from JavaScript objects is a common task when processing API data or cleaning up user input. As the creator of CoreUI with over 25 years of JavaScript development experience, I regularly need to remove sensitive or unnecessary properties from objects before sending data to clients. The most direct approach is using the delete operator, though destructuring offers a cleaner alternative for creating new objects without specific properties.
Use the delete operator to remove properties directly from an object, or destructuring to create a new object without unwanted properties.
const user = { name: 'John', age: 30, password: 'secret123', city: 'New York' }
// Using delete operator (modifies original object)
delete user.password
console.log(user) // { name: 'John', age: 30, city: 'New York' }
// Using destructuring (creates new object)
const { password, ...cleanUser } = user
console.log(cleanUser) // { name: 'John', age: 30, city: 'New York' }
The delete operator removes properties directly from the original object and returns true if successful. Destructuring with rest syntax creates a new object excluding specified properties, leaving the original unchanged. Use delete when you want to modify the existing object, and destructuring when you need immutable operations. The delete operator works with all property types including computed properties using bracket notation like delete obj[variableName].
Best Practice Note:
In CoreUI components, we prefer destructuring over delete for removing properties when processing component props or API responses. This immutable approach prevents side effects and makes components more predictable, especially important in React applications where object mutations can cause rendering issues.
