What does Proxy do?

JavaScriptMiddle~2 min read

What Proxy is

Proxy is a wrapper around an object that lets you intercept operations on it.

In simpler terms:

Proxy lets you "stand between" your code and an object, to control what happens when properties are accessed, changed, or other actions occur.

Syntax

javascript

const proxy = new Proxy(target, handler);

Parameter	Description
`target`	the original object the proxy is built over
`handler`	an object with "traps" that intercept operations

Example 1 - basic get/set interception

javascript

const user = { name: "Tim", age: 25 };

const proxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Reading property "${prop}"`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting "${prop}" to "${value}"`);
    target[prop] = value;
    return true; // must return true, or an error will be thrown
  }
});

console.log(proxy.name); // Reading property "name" -> "Tim"
proxy.age = 26;          // Setting "age" to "26"

Example 2 - validation

javascript

const user = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    target[prop] = value;
    return true;
  }
});

user.age = 30; // fine
user.age = "thirty"; // TypeError

Example 3 - "default" values

javascript

const config = new Proxy({}, {
  get(target, prop) {
    return prop in target ? target[prop] : '- not set -';
  }
});

console.log(config.host); // - not set -
config.host = 'localhost';
console.log(config.host); // localhost

Example 4 - protection against deletion

javascript

const secure = new Proxy({ id: 1, name: 'Admin' }, {
  deleteProperty(target, prop) {
    if (prop === 'id') {
      console.log('Deletion is not allowed!');
      return false;
    }
    delete target[prop];
    return true;
  }
});

delete secure.name; // gets deleted
delete secure.id;   // Deletion is not allowed!

Example 5 - logging access

javascript

function createLoggedObject(obj) {
  return new Proxy(obj, {
    get(target, prop, receiver) {
      console.log(`Accessing property "${prop}"`);
      return Reflect.get(target, prop, receiver);
    }
  });
}

const user = createLoggedObject({ name: "Tim" });
console.log(user.name);
// Accessing property "name"

Here Reflect is used - a standard object for safely performing basic operations on objects (an analog of the "original behavior", see below).

What Reflect is (and why it's needed with Proxy)

Reflect is a set of methods that correspond to all of Proxy's "traps". It lets you call the default behavior when needed.

For example:

javascript

const proxy = new Proxy(user, {
  get(target, prop, receiver) {
    console.log(`-> Reading ${prop}`);
    return Reflect.get(target, prop, receiver); // default behavior
  }
});

If you didn't use Reflect, you'd have to manually write target[prop], which can break inheritance behavior and this.

Available traps

Trap	What it intercepts	Reflect equivalent
`get`	Reading a property	`Reflect.get()`
`set`	Writing a property	`Reflect.set()`
`has`	Checking `prop in obj`	`Reflect.has()`
`deleteProperty`	Deleting via `delete obj[prop]`	`Reflect.deleteProperty()`
`ownKeys`	Getting all keys (`Object.keys`, `for...in`)	`Reflect.ownKeys()`
`getOwnPropertyDescriptor`	A property's descriptor	`Reflect.getOwnPropertyDescriptor()`
`defineProperty`	Creating/changing a property	`Reflect.defineProperty()`
`preventExtensions`	Blocking new properties from being added	`Reflect.preventExtensions()`
`isExtensible`	Checking whether extension is possible	`Reflect.isExtensible()`
`getPrototypeOf`	Getting the prototype	`Reflect.getPrototypeOf()`
`setPrototypeOf`	Changing the prototype	`Reflect.setPrototypeOf()`
`apply`	Calling a function	`Reflect.apply()`
`construct`	Calling via `new`	`Reflect.construct()`

Example 6 - intercepting a function call

javascript

function sum(a, b) {
  return a + b;
}

const proxySum = new Proxy(sum, {
  apply(target, thisArg, args) {
    console.log(`Calling the function with arguments: ${args}`);
    return Reflect.apply(target, thisArg, args);
  }
});

console.log(proxySum(2, 3)); // Calling the function with arguments: 2,3 -> 5

Example 7 - a dynamic structure (for example, i18n)

javascript

const dictionary = {
  hello: "Bonjour",
  world: "monde"
};

const i18n = new Proxy(dictionary, {
  get(target, key) {
    if (key in target) return target[key];
    return `[${key}]`; // fall back to the "key" instead of a translation
  }
});

console.log(i18n.hello); // Bonjour
console.log(i18n.missingKey); // [missingKey]

Where Proxy is genuinely useful

Scenario	Usage example
Data validation	Checking types on write
Debugging and logging	Intercepting `get`/`set` for analysis
Reactivity (Vue 3)	Tracking property changes
Protection and restrictions	Blocking deletion or modification of properties
Localization / key-based access	i18n, fallback data
API wrappers	"smart" dynamic objects (for example, a REST API on the fly)

Brief summary

Term	Description
`Proxy`	An object that intercepts operations on another object
`target`	The original object (the target)
`handler`	An object with traps (intercepting methods)
`trap`	A method that intercepts a specific operation (`get`, `set`, and so on)
`Reflect`	Lets you call the standard "default" behavior

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.