Proxy vs. Reflect in JavaScript
Proxy rarely shows up in day-to-day frontend code, but that doesn’t mean it lacks value. We just don’t reach for it often. Here’s a refresher to keep it in mind.
Metaprogramming
MDN groups Proxy and Reflect under the metaprogramming umbrella. What does that mean?
Metaprogramming is the practice of writing programs that treat other programs (or themselves) as data—modifying them or performing compile-time work at runtime. Compared with hand-writing every behavior, metaprogramming can boost productivity or provide more flexibility without recompilation.
(Source: Wikipedia.) In other words, metaprogramming is a language-agnostic concept—not unique to JavaScript.
(Graphic from https://draveness.me/metaprogramming/)
Proxy and Reflect
As the name suggests, Proxy lets us intercept operations such as get, set, or construct on a target object. Why is that useful? We can transform values, guard access, or observe behavior without touching the original object.
Example:
const user = { firstname: 'alan' };
const userProxy = new Proxy(user, {
get(target, prop) {
return target[prop] ? target[prop] : `get prop ${prop} missing`;
},
set(target, prop, value) {
console.log(`set prop ${prop} as ${value}`);
target[prop] = value;
}
});
console.log(userProxy.lastname); // get prop lastname missing
Accessing a missing property returns a custom message; setting a value logs a message before delegating to the original object. You get a clean interception layer without polluting user itself.
Another use case: two-way data binding in form UIs. A proxy can sit between the UI and the underlying state, syncing updates in both directions.
