How to Use Proxy Objects in JavaScript

Discover how JavaScript Proxy Objects let you intercept and customize object behavior—learn what they are, how they work, and practical use cases like logging and validation.

Divyansh Mishra

a month ago

how-to-use-proxy-objects-in-javascript

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.

What Is a Proxy Object?

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.

Use Cases

1. Logging Property Accessconst platform

Automatically log every time someone reads a property:

= { type: "peerlist.io", handle: "sachin87" };

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!