Hiiiiiii there, today I will be sharing a useful JavaScript Tip which you can use to avoid Mutation when dealing with objects. To mutate something is to change it; it is to alter its form.

Deleting an Object's property is Mutation

Say you have a user object defined like this:

const user = {
  firstName: 'John',
  lastName: 'Obajeti',
  gender: 'Male',
  password: 'safest'
}

Assuming you need to send this object as part of an API Response, you will want to remove the password field. You can do this by using the delete keyword:

delete user.password

If you log out the object, you will get this:

console.log(user)

{
 firstName: "John",
 gender: "Male",
 lastName: "Obajeti"
}
*/

This worked as you wanted but the user object has been mutated. This might not be an issue if the object is not used anywhere else where the password field is expected to be present.

But if a function or code path after the delete operation is expecting a user object with the password field, this will lead to that function or code path reading undefined for the value of the password field.

You want to avoid mutating objects (and arrays) while working with them. One way to go about this is to copy the object or array first and then mutate the copy while the original is unchanged.

The built-in array methods work on arrays without mutating them. I have written about them here, A Common Sense Explanation of JavaScript Array Methods

In the rest of this article, I will be showing how to use the rest parameter to remove a property from an object without mutating it.

Using The Rest Parameter to Destructure

Object destructuring allows us to create new variables using an object's property as the value. For example, we can do this:

const { firstName, lastName, gender, password } = user;

// destructuring declares the variables firstName, lastName, gender, password
console.log(firstName, lastName, gender, password) 

// "John"
// "Obajeti"
// "Male"
// "safest"

We can combine destructuring with the rest parameter, ..., to remove a property from an object. This is how to do that:

const {password, ...userWithoutPassword} = user

console.log(userWithoutPassword)
// prints
{
 firstName: "John",
 gender: "Male",
 lastName: "Obajeti"
}

console.log(user)
// prints
{
  firstName: 'John',
  lastName: 'Obajeti',
  gender: 'Male',
  password: 'safest'
}

What this const {password, ...userWithoutPassword} = user does is pick the password property from the user object and then 'packs' the remaining properties in another object - this is made possible by the rest parameter, ....

When we log out the user object, we noticed that it's still intact - it hasn't been mutated!

We have successfully removed an object's property without changing the object.

Hurray!

Conclusion

In this article, I explained what it means to mutate an object and why we should try to avoid doing that.

I also shared a tip on how to remove a property from an object without mutating it. I hope you enjoyed reading this, I will be sharing more tips in the future.

You can follow me on Twitter @solathecoder so that you don't miss out.

Happy Coding.