The delete operator as you might expect is there to help delete things, but not just anything, only object properties. To use it just place the operator before the object property as it has right to left associativity.
Here I have a basic example of an object that has three properties, and I want to delete one of them. The delete operator can be used to do so, and when it is used and works successfully at deleting the property, it does not just set the property value to undefined it gets rid of it completely.
As I mentioned in the last section the delete operator can get rid of a property completely from an object. This differs from just setting an object key value to undefined. In that case the value of the property is undefined, but the key is still very much there and will show up in for in loops or when using an Object static method like Object.keys.
So then the delete operator serves a purpose because it can potentially be used as a way to free up a little memory in some cases.
The delete operator expects an object property to the right of it when used in an expression. It can not be used to delete variables, unless it is a property of an object, and that property can be deleted. For example if I create a variable with say the var keyword, I can not just use the name of that variable with the delete operator. However if that variable is also a property of some kind of object that of course it can be deleted that way.
The delete operator returns a value of course, and that value is a true or false boolean value. In the event that the property can not be deleted for whatever the reason then the value will be false, otherwise true will be returned if all is well.
Here I am using the Object.defineProperty method to set a property of an object so that it can not be deleted. When The configurable property of the options object that I give to Object.defineProperty is set to false, then the property can not be deleted.
Some times I might want to create a new independent object from an existing object, and that new object will have just some properties from the older object. There is a lot to be said about that when it comes to cloning objects, in lodash there are methods like _.pick, and _.omit that can be used to make quick work with this. However when dealing with just plain vanilla js the process might be just a little involved.
In this example I am using the JSON trick to clone an object, maybe not the best way to go about doing it but one way or another the object will need to be cloned. Once I have a cloned object I can then delete properties and change the values of the properties that remain and not effect the original object from which the new object was cloned.
The delete operator will actually delete an object property which is very different from setting it to a value such as undefined. When reading object properties that are empty the resulting value us undefined, however this is actually a little misleading, the true value is not even that, it is empty, it is not even there are all. That is because an object property can be defined, but with a value that is undefined. I know that might should a little confusing, and yes it is, but maybe there is something that can be done to help with that confusion.
In this section I will be going over some Objects that are indexed objects that is objects with numbered public keys and also a length property. Such objects are formated like that of arrays actuality in fact they can easily be covered into them by using something like the array from method. These objects should help to give you a better understanding over what the difference is between having elements of an object that are undefined, and elements that are truly empty.
Maybe a good way to understand the difference between truly empty, and defined but undefined is to take into account the following example involving two objects. One object has a bunch of numbered public keys, but each key has a value of undefined, the other object is just simply an empty object that has no public, or private keys defined at all. However I am using the Object.defineProperty method to define length properties for both of these objects that are not enumerable, and are of a value greater than 0. So when I access the length properties of both of these objects I get a length of 3, but when I look at the count of public keys by making use of something like the Object keys static method I get and array of three elements for the object that has keys defined but with undefined values, and I get an array of zero keys for what started out as an empty object.
In this example I am working with an object with indexed keys, but the index values are sparse. This example should help to show what the difference is between setting elements to an undefined value, and actually removing them with the delete operator.
If I just set keys that are all ready set to a value as something like undefined that will not effect the count of public key values. The key is still there it just holds a value that is undefined, however if I use the delete key it will actually remove the key completely. In addition if I set a key value that has not been defined yet that will increase the number of public keys, but if I call delete on a key that is all ready empty to begin with that will have no effect.