AppDividend
Latest Code Tutorials

Javascript Delete: How to Remove Property of Object in JS

0

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

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

Javascript Delete Operator

Javascript delete is an inbuilt 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, then 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 the property 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']

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

One thing you need to keep in mind is that the delete operator should not be used on predefined JavaScript object properties. It can crash your application.

Now, if you try to delete the whole object, then it might not be possible for you. 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 what common belief suggests, a delete operator in Javascript has nothing to do with directly freeing memory. Memory management is done indirectly by breaking references.

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

  1. If the property which 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 in 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 any 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. What I call the ‘value’ is 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 on which you don’t have any 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 its place 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 ways of determining the property 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 rather than delete a property, JavaScript developers will give it a value of null.

Finally, remove property from Object in Javascript Example is over.

Recommended Posts

Javascript Object Values

Javascript Async / Await

Javascript Fetch API

Javascript class

Javascript Import

Leave A Reply

Your email address will not be published.

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