What Are Proxy and Reflect in JavaScript?
Learn how JavaScript Proxy traps and Reflect work together for interception, validation, and reactive systems, with code.
Expected Interview Answer
Proxy lets you wrap an object with a handler of “traps” that intercept fundamental operations like get, set, and delete, while Reflect provides the corresponding built-in default implementations of those same operations, so a Proxy trap can call Reflect to forward the operation unchanged when it does not need to customize it.
A Proxy is created with `new Proxy(target, handler)`, and the handler object defines trap functions such as `get(target, prop)`, `set(target, prop, value)`, `has`, `deleteProperty`, and `apply` for functions. Whenever code interacts with the proxy — reading a property, assigning one, checking `in` — the corresponding trap fires instead of the default engine behavior, letting you implement validation, logging, computed properties, or access control transparently. Reflect exists as a companion namespace of static methods that mirror those same internal operations (`Reflect.get`, `Reflect.set`, and so on), giving traps a reliable, correctly-`this`-bound way to perform the default action rather than manually reimplementing engine semantics, which is easy to get subtly wrong. Together they enable powerful metaprogramming patterns — reactive frameworks like Vue 3 use a Proxy to intercept property reads and writes to build dependency tracking, calling `Reflect.get`/`Reflect.set` internally to preserve normal object behavior for anything the trap does not specifically care about.
- Enables transparent interception of property access, assignment, and other operations
- Reflect gives traps a correct, consistent way to invoke default behavior
- Powers reactive state systems (e.g., Vue 3) without modifying original objects
- Supports validation, logging, and virtualized properties without changing the underlying API
AI Mentor Explanation
A Proxy is like a team manager standing between the public and the actual players, intercepting every request — an autograph, a stat lookup — before it reaches the real player. The manager can add rules, like logging every autograph request, but for anything not specifically handled, forwards the request straight through to the real player unchanged. Reflect is the manager's own official forwarding procedure — the correct, standard way to just pass a request along without breaking anything about how the player would normally respond. Using Reflect inside the trap keeps default behavior intact while still allowing custom interception for the cases that matter.
Step-by-Step Explanation
Step 1
Define a target and handler
The target is the real object; the handler defines trap functions for operations you want to intercept.
Step 2
Create the Proxy
`const p = new Proxy(target, handler)` — all interactions with `p` now route through the handler traps.
Step 3
Trap fires on operation
E.g. `p.name = "x"` triggers the `set` trap with `(target, "name", "x", receiver)`.
Step 4
Forward with Reflect when unhandled
Inside the trap, call `Reflect.set(target, prop, value, receiver)` to apply default behavior correctly for cases you are not customizing.
What Interviewer Expects
- Clear explanation of what a trap is and when it fires
- Understanding that Reflect mirrors the same internal operations as Proxy traps
- Awareness that Reflect ensures correct `this`/receiver semantics vs manual reimplementation
- A real-world example, such as reactive frameworks using Proxy for dependency tracking
Common Mistakes
- Reimplementing default behavior manually inside a trap instead of using Reflect, causing subtle bugs
- Forgetting that some traps have invariants (e.g., cannot report a non-configurable property as deletable)
- Confusing Proxy (interception layer) with Object.defineProperty (per-property getters/setters)
- Assuming Proxy has no performance cost — traps add overhead on every intercepted operation
Best Answer (HR Friendly)
“A Proxy lets you wrap an object so you can intercept things like reading or changing its properties and add your own logic, such as validation or logging. Reflect is a companion tool that gives you the safe, correct way to just let the original action happen when you are not trying to change it, so the two are usually used together.”
Code Example
const target = { age: 30 }
const handler = {
set(obj, prop, value, receiver) {
if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
throw new TypeError('age must be a non-negative number')
}
console.log(`Setting ${String(prop)} = ${value}`)
return Reflect.set(obj, prop, value, receiver) // default behavior
},
get(obj, prop, receiver) {
console.log(`Reading ${String(prop)}`)
return Reflect.get(obj, prop, receiver)
},
}
const person = new Proxy(target, handler)
person.age = 31 // logs then sets
console.log(person.age) // logs then reads: 31
// person.age = -5 // throws TypeErrorFollow-up Questions
- How does Vue 3 use Proxy for reactivity instead of Object.defineProperty like Vue 2?
- What is the invariant restriction on the `has` trap for non-configurable properties?
- How would you implement a read-only object using a Proxy?
- What is the performance cost of using Proxy versus direct property access?
MCQ Practice
1. What does a Proxy `set` trap intercept?
The `set` trap fires whenever a property is assigned on the proxy, letting you customize or validate the write.
2. Why call Reflect.set inside a Proxy set trap instead of `target[prop] = value`?
Reflect methods mirror the exact internal default operation, preserving correct receiver binding.
3. Which modern framework uses Proxy for its reactivity system?
Vue 3 replaced Vue 2's Object.defineProperty-based reactivity with Proxy-based reactivity.
Flash Cards
What is a Proxy trap? — A handler function that intercepts a fundamental operation like get, set, or has.
What is Reflect for? — A namespace of methods mirroring default operations, used to forward behavior correctly from traps.
Why use Reflect instead of manual reimplementation? — It preserves correct receiver and default semantics that manual code can get subtly wrong.
Real-world use of Proxy? — Vue 3's reactivity system uses Proxy to track property reads/writes for dependency tracking.