JavaScript Proxy and Reflect API

Proxy intercepts object operations. Reflect provides methods for those operations. Here's how to use them.

Basic Proxy#

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

const handler = {
  get(target, property, receiver) {
    console.log(`Getting ${property}`);
    return target[property];
  },
  set(target, property, value, receiver) {
    console.log(`Setting ${property} to ${value}`);
    target[property] = value;
    return true;
  },
};

const proxy = new Proxy(target, handler);

proxy.name;          // Logs: Getting name, Returns: 'John'
proxy.age = 31;      // Logs: Setting age to 31

Validation#

const validator = {
  set(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number') {
        throw new TypeError('Age must be a number');
      }
      if (value < 0 || value > 150) {
        throw new RangeError('Age must be between 0 and 150');
      }
    }

    if (property === 'email') {
      if (!value.includes('@')) {
        throw new Error('Invalid email address');
      }
    }

    target[property] = value;
    return true;
  },
};

const user = new Proxy({}, validator);

user.age = 25;        // OK
// user.age = 'old';  // TypeError: Age must be a number
// user.age = 200;    // RangeError: Age must be between 0 and 150

user.email = 'john@example.com'; // OK
// user.email = 'invalid';       // Error: Invalid email address

Property Access Control#

// Hide private properties
const privateHandler = {
  get(target, property) {
    if (property.startsWith('_')) {
      throw new Error(`Cannot access private property: ${property}`);
    }
    return target[property];
  },
  set(target, property, value) {
    if (property.startsWith('_')) {
      throw new Error(`Cannot set private property: ${property}`);
    }
    target[property] = value;
    return true;
  },
  has(target, property) {
    if (property.startsWith('_')) {
      return false;
    }
    return property in target;
  },
  ownKeys(target) {
    return Object.keys(target).filter(key => !key.startsWith('_'));
  },
};

const obj = new Proxy(
  { name: 'John', _secret: 'hidden' },
  privateHandler
);

console.log(obj.name);     // 'John'
// console.log(obj._secret); // Error
console.log('_secret' in obj); // false
console.log(Object.keys(obj)); // ['name']

Default Values#

const withDefaults = (target, defaults) => {
  return new Proxy(target, {
    get(target, property) {
      if (property in target) {
        return target[property];
      }
      return defaults[property];
    },
  });
};

const config = withDefaults(
  { port: 3000 },
  { host: 'localhost', port: 8080, debug: false }
);

console.log(config.port);  // 3000 (from target)
console.log(config.host);  // 'localhost' (from defaults)
console.log(config.debug); // false (from defaults)

Reactive System#

// Simple reactivity like Vue
function reactive(target) {
  const subscribers = new Map();

  return new Proxy(target, {
    get(target, property) {
      // Track dependency
      track(target, property);
      return target[property];
    },
    set(target, property, value) {
      const oldValue = target[property];
      target[property] = value;

      // Trigger updates
      if (oldValue !== value) {
        trigger(target, property);
      }
      return true;
    },
  });
}

let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

const targetMap = new WeakMap();

function track(target, property) {
  if (!activeEffect) return;

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }

  let deps = depsMap.get(property);
  if (!deps) {
    depsMap.set(property, (deps = new Set()));
  }

  deps.add(activeEffect);
}

function trigger(target, property) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const deps = depsMap.get(property);
  if (deps) {
    deps.forEach(effect => effect());
  }
}

// Usage
const state = reactive({ count: 0 });

effect(() => {
  console.log('Count:', state.count);
});

state.count++; // Logs: Count: 1
state.count++; // Logs: Count: 2

Logging and Debugging#

function createLoggingProxy(target, name = 'Object') {
  return new Proxy(target, {
    get(target, property, receiver) {
      console.log(`[GET] ${name}.${String(property)}`);
      const value = Reflect.get(target, property, receiver);
      return typeof value === 'object' && value !== null
        ? createLoggingProxy(value, `${name}.${String(property)}`)
        : value;
    },
    set(target, property, value, receiver) {
      console.log(`[SET] ${name}.${String(property)} =`, value);
      return Reflect.set(target, property, value, receiver);
    },
    deleteProperty(target, property) {
      console.log(`[DELETE] ${name}.${String(property)}`);
      return Reflect.deleteProperty(target, property);
    },
    apply(target, thisArg, args) {
      console.log(`[CALL] ${name}(`, args, ')');
      return Reflect.apply(target, thisArg, args);
    },
  });
}

const user = createLoggingProxy({
  name: 'John',
  address: { city: 'NYC' },
});

user.name;              // [GET] Object.name
user.address.city;      // [GET] Object.address, [GET] Object.address.city
user.age = 30;          // [SET] Object.age = 30

Function Proxy#

