DEV Community

JS Bits Bill
JS Bits Bill

Posted on • Edited on

1 1

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!

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay