JavaScript Handler deleteProperty() Method

The handler.deleteProperty() method is a fundamental part of JavaScript's Proxy object, that defines the behavior of deleting properties from a proxy object. It is invoked when the delete operator is used on a proxy objects property, allowing the developers to alter the deletion behavior. The handler parameter is an object containing traps, including deleteProperty, which is a function invoked when a property is deleted.

When handler.deleteProperty() is called, the property deletion process is initiated, and the outcome of the deletion determines if it was successful. This is an essential method for implementing JavaScript custom logic around property deletion.

Syntax

Following is the syntax of JavaScript handler.deleteProperty() method −

new Proxy(target, {
   deleteProperty(target, property) {}
});

Parameters

target − It holds the target object.
property − It is the name or symbol of the property that is to be deleted.

Return value

This method returns a Boolean value indicating whether the property is successfully deleted or not.

Example 1

Let's look at the following example, where we are going to delete a property from the object.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
let a = {
   x: 11,
   y: 22
};
let b = {
   deleteProperty(target, property) {
      document.write(`${property} Property deleted` + " < br > ");
      delete target[property];
      return true;
   },
};
let c = new Proxy(a, b);
delete c.x;
document.write(JSON.stringify(a));
</script>
</body>
</html>

Output

If we execute the above program, it will displays a text on the webpage.

Example 2

Consider another scenario where we are going to prevent the property deletion.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
let a = {
   x: 'Hi',
   y: 'Welcome'
};
let b = {
   deleteProperty(target, property) {
      if (property === 'x') {
         document.write('Cannot delete property' + " < br > ");
         return false;
      } else {
         document.write('Deleting property');
         delete target[property];
         return true;
      }
   },
};
let c = new Proxy(a, b);
delete c.x;
document.write(JSON.stringify(a));
</script>
</body>
</html>

Output

On executing the above script, it will displays a text on the webpage.

Example 3

In the following example, we are going to delete the property that doesn't exists.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
let a = {
   x: 11,
   y: 223
};
let b = {
   deleteProperty(target, property) {
      document.write(`Deleting "${property}" property` + " < br > ");
      delete target[property];
      return true;
   },
};
let c = new Proxy(a, b);
delete c.z;
document.write(JSON.stringify(a));
</script>
</body>
</html>

When we execute the above code, it will generate an output consisting of the text displayed on the webpage.

Print Page