Post cover

2 Ways to Remove a Property from an Object in JavaScript

A JavaScript object is a collection of properties, where each property has a name and a value.

javascript
const employee = {
name: 'John Smith',
position: 'Sales Manager',
};

The user variable contains an object describing an employee. The object contains 2 properties that describe employee data: name and position.

Sometimes, however, you need to remove properties from an object. For example, how would you remove the position property from the employee object?

Let's see 2 common ways on how to remove properties from an object in JavaScript — using the delete operator (mutable way) and object destructuring combined with object rest (immutable way).

1. delete operator

delete is a special operator in JavaScript that removes a property from an object. Its single operand usually accepts a property accessor to indicate what property to remove:

A) Remove using a dot property accessor:

javascript
delete object.property;

B) Remove using square brakets property accessor:

javascript
delete object['property'];
// or
const name = 'dynamicProperty';
delete object[name];

When applying the delete operator on a property accessor, the operator removes the corresponding property from the object:

javascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
delete employee.position;
console.log(employee); // { name: 'John Smith' }

Try the demo.

Initially, employee has 2 properties: name and position.

But after applying the delete operator on the position property: delete employee.position, the property is removed from the object. Simple as that.

The property removal using delete operator is mutable because it mutates (aka alters, modifies) the original object.

In case if the property name to remove is determined dynamically, then you can use the square brackets syntax:

javascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
const name = 'position';
delete employee[name];
console.log(employee); // { name: 'John Smith' }

Try the demo.

delete employee[name] removes the property which name is contained inside name variable.

2. Object destructuring with rest syntax

Another approach to removing properties, but in an immutable manner without altering the original object, is to use the object destructuring and rest syntax.

The idea is simple: destructure the object to the property you want to remove, and the remaining properties collect into a rest object:

A) The property name is known:

javascript
const { property, ...restObject } = object;

B) The property name is dynamic:

javascript
const name = 'property';
const { [name]: removedProperty, ...restObject } = object;

After applying the destructuring and rest syntax, restObject is going to contain the same properties as object, only without the removed property.

For example, let's remove the property position from employee object:

javascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
const { position, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }
console.log(employee);
// { name: 'John Smith',position: 'Sales Manager' }

Try the demo.

The statement const { position, ...employeeRest } = employee destructures the employee objects and collects the properties into a rest object employeeRest without including the position property.

Object destructuring with rest syntax is an immutable way of property removal: the original employee object isn't mutated. Rather a new object employeeRest is created which contains all the properties of employee but without the removed position.

If the property name to remove is determined dynamically, then you can use use the dynamic property name destructuring syntax:

javascript
const employee = {
name: 'John Smith',
position: 'Sales Manager'
};
const name = 'position';
const { [name]: removedProperty, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }

Try the demo.

const { [name]: removedProperty, ...employeeRest } = employee let's you remove a property with dynamic name by collecting the properties, but removed one, into employeeRest object.

What's interesting is that you can remove multiple properties at once using the destructuring and rest syntax:

javascript
const employee = {
name: 'John Smith',
position: 'Sales Manager',
experience: 6, // years
};
const { position, experience, ...employeeRest } = employee;
console.log(employeeRest); // { name: 'John Smith' }

Try the demo.

const { position, experience, ...employeeRest } = employee has removed 2 properties at once: position and experience.

3. Conclusion

In JavaScript, there are 2 common ways to remove properties from an object.

The first mutable approach is to use the delete object.property operator.

The second approach, which is immutable since it doesn't modify the original object, is to invoke the object destructuring and spread syntax: const {property, ...rest} = object.

Side challenge: what is the time complexity of the property removal using delete and object rest syntax? Write your opinion in a comment below!

Like the post? Please share!

Quality posts into your inbox

I regularly publish posts containing:

  • Important JavaScript concepts explained in simple words
  • Overview of new JavaScript features
  • How to use TypeScript and typing
  • Software design and good coding practices

Subscribe to my newsletter to get them right into your inbox.

Join 4716 other subscribers.
Dmitri Pavlutin

About Dmitri Pavlutin

Tech writer and coach. My daily routine consists of (but not limited to) drinking coffee, coding, writing, coaching, overcoming boredom 😉.
Email addressTwitter profileFacebook pageLinkedIn profile