JavaScript Proxy: Validation, Logging, and Observable Objects

The Hidden Power of JavaScript Proxy: Unlocking Validation, Logging, and Observable Objects

Have you ever wished you could intercept and manipulate property access on an object in JavaScript? Perhaps you've struggled with validating user input or detecting changes to complex data structures. The JavaScript Proxy API is here to help, and it's more powerful than you might think.

Table of Contents

• Understanding the JavaScript Proxy API
• Creating a Validation Proxy
• Logging with Proxies
• Building Observable Objects with Proxy
• Performance Considerations
• Key Takeaways
• FAQ

Understanding the JavaScript Proxy API

The JavaScript Proxy API is a part of the language's metaprogramming capabilities. It allows us to create a proxy object that sits between an object and the outside world, intercepting and modifying property access. A proxy is created with a target object and a handler object, which defines the traps that will be used to intercept property access.

const target = { foo: 'bar' };
const handler = { /* traps */ };
const proxy = new Proxy(target, handler);

The handler object can define several traps, including get, set, has, and more. These traps are called when the corresponding operation is performed on the proxy object.

Creating a Validation Proxy

One common use case for proxies is validation. We can create a proxy that checks the type of a property before allowing it to be set.

const validator = {
  set(target, prop, value) {
    if (typeof value !== 'string') {
      throw new Error(`Invalid type for ${prop}`);
    }
    target[prop] = value;
    return true;
  }
};

const person = { name: 'John' };
const validatedPerson = new Proxy(person, validator);

try {
  validatedPerson.age = 30; // throws Error
} catch (e) {
  console.error(e);
}

In this example, the validator handler checks that the value being set is a string. If it's not, an error is thrown.

Logging with Proxies

Another useful application of proxies is logging. We can create a proxy that logs every property access.

const logger = {
  get(target, prop) {
    console.log(`Getting ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
};

const loggedObject = new Proxy({}, logger);

loggedObject.foo = 'bar'; // logs "Setting foo to bar"
console.log(loggedObject.foo); // logs "Getting foo"

In this example, the logger handler logs every property access.

Building Observable Objects with Proxy

Proxies can also be used to create observable objects. We can create a proxy that notifies observers when a property changes.

class Observable {
  constructor(target) {
    this.target = target;
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  notify(prop, value) {
    this.observers.forEach(observer => observer(prop, value));
  }

  get handler() {
    return {
      set(target, prop, value) {
        target[prop] = value;
        this.notify(prop, value);
        return true;
      }
    };
  }
}

const observable = new Observable({ foo: 'bar' });
observable.subscribe((prop, value) => console.log(`Changed ${prop} to ${value}`));

const observableProxy = new Proxy(observable.target, observable.handler);
observableProxy.foo = 'baz'; // logs "Changed foo to baz"

In this example, the Observable class creates a proxy that notifies observers when a property changes.

Performance Considerations

While proxies are incredibly powerful, they can come with a performance cost. Proxies can introduce additional overhead due to the indirection introduced by the proxy. However, this overhead is typically negligible unless you're working with very large datasets or performance-critical code.

Key Takeaways

• Use the JavaScript Proxy API to intercept and manipulate property access on objects.
• Create a validation proxy to check the type of properties before allowing them to be set.
• Use a logging proxy to log every property access.
• Build observable objects with proxies to notify observers when properties change.
• Be aware of the potential performance cost of using proxies.

FAQ

Q: What is the difference between a proxy and a normal object?

A: A proxy is an object that sits between an object and the outside world, intercepting and modifying property access. A normal object does not have this capability.

Q: Can I use proxies with Vue 3 reactivity?

A: Yes, Vue 3 uses proxies under the hood to implement its reactivity system. You can use the same techniques described in this article to create custom reactive objects.

Q: How do I choose which traps to implement in my proxy handler?

A: The choice of traps depends on the specific use case. For example, if you're building a validation proxy, you'll likely want to implement the set trap. If you're building a logging proxy, you'll likely want to implement the get and set traps.