How to remove a property from a JavaScript object?
Answer: Using delete operator
JavaScript offers various methods to remove the property from the object either by using built-in methods or by implementing our own logic. In this lesson, we are going to discuss different methods to remove the property from the object.
Using delete operator
We can remove the property from the JavaScript object by deleting it. We can delete the property of the object using the JavaScript delete operator. This operator deletes the property of the object as well as its value.
After deleting the property, we can not use that property again until we add it back.
Example: Using delete operator
In the given example, we have deleted the gender property along with its value Male from the object employee using JavaScript delete property.
<!DOCTYPE html>
<html>
<head>
<title>Remove a property from a JavaScript object</title>
</head>
<body>
<script>
var employee = {
name: "John",
age: 35,
gender: "Male",
department: "Management"
};
delete employee.gender;
console.log(employee.gender);
console.log(employee);
</script>
</body>
</html>
Output
Using Rest/Spread property
We can also delete the object property along with its value using the Rest/Spread operator.
The Rest/Spread operator was introduced in ES6. With the help of this operator, we can copy the values of the object excluding that particular property that we want to remove.
Example: Using rest/spread property
In the given example, we have used the Rest/Spread operator and then deleted the department property along with its value.
<!DOCTYPE html>
<html>
<head>
<title>Removing property from a JavaScript object</title>
</head>
<body>
<script>
const employee = {
name: "John",
age: 35,
gender: "Male",
department: "Management"
};
const { department, ...newEmp } = employee;
console.log(newEmp);
console.log(newEmp.department);
</script>
</body>
</html>
Output
Using Reflect.deleteProperty() Property
We can also delete the property of the object using Reflect.deleteProperty(). This property returns the boolean values, it returns true if the property was successfully deleted otherwise it returns false.
The Reflect.deleteProperty() is very much similar to the delete operator.
Example: Using Reflect.deleteProperty() property
In the given example, we have used the Reflect.deleteProperty() and deleted the age property along with its value from the object employee.
<!DOCTYPE html>
<html>
<head>
<title>Remove a property from a JavaScript object</title>
</head>
<body>
<script>
var employee = {
name: "John",
age: 35,
gender: "Male",
department: "Management"
};
Reflect.deleteProperty(employee, 'age');
console.log(employee);
console.log(employee.age);
</script>
</body>
</html>
Output
Conclusion
In this lesson, we have learned how to remove a property from the JavaScript object. We have discussed three ways to remove the property from the object. In the first method, we have used the delete operator. In the second method, we use the rest/spread operator, and in the last, we have used Reflect.deleteProperty() method, which is very much similar to the delete operator.
