Rest properties with object destructuring

If we want clone an object but remove certain properties we can use this fancy trick:

const user = {
  firstName: 'Homer',
  lastName: 'Simpson',
  age: 40,
  city: 'Springfield',
};

const { age, ...userWithoutAge } = user;

Let's see what's inside userWithoutAge:

// userWithoutAge
{ 
  firstName: "Homer",
  lastName: "Simpson",
  city: "Springfield"
}

So we have a clone of the original object, but without the age property. Umm, what? 🤔

This is how it works!

First, let's look at a simpler example without the use of the "rest spreading":

const { age, city } = user;

console.log(age); // 40
console.log(city); // Springfield

Here, we're simply destructuring the object to retrieve the age and city properties as new variables. Cool, so let's see what happens when we look at the original example:

const { age, ...userWithoutAge } = user;

First, we destructure the age property as we just saw, but also we utilize object rest spreading to collect the leftover properties into a variable we can name anything; in this case we call it userWithoutAge. This object we just created on the fly now contains all the original user properties except the age!

Using rest properties for object destructuring assignment is a newer feature added in ECMAScript 2018 and is available in modern browsers.

Links

MDN Article on spread syntax

Check out more #JSBits at my blog, jsbits-yo.com. Or follow me on Twitter!