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'];// orconst 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' }
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' }
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' }
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' }
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' }
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!
