Suggest an edit

Improve this article

Refine the answer for “What does Proxy do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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 };

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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts857 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.