Remove or omit object properties without mutation in JavaScript

Amit Merchant · March 1, 2021 ·

Since immutability in JavaScript is important for predictability and performance of your application, we often find ourselves in situations where we need to achieve some of the operations without mutating the original object/array.

One such operation that I came across while working on a React.js app was to remove/omit a certain object property without any sort of mutation to the original object.

For instance, let’s say we have the following object.

const user = {
  name: 'Jemini Merchant',
  sex: 'female',
  age: 23

And now, if we want to remove the name and sex properties from the user object without altering the user object, you can do it like the following.

const { name, sex, ...updatedUser } = user;
// updatedUser = { age: 23 }

As you can tell, we are using ES6’s object destructuring and spread opearator to create a new object out of the user object which doesn’t have the name and sex properties.

So, updatedUser now holds the updated object leaving the user object as is.

Using computed properties

In some cases, you may want to use a variable instead of passing the property name itself. You can use computed properties along with the omit keyword in this case like so.

const varName = 'name';

const { [varName]:omit, ...updatedUser } = user;
// updatedUser = { sex: 'female', age: 23 }

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!