JavaScript: Removing 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, except for the email property.

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

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

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

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

This little piece of code destructures email off the user object, and the collects all rest props into userWithoutEmail. Handy!

This is part of a talk on ESNext named “What’s next
 for JavaScript?” which I recently gave at a Fronteers België meetup. I’m currently still in the process of preparing the slides for publication.

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)

Join the Conversation

5 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.

Leave a comment

Leave a Reply to Alexandre Six 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.