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;

But that could use some more ES2015 syntax, no?

Remove an Object property using destructuring + spreading:

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 lifts email from the user object (e.g. destructuring), and the collects all remaining properties into userWithoutEmail (e.g. rest spreading). Handy!

Remove a dynamic Object property by destructuring + spreading:

If you want to remove a certain property from a dynamic value, use this syntax:

const fieldToRemove = 'email';

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

Since you’re using a dynamic field, you need to use []. The result is then aliased into a variable named removed. What’s left is collected into userWithoutEmail

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

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.