javascript: how to delete or remove a property from javascript objects?

If you are a seasoned JavaScript developer, then you work with JavaScript objects all the time and it is pretty obvious how you can remove properties from objects. This post is more for the uninitiated and newbies, not for programmers ;-).

It is easy enough create properties and assign values to them. There are also a couple of different ways you can delete or remove property from objects.

Let’ say you have an object named myJSObject that has the property named currProp. So, you will probably define that object to be something like this. We will try to keep this as simple as possible.

var myJSObject = {
currProp: "propvalue";
nextProp: "newvalue";
}

If you now want to remove the property currProp but keep the rest of the object intact, then the easiest option is to use the delete operator or statement.

delete myJSObject.currProp;

Just as you might know that there are different ways to access properties or variables, and you can use the delete statement in as many various different ways. The example below is equivalent to the one above, and you may use either of them with the same result.

delete myJSObject['currProp'];

Some programmers recommend setting the value to null or undefined before executing the delete statement. This is supposed to help with the faster and definitive garbage collection of the object property. I have never done it that way myself, nor had any issues with not having done it.

The delete operator works only with the object properties, and will not have the desired results when used with either variables or functions. You cannot delete non-configurable properties of an object either. These are properties that are created by using the var keyword. This means that “variables” or “global properties” that are just created by assignment can be deleted using this method.

One criticism of using the delete statement is that it is slow. That can especially be true if and when you have to delete several properties repeatedly, like from with in a loop or a recursive function. The delete is probably the one way to truly remove and delete a property, both the key and the value.

Many times, of course depending on the coding requirements it may not always be necessary to the remove the property in its entirety. Usually, it is just the value that you are using and is concerned about. That means you can set the value to something that you can test and programmatically treat it as a deleted or non-existent key/value. This can help with the performance of the operation considerably.

The one value you can use for this purpose in JavaScript is undefined. You can just set the value of the property to undefined, just as you set the value of a property.

myJSObject.currProp = undefined;

You can now test for the property using the === operator. Most of the other property existence methods will work too.

if (myJSObject.currProp === undefined) { ... }

The main difference is that now you are testing for the value of the property (to be undefined) rather than the existence of the property itself. Depending very much on the existing code and the use of testing methods for the property elsewhere in the code, you can choose either of the above methods to serve the purpose of removing the property.