What are Proxy and Reflect used for?

Question

Accepted Answer

A **Proxy** wraps an object and lets you **intercept** fundamental operations on it (get, set, has, delete, etc.) via handler functions called **traps**. **Reflect** provides the default versions of those operations as functions, so traps can forward to the normal behavior cleanly.

```js
const user = { name: "Ann" };

proxied.name;     // logs "read name" → "Ann"
proxied.age = -5; // throws — intercepted by the set trap
```

## Real use cases

- **Reactivity**: Vue 3's reactivity system wraps state in a Proxy so it knows exactly when you read or write a property, and re-renders accordingly.
- **Validation / access control**: enforce rules on property writes.
- **Logging / instrumentation**: trace access for debugging.
- **Default values / virtual properties**: return computed values for missing keys.
- **Negative array indices**, immutable wrappers, API clients that generate methods dynamically.

## Why Reflect exists

Inside a trap you need to perform the *default* operation. Using `Reflect.get/set` (instead of `target[key]`) correctly handles edge cases like the right `receiver` for inherited getters/setters.

## Why it matters

Proxies enable powerful meta-programming that frameworks rely on.

The trade-off is **overhead** — every operation goes through your trap — so use them where the interception is genuinely worth it, not for everyday objects.