JavaScript's Proxy object is one of its most powerful and lesser-known features. Proxies allow you to intercept and customize fundamental operations, like property access, assignment, or function invocation. This can lead to highly dynamic and flexible code.

In this blog post, we’ll explore how Proxies work, common use cases, and provide examples of their practical application.

What is a Proxy?

A Proxy wraps an object and allows you to intercept and redefine its default operations. Proxies are created using:

const proxy = new Proxy(target, handler);

• target: The object you want to proxy.
• handler: An object containing traps (intercepting functions).

Basic Example: Logging Property Access

Here’s how you can use a Proxy to log every time a property is accessed:

const target = {
 name: 'Alice',
 age: 25
 };

const handler = {
  get: (obj, prop) => {
    console.log(`Property ${prop} was accessed.`);
    return obj[prop];
  }};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Logs: "Property name was accessed." and then "Alice"

In this example, the get trap intercepts property reads and logs them before returning the property value.

Use Case 1: Validation

Proxies can enforce rules dynamically, such as restricting invalid property assignments.

const user = {
 name: 'Alice',
 age: 25
};

const handler = {
  set: (obj, prop, value) => {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number.');
    }
    obj[prop] = value;
    return true;
  }};

const proxy = new Proxy(user, handler);

proxy.age = 30; // Works fine
proxy.age = 'thirty'; // Throws TypeError: Age must be a number

This approach is particularly useful for data validation in applications.

Use Case 2: Automatic Defaults

You can use Proxies to provide default values for undefined properties.

const target = {};

const handler = {
  get: (obj, prop) => {
    return prop in obj ? obj[prop] : `Default value for ${prop}`;
  }};

const proxy = new Proxy(target, handler);

console.log(proxy.username); // "Default value for username"
proxy.username = 'JohnDoe';
console.log(proxy.username); // "JohnDoe"

This pattern ensures your application doesn't break when accessing undefined properties.

Use Case 3: Observing Changes

Want to track changes to an object? Proxies make this easy.

const target = {
 name: 'Alice',
 age: 25
 };

const handler = {
  set: (obj, prop, value) => {
    console.log(`Property ${prop} changed from ${obj[prop]} to ${value}`);
    obj[prop] = value;
    return true;
  }};

const proxy = new Proxy(target, handler);

proxy.name = 'Bob'; // Logs: "Property name changed from Alice to Bob"

This pattern is useful for creating state management tools.

Use Case 4: API Wrapping

Proxies can enhance APIs dynamically. For instance, you can provide user-friendly error messages:

const api = {
  getUser: () => ({ id: 1, name: 'Alice' }),}

;const handler = {
  get: (obj, prop) => {
    if (prop in obj) {
      return obj[prop];
    }
    throw new Error(`API method ${prop} does not exist`);
  }};

const proxy = new Proxy(api, handler);

console.log(proxy.getUser()); // { id: 1, name: 'Alice' }
console.log(proxy.deleteUser()); // Throws Error: API method deleteUser does not exist

Use Case 5: Revocable Proxies

Proxies can be revoked when no longer needed, making them useful for security-sensitive applications.

const target = {
 secret: 'hidden'
 };

const handler = {};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.secret); // "hidden"

revoke();

// Throws TypeError: Cannot perform 'get' on a proxy that has been revoked
console.log(proxy.secret); 

Revocable Proxies ensure temporary control over object interactions.

Best Practices and Considerations

• Avoid Overuse: While powerful, proxies can make code harder to debug. Use them for well-defined use cases.
• Performance: Proxies introduce a slight overhead; consider this for performance-critical operations.
• Security: Be cautious when using Proxies with user-generated data.

Conclusion

JavaScript Proxies open up a world of possibilities for creating dynamic and robust applications. From enforcing validations to wrapping APIs or tracking state changes, their flexibility makes them a valuable tool in any developer's toolkit.

Try out these examples in your projects and unlock new levels of creativity in your JavaScript development. 

Powered by Froala Editor