How to use Proxy and Reflect in JavaScript

A Proxy wraps a target object and intercepts operations performed on it. Instead of the operation reaching the target directly, it first goes through a set of trap functions you define. This lets you customize what happens when code reads a property, sets a property, calls a function, checks for property existence, or performs any other fundamental object operation on your proxy.

Call new Proxy with two arguments. The first is the target object being wrapped. The second is the handler object containing the trap functions. If the handler is empty with no traps defined, all operations pass through to the target unchanged. The proxy is a separate object from the target but operations performed on the proxy affect the target through the traps.

The get trap intercepts property access on the proxy. It receives the target object, the property name as a string or Symbol, and the proxy itself as the receiver. Return the value you want the property access to produce. You can return the actual target property, a modified value, a default value for missing properties, or throw an error. This is useful for validation, logging, and providing computed properties.

The set trap intercepts property assignment on the proxy. It receives the target, the property name, the new value being assigned, and the receiver. Inside the trap, perform any validation or side effects, then set the property on the target if the assignment should proceed. Return true to indicate the assignment succeeded. Return false or throw a TypeError to reject the assignment. This enables input validation, change tracking, and reactive data systems.

The has trap intercepts the in operator. When you write 'property' in proxy, JavaScript calls the has trap with the target and the property name. Return true if the property should be considered present and false otherwise. This lets you hide certain properties from the in operator or implement virtual properties that appear to exist even when they are not on the target object.

When the target is a function, the apply trap intercepts calls to that function. It receives the target function, the this value of the call, and the arguments as an array. You can modify arguments before passing them to the target, log every invocation for debugging, measure execution time, implement memoization, or block calls entirely. This is useful for building function decorators without modifying the original function.

Reflect is a built-in object that provides methods corresponding to every Proxy trap. Reflect.get, Reflect.set, Reflect.has, and others all mirror the Proxy traps. Inside a trap, after performing your custom logic, call the corresponding Reflect method to perform the default behavior on the target. Using Reflect inside traps ensures correct behavior with inheritance, getters and setters, and the receiver argument, which manual target manipulation can get wrong.

Proxy enables powerful patterns that are difficult or impossible without it. Validation proxies enforce schema rules on object assignments automatically. Logging proxies record every property access and mutation for debugging. Reactive systems like Vue 3 use Proxies to detect data changes and trigger UI updates. Default value proxies return sensible defaults for missing properties. Access control proxies restrict which properties can be read or written based on user permissions.