Delete. The sole purpose of this keyword is quite self-explanatory – we want to delete “something”. But what can we delete? And do we really delete “that” or can we read it again? This article will take you into the world of the delete operator in JavaScript – you will learn what you can and cannot delete and what exactly the delete operator in specific situations really means?
The delete operator removes the properties of an object in JavaScript
First, let’s clarify what properties and objects in JavaScript are. So, in JavaScript, objects have some values and these values are called properties. You can do many things with these properties – you can read them, you can change them, you can create and add new properties and you’ve guessed it – with the delete operator you can remove the properties of an object in JavaScript.
But what does that mean? When we use the delete operator, both the value of the property and the property itself are deleted. After they are deleted, they cannot be read again, and you have to add the property and its values back again to be able to read it. So, when you delete a property in an object, that property is not accessible anymore, and when you call it, JavaScript returns undefined.
But, what if you’re trying to delete the property that doesn’t exist? In that case, the delete operator won’t have any effect and can return true.
Finally, the invocation of the delete operator returns true when it removes a property – when the deletion is successful, and false if the deletion isn’t successful, which may happen for various reasons.
For example, the delete operator is only effective on an object’s properties, but not on predefined JavaScript object properties. In addition to that, the delete operator has no effect on variable or function names, but more about that later in the post.
The delete operator cannot be used on predefined and non-configurable JavaScript object properties
You should not use the delete operator on predefined JavaScript object properties like window, Math, and Date objects, because it will crash your application.
A rule of thumb is that non-configurable properties cannot be removed, and this includes properties of built-in objects like Math, Array, Object and properties that are created as non-configurable with methods like Object.defineProperty().
You cannot remove variables with a delete operator
As we described above, the delete operator removes an object’s property, but unfortunately, it cannot simply delete a variable. Thus, if you declare a property with var, it cannot be deleted from the global scope or from a function’s scope – if you call it, JavaScript will return “false”.
However, there is a way to get around that. When you declare a variable without var, you can delete it and if you call it, JavaScript will return “true”. Why is that? When you declare a variable without the var keyword, it is internally stored as a property of the window object, and (although not recommended because it can crash your application) we can delete the properties of the window object.
Can you delete values from an array?
You’ve learned that JavaScript arrays are objects and that their elements can be deleted by using delete. But there is a trick of trade here – when you use the delete operator, it will delete the object property, but the problem is that the array will not be reindexed nor will the length of an array be updated and the deletion may make it appear as if the array is undefined. When you use the delete operator with an array, it may defect the code and leave undefined holes in the array. Instead using delete operator, you should use pop(), shift(), or splice() methods instead.
What about built-in objects – can you delete them?
We’ve already mentioned that in this blog post – yes, you can delete built-in objects like Math, Date, and window. However, this practice is not safe, because deleting built-in objects can crash your application.
What about deleting non-configurable properties – can you delete them?
You should understand that object properties besides a value, have three special attributes:
writable – when true, you can change the value of a property, if not it’s read-only.
enumerable – when true, the property is listed in loops, if not it is not listed.
configurable – when true, you can delete the property or you can modify the attributes; if not true when called, it cannot be changed.
If you assign the values by using Object.defineProperty and set them to configurable: false in an object, you cannot delete them. And if you want to delete a non-configurable property in a strict mode, JavaScript will throw an error.
So, what should you absolutely know about the delete operator when working in JavaScript?
Deleting built-in objects and non-configurable properties is not safe – it can either crash your application or you can expect an error.
If you don’t want any leftovers in an object’s properties after deleting them, be aware that if you use delete in loops, it will work a lot slower. However, there is a solution. You can set the value to undefined like object[key] = undefined. Yes, that won’t delete the property with all leftovers, but it will set the value to undefined, and yes, that is not the best solution, but if you use it carefully, you should be able to improve the performance.