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.


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:


delete object.property;

B) Remove using square brakets property accessor:


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:


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

Open 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:


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

Open 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:


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

B) The property name is dynamic:


const propNameToRemove = 'property';
const { [propNameToRemove]: 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:


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' }

Open 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 the dynamic property name destructuring syntax:


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

Open the demo.

const { [propNameToRemove]: removedProperty, ...employeeRest } = employee let's you remove a property with dynamic property 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:


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

Open 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!

Dmitri Pavlutin

About Dmitri Pavlutin

Software developer and sometimes writer. My daily routine consists of (but not limited to) drinking coffee, coding, writing, overcoming boredom 😉. Living in the sunny Barcelona. 🇪🇸