Intermediate LevelJavaScript & TypeScript
How do JavaScript Proxy and Reflect API enable meta-programming and object interception?
❓ Interview Prompt: Explain Proxy traps (get, set, deleteProperty), target objects, and Reflect API delegation.
The `Proxy` object wraps another object (target) and intercepts low-level operations (property access, assignment, function invocation).
Key Components:
•
Target: The underlying object being proxied.
•
Handler: An object containing "traps" (methods like
get, set, has, deleteProperty).•
`Reflect`: Built-in object providing default internal methods to forward operations cleanly to the target.
Applications:
Vue 3 reactivity engine, data validation, logging, negative array indexing, defaulting missing keys.
Code Implementation Example
javascript
const user = { name: 'Alice', age: 28 };
// Proxy for validation and logging
const userProxy = new Proxy(user, {
get(target, prop, receiver) {
console.log(`Reading property: ${String(prop)}`);
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
if (prop === 'age' && typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
return Reflect.set(target, prop, value, receiver);
}
});
userProxy.age = 29; // Logs read, updates age to 29
// userProxy.age = "twenty"; // Throws TypeError!💡Creating a property validator and accessor logger using Proxy and Reflect.
🎯 Interview Key Takeaway
Proxy intercepts and modifies low-level object operations. Reflect forwards default operations safely.
#Proxy#Reflect#Reactivity#Intermediate
Back to all JavaScript & TypeScript Questions→