• JavaScript Video Tutorials

JavaScript - Delete Operator

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;
 OR
delete 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 = 10
   var fun = function(){return 20;};
   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>

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 = 10
   var fun = function(){return 20;};
   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>

It will produce the following result −

true
ReferenceError: x is not defined
Advertisements