🌼 🍱 🕷️ 7 tricks with Rest and Spread operators when working with JS objects 🎦 👸🏾 ✌️

Hello, Habr! I present to you the translation of the article “7 Tricks with Resting and Spreading JavaScript Objects” by Joel Thoms.

Hello everyone, the other day a work colleague threw me a link to an article in English that lists different methods of working with rest and spread operators. She was useful to me and I decided to translate it. So, let's begin.

The Rest and Spread operators can be used not only to combine arguments into an array and combine arrays.

In this article you will find the 7 least known tricks of using rest and spread operators.

1. Adding properties

Cloning an object while adding to the new object to the cloned object.
In the example below, we clone the user object and add the password property to the cloned userWithPass object .

const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

2. Merging objects

Analyzing processes part1 and part2 merzhatsya an object user1

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }

const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }

So same objects can be contiguous using this syntax.

const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3. Removing a property from an object

Properties from an object can be removed using a combination of destructuring and rest statements. In the example below, we destruct the rest object and remove the password property from it .

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

noPassword(user) //=> { id: 100, name: 'Howard moon' }

4. Dynamic deletion of properties

In the example below, the removeProperty function takes prop as an argument. Using the property name passed in the argument, we dynamically exclude the property from the cloned object.

const user1 = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                dynamic destructuring

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5. Organization or sorting of properties by name

Sometimes the properties in the object are not in the order we need. Using several tricks, we can push properties to the top of the list, or to the middle, for example.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }

In order to put password at the end, you first need to destruct the object and remove the password , and then use the spread operator to add it.

6. Default Properties

The default properties are the properties that will be set if they are not in the cloned object.

In the example below, the quotes field is missing in the user2 object . The setDefaults function, in the absence of the quotes field, sets it by default with the value [] . After calling the setDefaults (user2) function, it returns a property with the value quotes: [] When calling setDefaults (user4), the function returns an unmodified value since the user4 object already has the quotes property

const user2 = {
  id: 200,
  name: 'Vince Noir'
}

const user4 = {
  id: 400,
  name: 'Bollo',
  quotes: ["I've got a bad feeling about this..."]
}

const setDefaults = ({ quotes = [], ...object}) =>
  ({ ...object, quotes })

setDefaults(user2)
//=> { id: 200, name: 'Vince Noir', quotes: [] }

setDefaults(user4)
//=> {
//=>   id: 400,
//=>   name: 'Bollo',
//=>   quotes: ["I've got a bad feeling about this..."]
//=> }

You can also write it like this if you want the default values to be displayed first:

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7. Renaming properties

Using the tricks from above, we can also create a function that renames the properties of the object to us.

Imagine that we have an object with the property ID written in upper case, and we need to rename it to lower case. We start by removing the ID property from the object. Then add it back with the name id while the object is being cloned.

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "Bob Fossil"
}

renamed(user) //=> { id: 500, name: 'Bob Fossil' }

8. Bonus. Adding a Property Based on a Condition

Thanks to @vinialbano for showing such a method. In this example, we add the password field only if password == true !

const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}

userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Conclusion

I tried to list a few less well-known methods of using rest and spread operators. If you know any other methods that are not listed in this list, please write about them in the comments. If this article was useful to you, please repost it to your friends and acquaintances.

7 tricks with Rest and Spread operators when working with JS objects