• JavaScript Video Tutorials

JavaScript - Proxies

Proxy in JavaScript

The JavaScript proxies are objects that allow you to wrap a particular object and customize the fundamental operations of the object, like getting and setting object properties. In short, using the proxy object, you can add custom behavior to the object. The proxies are used to implement features such as logging, caching, and securities.

We can create a proxy object using the Proxy() constructor in JavaScript. The constructor accepts two parameters – target object and handler object. It returns a new proxy object for the target object.

Syntax

Following is the syntax to create a proxy object in JavaScript −

const obj = new Proxy(targetObj, Handler);

We used the Proxy() constructor with a new keyword in the above syntax.

Parameters

The Proxy constructor takes two parameters.

  • targetObj − It is a target object for which you want to create a proxy object and customize its default behavior.

  • Handler − It is an object containing the functionality to customize the behavior of the target object.

Example

In the example below, the person object contains the name and age property.

We have defined the proxy object for the person object named proxyObj. Also, we passed the handler object as a Proxy() constructor parameter.

In the handler object, we have defined the getters to access the object property. The getters check whether the object contains the property you are looking for. If yes, it returns the property value. Otherwise, it returns the message saying the object doesn't contain the property.

<html>
<body>
   <div id = "demo1">The name of the person is: </div>
   <div id = "demo2">The height of the person is: </div>
   <script>
      const person = {
         name: "Same",
         age: 32,
      }
      const handler = {
         // Defining the getters
         get: function (object, property) {
            return object[property] ? object[property] : 
            'Object doesnt contain the property.';
         }
      }
      const proxyObj = new Proxy(person, handler);
      document.getElementById("demo1").innerHTML += proxyObj.name;
      document.getElementById("demo2").innerHTML += proxyObj.height;
   </script>
</body>
</html>

Output

The name of the person is: Same
The height of the person is: Object doesnt contain the property.

When you access the non-existing property from the object, it returns the undefined. Here, we have customized the object's default behavior to return a nice and readable method.

If you pass the empty handler object while creating the proxy object, the proxy object will work the same as the original object.

JavaScript Proxy Handlers

There are multiple proxy handlers available in JavaScript, and we have covered some of them below. The proxy handlers are used to override the default behavior of the object.

The JavaScript get() proxy handler

The get() proxy handler in JavaScript allows you to change the property accessing behavior of the object.

Syntax

Follow the syntax below to use the get() proxy handler with the proxy object.

get(target, property, receiver)

Parameters

  • target − It is a target object.

  • property − It is a property whose value is needed to access.

  • receiver − It is a proxy object itself.

Example

In the below code, the watch object contains the brand, color, and price property. We have created the proxy for the watch object.

The handler object contains the get() handler and returns the property value if it is not. Otherwise, it returns a readable message.

<html>
<body>
   <div id = "output1">Brand:  </div>
   <div id = "output2">Price:  </div>
   <script>
      const watch = {
         brand: "Casio",
         color: "Blue",
         price: null,
      }

      const handler = {
         get(object, property) {
            return object[property] != null ? object[property] : "Property is null.";
         }
      }
      const wathcProxy = new Proxy(watch, handler);
      document.getElementById("output1").innerHTML += wathcProxy.brand;
      document.getElementById("output2").innerHTML += wathcProxy.price;
   </script>
</body>
</html>

Output

Brand: Casio
Price: Property is null.

The JavaScript set() proxy handler

The set() proxy handler in JavaScript is used to change the default behavior of updating the property of the object.

Syntax

Follow the syntax below to use the set() proxy handler.

set(target, property, value, receiver)

Parameters

  • target − It is a target object.

  • property − It is a property to change its value.

  • value − It is an updated value.

  • receiver − It is a proxy object itself.

Example

In the below code, the handler object contains the set() proxy handler. The set() handler checks whether the property is equal to the 'price’. If yes, it updates the property value with a new value. Otherwise, it sets 'Not Available' to the object property.

<html>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      const watch = {
         brand: "Casio",
         color: "Blue",
         price: null,
      }
      const handler = {
         set(object, property, value) {
            if (property === "price") {
               object[property] = value;
            }
            else {
               object[property] = "Not Available";
            }
         }
      }
      const wathcProxy = new Proxy(watch, handler);
      wathcProxy.price = 2000;
      wathcProxy.dial = "Round";
      output.innerHTML += "Price: " + wathcProxy.price + "<br>";
      output.innerHTML += "Dial: " + wathcProxy.dial + "<br>";
   </script>
</body>
</html>

Output

Price: 2000
Dial: Not Available

The JavaScript apply() proxy handler

The apply() proxy handler is used to change the default behavior of the function call.

Syntax

Follow the syntax below to use the apply() proxy handler.

apply(target, thisArg, arguments)

