How to Remove a Property From JavaScript Object?
The delete operator is used to remove a property from a JavaScript object. The delete operator allows you to remove a specified property from an object. Once a property is deleted, it no longer exists in the object.
Using delete Operator
The basic method to remove a property from a JavaScript object is by using the delete operator. This operator removes the property from the object and returns true if the operation is successful.
Syntax
delete object.propertyName;
Alternatively, you can use the bracket notation if the property name is stored as a variable:
delete object["propertyName"];
Example: Remove the property from object using delete operator.
let obj = {
name: "Rohit",
age: 24,
city: "Noida"
};
// Using delete to remove the 'age' property
delete obj.age;
console.log(obj);
let obj = {
name: "Rohit",
age: 24,
city: "Noida"
};
// Using delete to remove the 'age' property
delete obj.age;
console.log(obj);
Output
{ name: 'Rohit', city: 'Noida' }
Apart from the delete operator you can also use different approaches to remove property from JavaScript Object.
Table of Content
Using Object Destructuring
Object destructuring can be used to create a new object excluding the property you need to remove. This approach does not mutate the original object but returns a new object without the specified property.
Example: Remove the property from object using object destructuring.
let obj = {
name: "Rohit",
age: 24,
city: "Noida"
};
// Using destructuring to remove
// 'age' property
const { age, ...obj1 } = obj;
// obj1 is the updated object
console.log(obj1);
let obj = {
name: "Rohit",
age: 24,
city: "Noida"
};
// Using destructuring to remove
// 'age' property
const { age, obj1 } = obj;
// obj1 is the updated object
console.log(obj1);
Output
{ name: 'Rohit', city: 'Noida' }
Explanation: Here, the { age, ...obj } syntax extracts the age property and assigns the remaining properties to a new object called obj. The original object remains unchanged.
Using Reflect.deleteProperty
The Reflect.deleteProperty method works similarly to the delete operator but provides a more standardized way to delete properties. It returns a Boolean indicating whether or not the deletion was successful.
let obj = {
name: "Rohit",
age: 24,
city: "Noida"
};
// Using Reflect.deleteProperty to
// remove the 'city' property
Reflect.deleteProperty(obj, 'city');
console.log(obj);
let obj = {
name: "Rohit",
age: 24,
city: "Noida"
};
// Using Reflect.deleteProperty to
// remove the 'city' property
Reflect.deleteProperty(obj, 'city');
console.log(obj);
Output
{ name: 'Rohit', age: 24 }
Which Approach Is Better in Different Cases?
- delete Operator: The delete operator is the most simple and widely used for removing a property from an object. It is the best choice when you need to directly mutate the original object.
- Object Destructuring: It is suitable if you want to create a new object without the specified property, leaving the original object unchanged. It is useful in functional programming where immutability is preferred.
- Reflect.deleteProperty: While less commonly used than the delete operator, Reflect.deleteProperty provides a consistent and predictable way to delete properties. It can be helpful when working with Reflect-based operations or if you need to handle failures in a more controlled way.