JavaScript Proxy & Reflect: Guard Pattern

How does a modern framework just know when your state changed? You write state.count++ — no setter call, no event — and the UI updates. The answer, in Vue 3, MobX, and SolidJS alike, is Proxy: a JavaScript feature most of us use every day through libraries but have never written directly.

This article fixes that: what Proxy actually does, where it earns its keep in real applications, and why Reflect — the API everyone ignores — is the difference between a proxy that works and one that silently breaks.

What is a Proxy?

A Proxy wraps an object and intercepts operations on it — property reads, writes, deletions, even function calls. The interceptors are called traps.

const user = { name: "Sandeep" };
​
const proxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Reading ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting ${prop} = ${value}`);
    target[prop] = value;
    return true; // must return true on success
  }
});
​
proxy.name;     // logs "Reading name" → "Sandeep"
proxy.age = 30; // logs "Setting age = 30"

The caller doesn’t know a proxy exists. That’s the whole point: behavior happens automatically on access or change, without callers doing anything special.