#1 Data Analytics Program in India
₹2,499₹1,499Enroll Now
5 min read
Question 31 of 50hard

What are Proxy and Reflect in JavaScript?

Understanding metaprogramming with Proxy and Reflect.

What You'll Learn

  • Creating proxies
  • Handler traps
  • Using Reflect API

Proxy

Wraps an object to intercept and customize operations.

code.jsJavaScript
const target = { name: 'John', age: 30 };

const handler = {
  get(obj, prop) {
    console.log(`Getting ${prop}`);
    return prop in obj ? obj[prop] : 'Property not found';
  },
  set(obj, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    obj[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);
proxy.name;        // Logs: 'Getting name', Returns: 'John'
proxy.unknown;     // Logs: 'Getting unknown', Returns: 'Property not found'
proxy.city = 'NYC'; // Logs: 'Setting city to NYC'

Common Traps

code.jsJavaScript
const handler = {
  get(target, prop, receiver) { },
  set(target, prop, value, receiver) { },
  has(target, prop) { },           // 'prop' in proxy
  deleteProperty(target, prop) { }, // delete proxy.prop
  apply(target, thisArg, args) { }, // proxy()
  construct(target, args) { }       // new proxy()
};

Validation Example

code.jsJavaScript
const validator = {
  set(obj, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number') {
        throw new TypeError('Age must be a number');
      }
      if (value < 0 || value > 150) {
        throw new RangeError('Age must be 0-150');
      }
    }
    obj[prop] = value;
    return true;
  }
};

const person = new Proxy({}, validator);
person.age = 30;  // OK
person.age = -1;  // RangeError

Reflect API

code.jsJavaScript
// Use Reflect in handlers for default behavior
const handler = {
  get(target, prop, receiver) {
    console.log('Intercepted');
    return Reflect.get(target, prop, receiver);
  }
};