Resting and spreading can be used for more than just resting arguments and spreading arrays.
Here are six lesser known tricks when using rest and spread with JavaScript objects.
1. Adding Properties
Clone an object while simultaneously adding additional properties to the (shallow) cloned object.
In this example user is cloned and password is added into userWithPass.
2. Merge Objects
Merge two objects into a new object.
part1 and part2 are merged together into user1.
Objects also be merged with this syntax:
3. Exclude Object Properties
Properties can be removed using destructuring in combination with the rest operator. Here password is destructured out (ignored) and the rest of the properties are returned as rest.
4. Dynamically Exclude Properties
The removeProperty function takes a prop as an argument. Using computed object property names the prop can be excluded dynamically from the clone.
5. Organize Properties
Sometimes properties aren’t in the order we need them to be. Using a couple of tricks we can push properties to the top of the list or move them to the bottom.
To move id to the first position, add id: undefined to the new Object before spreading object.
To move password to the last property, first destructe password out of object. Then set password after spreading object.
6. Default Properties
Default properties are values that will be set only when they are not included in the original object.
In this example, user2 does not contain quotes. The setDefaults function ensures all objects have quotes set otherwise it will be set to [].
When calling setDefaults(user2), the return value will include quotes: [].
When calling setDefaults(user4), because user4 already has quotes, that property will not be modified.
It can also be written like this if you want the defaults to appear first instead of last:
7: Renaming Properties
By combining the techniques above, a function can be created to rename properties.
Imagine there are some objects with an uppercase ID that should be lowercase. Start by destructuring ID out of the object. Then add it back as id while object is being spread.
8. Bonus! Add conditional properties
Thanks for @vinialbano for pointing out you can also conditionally add properties. In this example, password will be added only when password is truthy!
Summary
I tried to list out a handful lesser known spread and rest tricks, if you know any that I haven’t listed here, please let everyone know in the comments! If you learned something new, please share on Twitter and with your friends, it really helps!
Follow me here or on Twitter @joelnet!