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: 'bramus@bram.us',
};

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 destructure 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)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. 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 …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

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

Leave a Reply to David Harkness Cancel reply

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.