All topics
67 / 100
ES6+advanced

Proxy and Reflect

Meta-programming APIs that let you intercept and customize fundamental object operations like property access, assignment, and deletion.

A Proxy wraps an object and intercepts operations on it. Reflect provides the default behaviour for each of those operations.

A Proxy is like a building's front desk intercepting every visitor before they reach a tenant's office: the desk can log every visit, refuse certain packages, or wave the visitor straight through to the real office exactly as if the desk weren't there.

Key Concepts

1
    const target = { name: 'Asha' };
2
    const p = new Proxy(target, {
      get(obj, prop, receiver) {
        console.log('read', prop);
        return Reflect.get(obj, prop, receiver);
      },
      set(obj, prop, value, receiver) {
        if (prop === 'age' && value < 0) throw new RangeError();
        return Reflect.set(obj, prop, value, receiver);
      }
    });
3
The traps cover the fundamental operations: get, set, has, deleteProperty, ownKeys, apply, construct and others.
getsethasdeletePropertyownKeys
4
Reflect exists so a trap can do the normal thing. Writing obj[prop] = value inside a set trap ignores the receiver and breaks inheritance; Reflect.set(obj, prop, value, receiver) does not.
Reflectobj[prop] = valuesetReflect.set(obj, prop, value, receiver)
5
Reflect methods also return booleans rather than throwing, which makes a trap easier to write correctly.
Reflect
6
Where proxies are actually used.Reactivity. Vue 3's reactivity is a proxy — reading a property registers a dependency, writing one triggers an update. That is the whole mechanism, and it is why Vue 3 does not need Vue.set.
Vue.set
7
Validation.
8
    const validated = new Proxy(user, {
      set(o, k, v) {
        if (k === 'email' && !v.includes('@')) throw new TypeError();
        return Reflect.set(o, k, v);
      }
    });
9
Defaults for missing keys, negative array indices, API clients that build a URL from the property path.
10
Instrumentation — logging or counting access without touching the original code.
11
The costs, which decide whether to use one.Performance. Every operation goes through a function call. Engines optimise plain property access heavily and cannot optimise a proxy the same way. Hot paths notice.
12
Debuggability. The object in the debugger is not the object being used, and stack traces point into trap functions.
13
Invariants. Traps must not lie about non-configurable properties, or the engine throws.
14
And what cannot be proxied. Private class fields, and internal slots on built-ins — a proxy around a Map breaks unless the traps forward methods with the right this.
Mapthis
15
The judgement. Proxies are for building a library or a framework feature. In application code, a class with explicit methods says the same thing and is easier to follow.
16
What the interviewer is probing.1. "What can a Proxy intercept?" Probing: the traps. Stalls: "Property reads." Moves up: get, set, has, deleteProperty, ownKeys, apply and construct among others — nearly every fundamental operation.
17
2. "Why pair Proxy with Reflect?" Probing: the default behaviour. Stalls: "They are unrelated." Moves up: Reflect gives the default implementation of each trap with the right receiver, so a handler can add behaviour and still forward correctly.
18
3. "Where are proxies used in practice?" Probing: real examples. Stalls: "Nowhere." *Moves up:* Vue 3 reactivity, validation layers, negative array indices, and mocking — anywhere you need to observe access you do not control.
19
4. "What is the cost?" Probing: honesty. Stalls: "None." Moves up: every intercepted operation goes through a function call, so a proxied hot object is measurably slower.
Use cases:metaprogrammingadvancedes6