// Memoization
function memoize(fn) {
  const cache = new Map();

  return new Proxy(fn, {
    apply(target, thisArg, args) {
      const key = JSON.stringify(args);

      if (cache.has(key)) {
        console.log('Cache hit');
        return cache.get(key);
      }

      const result = Reflect.apply(target, thisArg, args);
      cache.set(key, result);
      return result;
    },
  });
}

const expensiveFn = memoize((n) => {
  console.log('Computing...');
  return n * 2;
});

expensiveFn(5); // Computing... 10
expensiveFn(5); // Cache hit 10

// Rate limiting
function rateLimit(fn, limit, interval) {
  let calls = 0;
  let resetTime = Date.now() + interval;

  return new Proxy(fn, {
    apply(target, thisArg, args) {
      const now = Date.now();

      if (now > resetTime) {
        calls = 0;
        resetTime = now + interval;
      }

      if (calls >= limit) {
        throw new Error('Rate limit exceeded');
      }

      calls++;
      return Reflect.apply(target, thisArg, args);
    },
  });
}

const limitedFn = rateLimit(console.log, 3, 1000);

Reflect API#

// Reflect methods mirror Proxy traps
const obj = { a: 1, b: 2 };

// Get
Reflect.get(obj, 'a'); // 1

// Set
Reflect.set(obj, 'c', 3); // true

// Has
Reflect.has(obj, 'a'); // true

// Delete
Reflect.deleteProperty(obj, 'a'); // true

// Keys
Reflect.ownKeys(obj); // ['b', 'c']

// Define property
Reflect.defineProperty(obj, 'd', { value: 4 });

// Get prototype
Reflect.getPrototypeOf(obj); // Object.prototype

// Set prototype
Reflect.setPrototypeOf(obj, null);

// Is extensible
Reflect.isExtensible(obj); // true

// Prevent extensions
Reflect.preventExtensions(obj);

// Apply function
function greet(greeting) {
  return `${greeting}, ${this.name}`;
}
Reflect.apply(greet, { name: 'John' }, ['Hello']); // 'Hello, John'

// Construct
class User {
  constructor(name) {
    this.name = name;
  }
}
Reflect.construct(User, ['John']); // User { name: 'John' }

Revocable Proxy#

// Create proxy that can be disabled
const { proxy, revoke } = Proxy.revocable(
  { secret: 'data' },
  {
    get(target, property) {
      return target[property];
    },
  }
);

console.log(proxy.secret); // 'data'

revoke();

// console.log(proxy.secret); // TypeError: Cannot perform 'get' on a proxy that has been revoked

// Useful for access control
function grantAccess(data, expiryMs) {
  const { proxy, revoke } = Proxy.revocable(data, {});

  setTimeout(revoke, expiryMs);

  return proxy;
}

const tempAccess = grantAccess({ sensitive: 'info' }, 5000);

Array Proxy#

// Observable array
function observableArray(array, callback) {
  return new Proxy(array, {
    set(target, property, value) {
      const result = Reflect.set(target, property, value);

      if (property !== 'length') {
        callback('set', { property, value });
      }

      return result;
    },
    deleteProperty(target, property) {
      const result = Reflect.deleteProperty(target, property);
      callback('delete', { property });
      return result;
    },
  });
}

const arr = observableArray([], (action, data) => {
  console.log(`Array ${action}:`, data);
});

arr.push(1);    // Array set: { property: '0', value: 1 }
arr.push(2);    // Array set: { property: '1', value: 2 }
arr[0] = 10;    // Array set: { property: '0', value: 10 }

Type Coercion#

// Auto-convert types
const typedHandler = {
  set(target, property, value) {
    const schema = target._schema?.[property];

    if (schema) {
      switch (schema) {
        case 'number':
          value = Number(value);
          break;
        case 'string':
          value = String(value);
          break;
        case 'boolean':
          value = Boolean(value);
          break;
        case 'date':
          value = new Date(value);
          break;
      }
    }

    target[property] = value;
    return true;
  },
};

const record = new Proxy(
  { _schema: { age: 'number', active: 'boolean', joined: 'date' } },
  typedHandler
);

record.age = '25';        // Stored as 25 (number)
record.active = 1;        // Stored as true (boolean)
record.joined = '2024-01-15'; // Stored as Date object

Best Practices#

Usage:
✓ Use Reflect with Proxy handlers
✓ Return true from set traps
✓ Handle all necessary traps
✓ Consider revocable for access control

Performance:
✓ Avoid proxying hot paths
✓ Cache proxy instances
✓ Use direct access when possible
✓ Profile proxy overhead

Patterns:
✓ Validation and sanitization
✓ Change detection
✓ Access logging
✓ Default values

Proxy and Reflect enable powerful metaprogramming in JavaScript. Use Proxy for validation, reactivity, logging, and access control. Always use Reflect methods in handlers for correct behavior with inheritance and receivers.