Published: Modified: V1.31
js

javaScript delete operator

The JavaScript delete operator might not come up that often in code examples, but once in a while it might be needed as a way to remove object properties. The reason why I say that it does not come up often is because all of the time thus far setting the value of an object property to something like null or undefined is good enough. In addition I often just keep reusing the same resources in many of my projects so there is not really a need to delete an object property to begin with.

However that is not to say that there are not reasons to use the delete operator now and then when working out some javaScript code. Of course not delete is there very much for a reason, and it will do more or less what one would expect to object properties. So then in this post I will be checking out the delete operator, and some related topics that seem to center around the use of it when it comes to managing object properties in javaScript.

1 - javaScript delete basics

In this section I will be starting out with just a few basic examples of the javaScript delete keyword. The main thing about this is that the delete keyword will totally delete an object property which differs from setting the value of a property to a value of undefined. This might also present the main area of confusion also as the default value for an object property that does not exist is also undefined. So in other words it is possible for a key of an object to exist, but have a value of undefined, and it is also possible for a key of an object to just not exist at all but when it is accessed the value of the key is, well, undefined.

Although I do keep the examples in these basics sections of my post simple, this is still not a post on making the very first steps when it comes to learning javaScript for the first time. So I assume that you have mad at lest the first few steps when it comes to learning what is required in order to gain something from the examples in this section.

- The source code examples in this post are on Github

In my test vjs project on Github I have the source code examples of this post, as well as the source code examples for my many other posts on vanilla javaScript topics.

1.1 - javaScript delete basic example

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.

1
2
3
4
5
6
7
8
let obj = {
    x: 5,
    y: 7,
    t: 1
};
console.log(obj.t); // 1
delete obj.t
console.log(obj.t); // undefined

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.

1.2 - Delete and set undefined

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.

1
2
3
4
5
6
7
8
var obj = {
    x: 15,
    y: 27
};
obj.y = undefined;
console.log(Object.keys(obj).length); // 2
delete obj.y;
console.log(Object.keys(obj).length); // 1

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.

1.3 - Can not delete variables

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.

1
2
3
4
5
6
7
8
9
10
// can not delete variables (in nodejs)
var n = 42;
delete n;
console.log(n); // 42
 
// but can delete a property
this.n = 42;
console.log(this.n); // 42
delete this.n;
console.log(this.n); // undefined

However it is possible to delete global variables in client side javaScript the reason why is because they are really properties of the window object.

1.4 - The return value of the delete operator.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {
    foo: 'bar'
};
 
Object.defineProperty(obj, 'bar', {
    value: 'foobar',
    enumerable: true,
    configurable: false,
    writable: false
});
 
console.log(delete obj.foo); // true
console.log(delete obj.bar); // false
 
console.log(obj); // { bar: 'foobar' }

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.

1.5 - The delete operator mangles an existing object.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var obj = {
    x: 15,
    y: 27,
    time: 300,
    lastCall: 30
};
 
// clone the object somehow
var objCopy = JSON.parse(JSON.stringify(obj));
delete objCopy.time;
delete objCopy.lastCall;
 
objCopy.x = 0;
objCopy.y += 3;
 
console.log(objCopy.x, objCopy.y); // 0 30
console.log(obj.x, obj.y); // 15 27

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.

2 - Indexed Objects, Sparse Arrays, and the delete operator

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.

2.1 - Object with undefined keys, and an empty object

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// an object with three indexed keys each set to undefined
// with a private length property of 3
let obj = {
    0: 'undefined',
    1: 'undefined',
    2: 'undefined',
    length: 3
};
Object.defineProperty(obj, 'length', {
    enumerable: false,
    value: 3
});
// an empty object
// with a private length property of 3
let obj2 = {};
Object.defineProperty(obj2, 'length', {
    enumerable: false,
    value: 3
});
 
// so then they both have the same 'length'
console.log(obj.length); // 3
console.log(obj2.length); // 3
 
// but the public key count is different
console.log(Object.keys(obj).length); // 3
console.log(Object.keys(obj2).length); // 0
 
// delete can make obj truly empty
delete obj[0];
delete obj[1];
delete obj[2];
console.log(Object.keys(obj).length); // 0
console.log(Object.keys(obj2).length); // 0

2.2 - Delete and an Sparse indexed 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let obj = {
    0: 5,
    1: 7,
    2: 1,
    40: 3,
    41: 7,
    42: 12
};
 
console.log(Object.keys(obj).length); // 6 public (enumerable) keys
 
// setting elements to undefined or null will not
// effect the number of public keys
obj[0] = undefined;
obj[1] = null;
console.log(Object.keys(obj).length); // 6 public (enumerable) keys
 
// setting an empty key to undefined will count as a public key
obj[3] = undefined;
console.log(Object.keys(obj).length); // 7 public (enumerable) keys
 
// The delete operator will actually delete a key
delete obj[0];
delete obj[1];
delete obj[2];
delete obj[3];
delete obj[4];
delete obj[5];
console.log(Object.keys(obj).length); // 3 public (enumerable) keys

3 - Conclusion

Hopefully you learned a thing or two about the delete operator in javaScript today. It can come in handy in some situations but is not always the best tool for the job. For the most part when I am working on projects I can not say that I use the delete operator often, as I like to created and use libraries and tools like that of object pools that are a way to just keep using the same collection of objects and prosperities over and over again rather than created and deleting things as needed. However it is nice to know that it is there in the event that I do need it for some reason.