Suggest an edit

Improve this article

Refine the answer for “Proxy and the get and set traps”. 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)

**`Proxy` is a wrapper around an object (or a function) that intercepts operations on it: reading, writing, calling and so on.** The proxy sits between the object and the code that uses it, and decides by itself how to react to each operation.

## Theory

### TL;DR
- Syntax: `new Proxy(target, handler)`.
- `target` is the original object we want to work with.
- `handler` is an object of traps, special interceptor methods that describe how to react to different operations.
- `get` intercepts reading a property, `set` intercepts writing one.
- Proxies let you log access, validate data, build reactive objects and hide private fields.
- The `set` trap must return `true`, otherwise strict mode throws a `TypeError`.

### Quick example

```javascript
const proxy = new Proxy(target, handler);
```

- `target` is the original object (the one we want to work with);
- `handler` is an object of traps, special interceptor methods that describe how to react to different operations.

### What proxies are for

Proxies let you step into the basic behaviour of objects, for example:

- log access to properties;
- validate data on write;
- create reactive objects (this is exactly how it works in Vue);
- load values lazily;
- protect private data.

An example, logging every access to an object:

```javascript
const user = { name: 'Tim', age: 25 };

const proxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Reading property "${prop}"`);
    return target[prop];
  }
});

console.log(proxy.name); // log: Reading property "name"
```

### What the `get` trap does

`get(target, prop, receiver)` fires when a property of the object is accessed:

```javascript
proxy.name;
proxy['age'];
```

It lets you:

- control what is returned on read;
- substitute default values;
- build computed properties;
- hide particular fields.

Example:

```javascript
const user = { name: 'Tim' };

const proxy = new Proxy(user, {
  get(target, prop) {
    if (prop === 'greet') {
      return `Hello, ${target.name}!`;
    }
    return target[prop] ?? 'No such property';
  }
});

console.log(proxy.name);  // 'Tim'
console.log(proxy.greet); // 'Hello, Tim!'
console.log(proxy.age);   // 'No such property'
```

### What the `set` trap does

`set(target, prop, value, receiver)` fires when we assign a value:

```javascript
proxy.age = 30;
```

It lets you:

- validate the new data;
- forbid a write;
- change values automatically;
- trigger side effects (reactivity, logging and so on).

Example:

```javascript
const user = {};

proxy.age = 25; // log: Property "age" is set to 25
proxy.name = 'Tim';
proxy.age = 'a lot'; // TypeError
```

### Summary

| Component | Purpose |
| --- | --- |
| `Proxy(target, handler)` | Creates a wrapper around an object |
| `target` | The original object |
| `handler` | The object of traps (interceptor methods) |
| `get` | Intercepts reading a property |
| `set` | Intercepts writing a property |

### Common mistakes

- **Forgetting `return true` in the `set` trap.** In strict mode, and therefore in modules, a failed assignment throws a `TypeError`.
- **Thinking the proxy changes the original object.** Only operations that go through the proxy are intercepted; direct access to `target` bypasses the traps entirely.
- **Forgetting that `prop` can be a symbol.** A `prop === 'age'` comparison will never match a `Symbol` key, so check the key type when it matters.
- **Writing `target[prop]` instead of `Reflect.get(target, prop, receiver)`.** Direct access breaks getters and inheritance, because `this` inside them ends up wrong.
- **Expecting the `get` trap to behave with `JSON.stringify` the way a plain object does.** Serialization also goes through the traps, so computed fields can unexpectedly leak into the output.
- **Reaching for a proxy where a plain getter and setter would do.** A proxy is more expensive per operation and makes debugging noticeably harder.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.