Introduction:
JavaScript objects consist of properties, which are essentially pairs of keys and values. These properties can represent any type of entity through their key-value structure. Notably, functions can also serve as either keys or values within an object. In this segment, we will explore the process of removing keys from a JavaScript object.
When a key is deleted, its corresponding value is also automatically removed. Therefore, the process of removing a key is simply a matter of deleting that specific attribute. In JavaScript, there are currently three methods available for eliminating keys from objects. Let’s briefly examine each of these methods.
In JavaScript, it is possible to remove properties from objects when needed. There are three straightforward techniques available for efficiently deleting any property from an object. The first approach utilizes the delete operator, which is a specific operator in JavaScript. The second technique employs Object Destructuring, while the third method involves the use of the Reflect.deleteProperty function.
1. Remove a Property from a JavaScript Object Using the Delete Operator:
The delete operator is a designated operator within JavaScript. To eliminate a key from an Object in JavaScript, one should utilize the delete operator. This operator performs precisely as its name suggests: it eliminates the specified property from the object. However, it is essential to first obtain access to the property that we intend to remove. You can access the property of an Object using either the dot notation or the bracket notation.
Delete with the Dot Method:
Syntax:
delete object.property;
Example:
let emp = {
name: "saswat",
age: 26,
designation: "Software Engineer",
}
console.log(emp);
output:
{ name: "saswat", age: 26, designation: "Software Engineer" }
age: 26
designation: "Software Engineer"
name: "saswat"
Let's eliminate the age attribute using a dot notation approach.
delete emp.age;
console.log(emp);
Output:
{ name: "saswat", designation: "Software Engineer" }
designation: "Software Engineer"
name: "saswat"
Explanation:
From the output provided earlier, it is evident that the delete operator successfully removed the property age from the object emp using the dot notation.
Delete with the square bracket method:
Syntax:
delete object['property'];
We can utilize square brackets to remove the designation property from the emp object.
let emp = {
name: "saswat",
age: 26,
designation: "Software Engineer",
}
delete emp['designation'];
console.log(emp);
Output:
{ name: "saswat", age: 26 }
name: "saswat"
age: 26
Explanation:
The output displayed above illustrates that the delete operator effectively removed the property designation from the object emp using the square brackets notation.
2. Remove a Property from a JavaScript Object Using Object Destructuring:
Object destructuring can additionally facilitate the removal of a property from an object; however, there is an important distinction to be made. Rather than modifying the original object, a fresh object is generated that omits the specified property. As a result, the original object remains intact and unchanged.
Syntax:
const{ propertyToRemove, ...newObject } = OriginalObject;
Example:
const laptop = {
brand: "HP",
model: "Notebook",
year: 2020,
}
const {model, ...newLaptop} = laptop;
console.log(newLaptop);
console.log(laptop);
Output:
{ brand: "HP", year: 2020 }
{ brand: "HP", model: "Notebook", year: 2020 }
Explanation:
In the previous illustration, we utilized object destructuring to eliminate a property from an object. By employing object destructuring to extract the property model from the initial object laptop, we created a new object myLaptop that lacks that specific property. Again, the output confirms that the original object has not been affected.
3. Remove a Property from a JavaScript Object Using the Reflect.deletePropertyMethod:
The Reflect.deleteProperty function is part of a built-in JavaScript object known as 'Reflect'. This method serves a purpose similar to that of the delete operator's functional format, which we have previously examined.
Example:
const cars = {
car1: "Honda",
car2: "Tata",
car3: "Toyota"
};
Reflect.deleteProperty(cars, 'car2');
console.log(cars);
Output:
{ car1: 'Honda', car3: 'Toyota' }
Explanation:
In the preceding example, there existed an object named "cars" which consisted of three distinct properties. To eliminate the car2 property from this object, we employed the Reflect.deleteProperty method. The output illustrates that the removal of the car2 property from the cars object was executed successfully.
In conclusion, it is important to note that there is no significant difference between employing the delete operator and the Reflect.deleteProperty method, as both achieve the same results with comparable temporal complexity. On the other hand, Object Destructuring requires more time to execute. Consequently, because of its straightforward syntax and minimal time complexity, the delete operator remains the preferred choice for removing keys from JavaScript objects.
Conclusion
JavaScript objects consist of properties, which are essentially pairs of keys and values. When a key is eliminated, the value linked to that key is also automatically removed.