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
Check out more #JSBits at my blog, jsbits-yo.com. Or follow me on Twitter!
Top comments (0)