JavaScript: Remove a property from an object immutably by destructuring it

Say you have a JavaScript object like this:

const user = {
    firstName: 'Bramus',
    lastName: 'Van Damme',
    twitter: 'bramus',
    city: 'Vinkt',
    email: '[email protected]',
};

And now say you want to create a copy of the whole object, containing all properties except for the email property.

The oldskool way:

The first idea that came to my mind was to clone/copy the object and then successively remove email from the new object using the delete operator:

const userWithoutEmail = Object.assign({}, user);
delete userWithoutEmail.email;

But that could use some more ES2015 syntax, no?

Remove an Object property using Destructuring + Rest Properties:

Thanks to Destructuring and Object Rest/Spread Properties (currently stage 3), we can also do this:

const {
    email,
    ...userWithoutEmail
} = user;

This little piece of code lifts email from the user object (e.g. destructuring), and then collects all remaining properties into userWithoutEmail (e.g. rest spreading). Handy!

Remove a variable object property using Destructuring + Rest Properties:

If you want to remove a certain property through a variable containing its name, use this syntax:

const propertyToRemove = 'email';

const {
    [propertyToRemove]: removed,
    ...userWithoutEmail
} = user;

Since you’re using a dynamic field, you need to use [] to destrucutre the property from the object. Its result is then aliased into a variable named removed. What’s left is over is collected into userWithoutEmail

📣 The contents of this article is part of a talk on ESNext named “What’s next
 for JavaScript?” which I recently gave at a Fronteers België meetup. If you’re meetup/conference organiser, feel free to contact me to have me speak at your event.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

About the Author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

7 Comments

  1. THANK YOU for getting right to the point, seriously… Seems like every dev blog out there takes a long, garden stroll before getting to the example.

  2. How can I use this if I have multiple objects with the same property names and I want to remove the same property from all those objects? It seems that there would be a conflict in this case.

  3. Is there a one-liner that will build and return `userWithoutEmail` without having to use a variable declaration?

    1. You could always loop over the object’s keys and values, and the whip up some `Object.fromEntries` or even Array#reduce, but that’s gonna be:

      – way more CPU intensive than simply declaring a new variable
      – a very long one-liner

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.