Parameters

  • target − It is a target function needed to execute.

  • thisArg − It refers to the context whose elements should be accessed using this keyword in the function body.

  • arguments − It is an array of arguments to pass to the function.

Example

In the below code, getDetails is a proxy object created for the getWatchDetails() function. The handler object contains the apply() method and calls the target function.

We have called the getDetails() proxy by passing the watch object as a parameter.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const watch = {
         brand: "Casio",
         color: "Blue",
         price: 2000,
      }
      const getWatchDetails = function (watch) {
         return `Brand: ${watch.brand},  
         Color: ${watch.color}, 
         price: ${watch.price}`;
      }
      const getDetails = new Proxy(getWatchDetails, {
         apply(target, thisArg, args) {
            return target(...args).toUpperCase();
         }
      });
      document.getElementById("output").innerHTML += getDetails(watch);
   </script>
</body>
</html>

Output

BRAND: CASIO, COLOR: BLUE, PRICE: 2000

Uses of the Proxy Object in JavaScript

Here, we have explained the benefits of using the proxy object with examples.

For Validation

You can use the proxy object in JavaScript to validate the property values while updating the value of the property or adding a new property to the object.

Example

In the below code, the numbers object contains the num1, num2, and num3 properties. The set() proxy handler checks whether the new value is greater than the current value. If yes, it updates the value. Otherwise, it keeps old values.

<html>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      const numbers = {
         num1: 10,
         num2: 20,
         num3: 30,
      }
      const handler = {
         set(object, property, value) {
            if (value > object[property]) { 
               // Validing the new value using the previous value
               object[property] = value;
            }
         }
      }
      const numberProxy = new Proxy(numbers, handler);
      numberProxy.num1 = 20;
      numberProxy.num2 = 10;

      output.innerHTML += "num1: " + numbers.num1 + ", num2: " + numbers.num2;
   </script>
</body>
</html>

Output

num1: 20, num2: 20

For Access Control

You can also use the proxy handler to control the access of the object in JavaScript. For example, you can restrict users from updating the object properties and making them read-only.

Example

In the below code, whenever you try to update the object property value, it prints the message that the object is read-only.

<html>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      const numbers = {
         num1: 10,
         num2: 20,
         num3: 30,
      }
      const handler = {
         set(object, property, value) {
            output.innerHTML += "Object is read-only.<br>"
         }
      }
      const numberProxy = new Proxy(numbers, handler);
      numberProxy.num1 = 20;
      output.innerHTML += "num1: " + numberProxy.num1;
   </script>
</body>
</html>

Output

Object is read-only.
num1: 10

Side Effects

You may call the functions or class methods when anyone tries to access or update the object property.

Example

In the example below, the emailValidator() function checks whether the email includes the '@'. If yes, it returns true. Otherwise, it returns false.

In the set() proxy handler, we update the property value based on the returned value of the emailValidator() function.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const emails = {
         email1: "abcd@gmail.com",
      }
      // Function to validate the email
      function emailValidator(email) {
         if (email.includes("@")) {
            return true;
         } else {
            return false;
         }
      }
      const handler = {
         set(object, property, value) {
            if (emailValidator(value)) {
               object[property] = value;
            }
         }
      }
      const emailProxy = new Proxy(emails, handler);
      emailProxy.email1 = "nmc@gmail.com";
      document.getElementById("output").innerHTML = 
      "email1: " + emailProxy.email1;
   </script>
</body>
</html>

Output

email1: nmc@gmail.com

However, usage of the proxy handers is not limited, and we can't cover each use case in this tutorial. So, you may explore more use cases of the proxy handlers.

JavaScript Proxy Handlers List

Here, we have listed all proxy handlers in JavaScript.

Proxy Handler Methods

Sr.No. Proxy Handler Description
1 apply() It changes the default behavior of the function call.
2 construct() Trapping the construction of new object.
3 defineProperty() Changing the behavior of defining new property.
4 deleteProperty() Changing the behavior of deleting the new property.
5 get() Changing the behavior of accessing object property.
6 getOwnPropertyDescriptor() To trap the getOwnPropertyDescriptor() method of the object.
7 getPrototypeOf() Trapping the internal methods.
8 has() To manipulate the checking of whether an object contains the property.
9 isExtensible() To trap the isExtensible() method of the Object.
10 ownKeys() To change the behavior of the ownKeys() method.
11 preventExtension() To trap the preventing extension of the object.
12 set() To change the default behavior of adding new property or updating a property value of the object.
13 setPrototypeOf() To customize the Object.setPrototypeOf() method.

Constructor

Sr.No. Constructor Description
1 Proxy() It is used to create a proxy object.

Static Method

Sr.No. Method Description
1 revocable() It is also used to create a new proxy object similar to the Proxy() constructor.
Advertisements