Objects in JavaScript let you represent complex data with simple key–value pairs, much like a dictionary. But what if you need to override or augment the way those objects behave? Enter Proxy Objects: lightweight wrappers that can intercept and redefine fundamental object operations.
A proxy stands in for the original object, intercepting interactions and applying custom logic. You create one with the Proxy constructor:
const proxyObject = new Proxy(target, handler);
target: the original object handler: an object whose methods (“traps”) define how to intercept operations How Do Proxy Objects Work?
When you perform operations on a proxy—like reading or writing a property—the proxy checks its handler for a corresponding trap:
get: intercepts property access
set: intercepts property assignment
deleteProperty: intercepts property deletion
If the trap exists, it runs that logic instead of the default behavior on the target object.
Automatically log every time someone reads a property:
const proxyPlatformObj = new Proxy(platform, {
get(target, key) {
console.log[Info]: Accessing ${key} at ${Date.now()});
return target[key];
},
});
proxyPlatformObj.type;
// Logs: [Info]: Accessing type at 1729661722827
// Returns: "peerlist.io"
You can even synthesize new properties on the fly:
const proxyPlatformObj = new Proxy(platform, {
get(target, key) {
console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
if (key === "url") {
return `https://${target.type}/${target.handle}`;
}
return target[key];
},
});
proxyPlatformObj.url;
// Logs: [Info]: Accessing url at 1729662118855
// Returns: "https://peerlist.io/sachin87"
2. Validation on Property Set
Enforce rules whenever a property is written:
const proxyPlatformObj = new Proxy(platform, {
set(target, key, value) {
if (key === "handle" && !/^[a-z0-9]+$/.test(value)) {
console.error(
`[Error]: ${key} should be in lowercase and alphanumeric`
);
return false; // Prevent assignment
}
return Reflect.set(target, key, value);
},
});
proxyPlatformObj.handle = "Sachin87";
// Logs: [Error]: handle should be in lowercase and alphanumeric
Use the Reflect API to delegate to default behavior when validation passes.
Beyond Logging & Validation
Proxy traps go far beyond get and set. You can intercept:
has (the in operator)
ownKeys (listing properties)
defineProperty
getPrototypeOf, and many more
Explore MDN’s Proxy reference for the full list.
Conclusion
Proxy Objects unlock powerful metaprogramming capabilities in JavaScript. They let you:
Log access to sensitive data
Validate and sanitize inputs
Simulate computed properties
Enforce read-only objects
But with great power comes complexity—use proxies judiciously to avoid confusing your codebase. When used appropriately, they can dramatically reduce boilerplate and help you write more expressive, robust JavaScript.
If you found this guide helpful, please like, share, and comment. Happy coding!