How to remove a Key/Property from an object in JavaScript

Introduction:

JavaScript objects are made up of properties, which are just key-value pairs. In essence, properties consist of a pair of keys and values that can represent any type of entity. Even functions have the ability to function as a value or a key in any object. Anyway, in this section, we'll talk about how to delete keys from Object JavaScript.

A key's associated value is automatically deleted when the key is removed. So, eliminating a key merely entails eliminating that attribute. There are now three ways in JavaScript to remove keys from objects. Let's take a quick look at each one.

If necessary, properties in JavaScript objects can be erased. There are three simple methods we can use to quickly erase any object property. The first technique makes use of the delete operator, a particular operator in JavaScript, the second method makes use of Object Destructuring, and the third method makes use of the Reflect.deleteProperty() method.

1. Remove a Property from a JavaScript Object Using the Delete Operator:

The delete operator is a specific operator in JavaScript. If we want to remove a key from an Object JavaScript, use the delete operator. The delete operator does exactly what its name implies: it removes the supplied property from the object. Although, we must first gain access to the property to delete it. Either the dot property accessor or the square brackets property accessor can be used to access the Object property.

Delete with the Dot Method:

Syntax:

Example:

output:

{ name: "saswat", age: 26, designation: "Software Engineer" }
    age: 26
    designation: "Software Engineer"
    name: "saswat"

Let's remove the age property in a dot-based manner.

Output:

{ name: "saswat", designation: "Software Engineer" }
    designation: "Software Engineer"
    name: "saswat"

Explanation:

We can see from the output above that the delete operator was effective in deleting the object emp's property age (dot way).

Delete with the square bracket method:

Syntax:

Let's use square brackets to delete the designation property from the same object emp.

Output:

{ name: "saswat", age: 26 }
    name: "saswat"
    age: 26

Explanation:

We can see from the output above that the delete operator was successful in deleting the object emp's property designation (square brackets way).

2. Remove a Property from a JavaScript Object Using Object Destructuring:

Object destructuring can also be used to remove a property from an object, but there's a catch. Instead of altering the original object, a new object that doesn't include the deleted property is created. In this manner, the original item is preserved (does not change).

Syntax:

Example:

Output:

{ brand: "HP", year: 2020 }
{ brand: "HP", model: "Notebook", year: 2020 }

Explanation:

In the aforementioned example, we removed a property from an object using object destructuring. When we used object destructuring to remove the property model from the original object laptop, we obtained the new object myLaptop without that property. Once more, the output demonstrates that the original item remained unchanged.

3. Remove a Property from a JavaScript Object Using the Reflect.deleteProperty()Method:

The Reflect.deleteProperty() method is provided by one of the built-in JavaScript objects called 'Reflect'. This approach is analogous to the delete operator's function form, which we have discussed.

Example:

Output:

{ car1: 'Honda', car3: 'Toyota' }

Explanation:

In the example above, there was an object called "cars" that had three properties. To remove the car2 property from that object, we used the Reflect.deleteProperty() method. The output demonstrates that deleting the car2 property from the cars object was successful.

Finally, we'd like to say that it makes no difference whether you use the delete operator or the Reflect.deleteProperty() method because they both do the work with essentially the same temporal complexity. However, utilising Object Destructing takes more time. Hence, due to its simple syntax and low time complexity, the delete operator is the most popular method of removing keys from javascript objects.

Conclusion

JavaScript objects are made up of properties, which are just key-value pairs. A key's associated value is automatically deleted when the key is removed.