In JavaScript, the Proxy object enables you to define custom behavior indirectly for an object’s fundamental operations. It also permits the developers to wrap a proxy object around another object and create an undetectable barrier around it.
With the help of the Proxy object, you can call functions, access properties, and set the target object’s properties. A proxy object is also considered an excellent tool for encapsulation, as it restricts direct access to the original object.
This write-up will explain the procedure to create a proxy object in JavaScript. So, let’s start!
How to create proxy object in JavaScript
A Proxy() constructor is utilized for creating a proxy object in JavaScript. The created Proxy object will be then used to intercept the typical operations of the original object.
Check out the syntax of the JavaScript proxy constructor.
Syntax for creating a proxy object in JavaScript
You can utilize the below-given syntax for creating a new proxy object in JavaScript:
let proxy = new Proxy(target, handler);
Here, “target” represents the object which will be wrapped, “handler” is the object which comprises the methods for controlling the behavior of the specified target object. Lastly, “traps” are added inside the “handler” object as its methods.
Example: How to create a proxy object in JavaScript
First of all, we will create an object named “employee” having the following three properties:
const employee = {
name: ‘Alex’,
gender: ‘Male’,
designation: ‘Manager’,
}
Then, a “handler” object is defined, which contains JavaScript “get()” method as “trap”. The JavaScript get() method will retrieve the specified “property” of the “target” case and store its value in the handler object:
const handler = {
get(target, property) {
console.log(`Property${property} is accessed`);
return target[property];
}
}
In the next step, we will create a proxy object “proxyEmployee” and pass the “handler” and “employee” as target objects to the constructor:
const proxyEmployee = new Proxy(employee, handler);
The “proxyEmployee” utilizes the “employee” object to store data, and it then has all access to the “employee” object properties:
<img alt="proxy" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/proxy.png" data-lazy- height="600" src="data:image/svg xml,” width=”1457″>
Lastly, we will use the “proxyEmployee” object to get the “name” and “designation” Properties of the “employee” object:
console.log(proxyEmployee.name);
console.log(proxyEmployee.designation);
Below-given output signifies that “proxyEmployee” object has successfully accessed the employee object’s properties:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-87.png" data-lazy- height="612" src="data:image/svg xml,” width=”873″>
Another important thing to remember is that if you update any property value of the “employee” object, changes can also be seen in “proxyEmployee”.
For instance, we have modified the “employee” object’s “name” property value to “Paul”:
employee.name = ‘Paul’;
console.log(proxyEmployee.name);
Output
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-89.png" data-lazy- height="136" src="data:image/svg xml,” width=”695″>
As you can see from the output, the value of the “proxyEmployee.name” is also changed. Similarly, any modification in the “proxyEmployee” object will also reflect upon the “employee” object:
proxyEmployee.designation = ‘Author’;
console.log(employee.designation);
Execution of the above-given code will also update the “designation” property value of the “employee” object:
<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/word-image-90.png" data-lazy- height="101" src="data:image/svg xml,” width=”825″>
Till this point, you have learned the procedure to create a proxy object in JavaScript. Now, check out the following table to get a brief overview of the Proxy Trap methods.
Proxy Traps in JavaScript
| Proxy Traps | Description |
| get() | The “get()” proxy trap is triggered when the proxy object accesses a target object’s property. |
| set() | The “set()” proxy trap is used to set the specified target object’s property value. |
| getPrototype() | The “getPrototype()” method traps an internal call to the Object.getPrototype() and returns the target object’s prototype. |
| setPrototype() | The “setPrototype()”sets the prototype of the target object by invoking the Object.setPrototype() method. |
| isExtensibile() | The “isExtensible()” proxy trap invokes the object.isExtensible() method to determine if the target is extensible or not. |
| preventExtensions() | The “preventExtensions()” trap call out the “Object.preventExtensions()” method to prevent the extensions of the target object. |
We have discussed the critical information about creating a Proxy object in JavaScript.
Moreover, a brief description of some useful Proxy traps is also provided; you can explore them further according to your preferences.
Conclusion
The Proxy() constructor is utilized to create a proxy object in JavaScript. It accepts two arguments: target and handler, where the target represents the object which will be wrapped, and handler is the object which comprises methods (traps) for controlling the behavior of the specified target. This write-up explained the procedure to create proxy objects in JavaScript.
About the author
<img alt="" data-lazy-src="https://secure.gravatar.com/avatar/c73b74cd8044d2e9b300610f5af77d0b?s=112&r=g" data-lazy- height="112" src="data:image/svg xml,” width=”112″>
Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.
