Javascript Delete: How to remove property of object in JavaScript

The purpose of the delete operator in Javascript, as you might think, is to delete things. More specifically, it will delete object properties. Therefore, the delete operator is designed to use the object properties. It does not affect variables or functions.

After the deletion, the property cannot be used before adding it again to the object.

Javascript Delete

Javascript delete is a built-in operator that removes the property from the object. The delete operator removes both the value of the property and the property itself. If there are no more references to the same property, it is eventually released automatically.

The delete operator also has the return value. If it succeeds in deleting the property, it will return true. If it fails to remove the property because it is unwritable, it will return false, or if in the strict mode, it will throw an error.

Syntax

The syntax of the Javascript Delete Operator is the following.

delete object.property

// or

delete object['property']

Example

Let’s see the following example.

// app.js

let appObj = {a: 21, b: 22, c: 23};
    
console.log(appObj.a);

delete appObj.a;

console.log(appObj);

See the output.

Javascript Delete Operator Tutorial

You need to keep in mind that the delete operator should not be used on predefined JavaScript object properties. This is because it can crash your application.

If you try to delete the whole object, it might not be possible for you. This is because it can only remove the properties from the object and not the entire object.

// app.js

let appObj = {a: 21, b: 22, c: 23};
    
console.log(appObj);

delete appObj;

console.log(appObj);

See the output.

How To Remove Property From Object

Unlike common belief suggests, a delete operator in Javascript has nothing to do with directly freeing memory. Instead, memory management is done indirectly by breaking references.

The delete operator removes the given property from the object. The successful deletion will return true; otherwise, the false will be returned. However, it is essential to consider the following cases.

  1. If the property you are trying to delete does not exist in the object, then delete will not have any effect and will return true.
  2. If the property with the same name exists on the object’s prototype chain, then, after the deletion, an object will use the property from the prototype chain. So, it will go for the up hierarchy.

Let’s see the following example of True or False.

// app.js

let appObj = {a: 21, b: 22, c: 23};
    
console.log(appObj);

console.log(delete appObj.d);

See the following example.

Javascript Delete Operator Tutorial | Remove Property From Object

You can see that if the object property does not exist, and if you try to remove that property that does not exist, then it will give us the true output.

Benchmark of Delete Operator in Javascript

You can see the benchmark here. Delete is the only true way to remove the object’s properties without leftovers, but it works ~ 100 times slower than its “alternative way,” which is the following.

object[key] = undefined

This alternative is not the correct way to remove the property from an object. But, if you use it with care, you can drastically speed up some algorithms.

So, when to use undefined and when to use delete operator?

The object may be seen as the set of key-value pairs. I call the ‘value’ a primitive or a reference to another object connected to that ‘key’.

Use the delete operator when you pass a result object to the code you don’t control (or when you are not sure about your team or yourself). It deletes the key from the hashmap.

let obj = {
     prop: 1     
 };
 delete obj.prop;

 Use the undefined when you care about the performance. It can give an excellent boost to your code.

The key remains in the hashmap, and only the value is replaced with an undefined.

Understand that for in loop will still iterate over that key.

let obj = {
     prop: 1     
 };
 obj.prop = undefined;

Using the above method, not all-determining the property’s existence will work as expected.

However, this code:

object.prop === undefined

 will behave equivalently for both methods.

Conclusion

The necessity of a Javascript delete operator is whenever you want to remove a property from an object. Sometimes, JavaScript developers will give it a value of null.

That’s it for this tutorial.

Recommended Posts

Javascript Object Values

Javascript Async / Await

Javascript Fetch API

Javascript class

Javascript Import

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.