JavaScript Handler set() Method

The handler.set() method in JavaScript is used to build a proxy object that allows to set object properties. The handler.set() method is called with the target object, the property key, and the new value as arguments when a property is set on the proxy object. The handler.set() method can then perform any necessary logic, such as validating the new value before allowing the property to be set on the target object. This method can be used for the customization of object behavior, making it useful for implementing features like data validation, access control.

Syntax

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

new Proxy(target, {
   set(target, property, value, receiver) {}
});

Parameters

target − It holds the target object.
property − It holds the name or symbol of the property to set.
value − It the new value of the property to set.
receiver − It holds the object to which the assignment was originally directed.

Return value

This method returns a Boolean Value.

Example 1

Let's look at the following example, where we are going to intercept a property on an objcet and log the property value being set.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const x = {
   set(target, property, value) {
      document.write(`${value}`);
      target[property] = value;
      return true;
   },
};
const y = new Proxy({}, x);
y.car = 'POLO GT';
</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 addition.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {};
const b = {
   set(target, property, value) {
      if (property === 'x') {
         document.write(`Setting ${property}: ` + " < br > ");
         target[property] = value;
         return true;
      }
      document.write(`Setting ${property}:` + " < br > ");
      return false;
   }
};
const c = new Proxy(a, b);
c.x = 11;
document.write(c.x + " < br > "); 
c.y = 22; document.write(c.y);
</script>
</body>
</html>

Output

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

Example 3

In the following example, we are going to validate if the value being set is a positive number or not.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {};
const b = {
   set(target, property, value) {
      if (typeof value === 'number' && value > 0) {
         document.write(`Setting Value for ${property}:` + " < br > ");
         target[property] = value;
         return true;
      }
      document.write(`Setting Value for ${property}:` + " < br > ");
      return false;
   }
};
const c = new Proxy(a, b);
c.x = 'Welcome';
document.write(c.x + " < br > "); 
c.y = 123; document.write(c.y);
</script>
</body>
</html>

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

Print Page