JavaScript Delete Operator
The JavaScript delete operator deletes/ removes a property from an object. It removes the property as well as value of the property from the object. It works only with the objects not with the variables or functions.
In JavaScript, an array is an object, so you can use the ‘delete’ operator to delete an element from the particular index. However, there are methods like pop(), slice(), or shift() available to delete the element from the array.
Syntax
Follow the below syntax to delete the object property using the ‘delete’ operator.
delete obj.property;ORdelete obj["property"];
Return value − The ‘delete’ operator returns true if the operand (specified property) is deleted successfully, otherwise returns false if the property is not deleted.
If you try to delete a property that doesn’t exist, it will return true but will not affect the object.
Follow the below syntax to delete the array element using the ‘delete’ operator.
delete arr[index];
Deleting Object Properties
The JavaScript delete operator can be used to delete a property of an object. To delete the property we write the delelte operator followed by the property of the object.
delete obj.propertyName; or delete obj["propertyNmae"];
In the above syntas, object property named propertyName is being deleted from the object called obj.
Example: Deleting an Object Property
The ‘obj’ object in the example below contains the product, price, and color properties. We used the delete’ operator to delete the price property from the object.
<html><body><div id="output"></div><script>const obj ={
product:"Mobile",
price:20000,
color:"Blue",}delete obj.price;// deleting price
document.getElementById("output").innerHTML ="The Mobile price is "+ obj.price +" and color is "+ obj.color;</script></body></html>
It will produce the following result −
The Mobile price is undefined and color is Blue
Notice that when we access the deleted property, it returns undefined.
Example: Deleting a Nonexistent object Property
Try to delete a property that doesn’t exit. It will return true but doesn’t affect the original object.
<html><body><div id="output"></div><script>const obj ={
product:"Mobile",
price:20000}
document.getElementById("output").innerHTML =delete obj.color;</script></body></html>
The above program will produce the following result −
true
Deleting Array Elements
We can use the delete operator to remove or delete an element from an array. To delete an element, we use delete keyword followed by array element. We can use square brackets ([]) to access the elements from the array.
Example
The below code contains the array of numbers. We used the ‘delete’ operator to delete the element from the 1st index of the array. In the output, you can observe that element from the array gets deleted, but the position of the other elements remains as it is. The array length also remains the same.
<html><body><div id="output"></div><script>const arr =[10,20,30,40,50,60];delete arr[1];// deleting 2nd element from array
document.getElementById("output").innerHTML =
arr +"<br>"+
arr[1];</script></body></html>
It will produce the following result −
10,,30,40,50,60 undefined
Deleting Predefined Object
The JavaScript ‘delete’ operator can delete the predifiend object such as Math, Date, etc. It is not advisable to delete predefined objects. Once deleted, you can’t access the properties of these objects.
Example: Deleting Built-in Math Object
In the example below, we try delete Math object so we get the above error.
<html><body><div id="output"></div><script>var x =10varfun=function(){return20;};
document.getElementById("output").innerHTML ="delete Math.PI :"+delete Math.PI+"<br>"+"delete Math :"+delete Math +"<br>";try{
document.getElementById("output").innerHTML += Math.PI;}catch(e){
document.getElementById("output").innerHTML += e;}</script></body></html></pre>
It will produce the following output −
delete Math.PI :false
delete Math :true
ReferenceError: Math is not defined
Can't Delete Variables and Functions
The delete operator can't delete the variables or functions.
<html><body><div id="output1"></div><div id="output2"></div><script>var x =10varfun=function(){return20;};
document.getElementById("output1").innerHTML =delete x;
document.getElementById("output2").innerHTML =delete fun;</script></body></html>
It will produce the following result −
false
false
The variable defined without var, let or const can be deleted. Such a variable is treated as property of window object.
<html><body><div id="output1"></div><div id="output2"></div><script>try{
x =10
document.getElementById("output1").innerHTML =delete x;
document.getElementById("output2").innerHTML = x;}catch(e){
document.getElementById("output2").innerHTML = e;}</script></body></html></pre>
It will produce the following result −
true
ReferenceError: x is not defined