DEV Community

JS Bits Bill
JS Bits Bill

Posted on • Updated on

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;
Enter fullscreen mode Exit fullscreen mode

Let's see what's inside userWithoutAge:

// userWithoutAge
{ 
  firstName: "Homer",
  lastName: "Simpson",
  city: "Springfield"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)