Proxy in JS

Understanding JavaScript Proxies

Imagine when we were in school, there were days when we couldn't attend class, but we still wanted our attendance to be marked. In such cases, we would ask a friend to mark our attendance on our behalf. This friend acts as a proxy, taking actions on our behalf to ensure our attendance is recorded.

?? What is a Proxy?

In JavaScript, a Proxy is like that friend who marks your attendance. It's an object that wraps around another object and intercepts operations performed on that object. By using a Proxy, you can define custom behavior for fundamental operations such as getting, setting, or deleting properties of the object.

?? Why Use JavaScript Proxies?

• Validate and enforce rules on how data is accessed and modified.
• Log interactions for debugging and monitoring purposes.
• Secure sensitive data by controlling access and modifications.
• Virtualize properties to compute values dynamically.
• Implement caching to improve performance by storing and reusing computed results.
• Enforce business rules to ensure data consistency and integrity.

?? How Does a Proxy Work?

A Proxy involves two main components

1. Target: The actual object we want to perform operations on.
2. Handler: An object that contains traps, which are methods that intercept and redefine operations performed on the target.

Creating a Proxy

To create a Proxy, you use the Proxy constructor, passing in the target object and a handler object with traps.

Traps

? get: Intercepts reading a property from the object.

• Parameters: target (the object), prop (the property name).
• Example: When you access a property of the proxy, the get trap can log a message or modify the value being returned.

? set: Intercepts writing a property to the object.

• Parameters: target (the object), prop (the property name), value (the value being set).
• Example: When you set a property on the proxy, the set trap can validate the value or log a message before setting it.

? ownKeys: Intercepts operations that list the properties of the object.

• Parameter: target (the object).
• Example: When you use Object.keys on the proxy, the ownKeys trap can modify the list of properties being returned.

?? Explanation Using get, set & ownKeys for School Proxy??

Imagine you want to mark your attendance even when you're not in class. You ask your friend to do it for you. Similarly, in JavaScript:

• Target: The object representing your attendance record.
• Handler: Your friend, defining how to mark the attendance.get: When someone checks your attendance, your friend intercepts and provides the information.set: When someone tries to update your attendance, your friend intercepts and updates it as per the rules you defined.ownKeys: When someone lists all your records, your friend controls what gets listed.

By using a Proxy, you can ensure that every interaction with the object goes through your friend (the handler), allowing you to add custom behavior such as validation, logging, or access control.

? has: Intercepts the in operator used to check if a property exists in the object.

• Parameter: target (the object), prop (the property being checked)
• Example : When you check if name exists in proxy, the has trap logs the check and returns true.

? deleteProperty: Intercepts the delete operator used to delete a property from the object.

• Parameters: target (the object) ,prop (the property being deleted)
• Example: When you delete proxy.name, the deleteProperty trap logs the deletion and deletes the property.

Conclusion

? Purpose of Proxies:Proxies act like middlemen between code and objects. They let developers customize how basic operations like reading, writing, and deleting properties on objects work.

? Main Components:

• Target: The actual object we want to perform operations on.
• Handler: An object that contains traps, which are methods that intercept and redefine operations performed on the target.

? Common Traps and Their Uses:

• get: Intercepts reading a property from the object.
• set: Intercepts writing a property to the object.
• ownKeys: Intercepts operations that list the properties of the object.
• has: Intercepts the in operator used to check if a property exists in the object.
• deleteProperty: Intercepts the delete operator used to delete a property from the object.

? Benefits of Using Proxies:

• Customization: Proxies allow developers to create unique behaviors for objects, such as validating data, managing access, or computing .
• Security: They help keep sensitive data safe by enforcing rules on how data can be accessed or changed.
• Debugging: Proxies make debugging easier by logging interactions between code and objects, making it simpler to find and fix problems.
• Performance Optimization: They can improve performance by caching results or delaying operations until they are needed, known as lazy-loading.

Meanwhile what you all can do is, Like and Share this edition among your peers and also subscribe to this Newsletter so that you all can get notified when I come up with more content in future. Share this Newsletter with anyone who might be benefitted from this content.

Until next time, Dive Deep and Keep Learning! ??