Suggest an edit

Improve this article

Refine the answer for “What does the Proxy object 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)

`Proxy` is one of the most powerful and "magical" tools in JavaScript.
It lets you **intercept and redefine the behavior of objects** -
that is, stand "between" an object and its usage.

---

## What Proxy is:

`Proxy` is a **wrapper around an object**
that lets you **intercept operations on it**: reading, writing, deleting properties, calling functions, and so on.

You can "redefine" the behavior of an object - how it reacts to `obj.prop`, `obj[key]`, `delete obj.x`, `in obj` and much more.

---

## Syntax:

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

| Argument | Description |
|---|---|
| `target` | the original object being wrapped |
| `handler` | an object with "traps" (interceptor functions) |

---

## The simplest example:

```javascript
const user = { name: "Alice", age: 25 };

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

console.log(proxy.name); // Accessing property "name" -> Alice
```

Every time `proxy.name` happens,
the call goes through the **trap** `get()`,
not directly into the object.

---

## Main "traps":

| Trap | Intercepts | Example |
|---|---|---|
| `get(target, prop)` | reading a property | `proxy.x` |
| `set(target, prop, value)` | writing a property | `proxy.x = 10` |
| `has(target, prop)` | the `in` operator | `"x" in proxy` |
| `deleteProperty(target, prop)` | `delete proxy.x` |  |
| `ownKeys(target)` | `Object.keys(proxy)` |  |
| `apply(target, thisArg, args)` | calling a function | `proxy()` |
| `construct(target, args)` | calling via `new` | `new proxy()` |

---

## Example: logging changes

```javascript
const user = { name: "Alice" };

const proxy = new Proxy(user, {
  set(target, prop, value) {
    console.log(`Changed ${prop}: ${target[prop]} -> ${value}`);
    target[prop] = value;
    return true; // must return true
  }
});

proxy.name = "Bob"; // Changed name: Alice -> Bob
```

Now you can "catch" every change in the object.

---

## Example: protecting against property deletion

```javascript
const obj = { secret: 42 };

const proxy = new Proxy(obj, {
  deleteProperty(target, prop) {
    console.log(`Deletion forbidden: ${prop}`);
    return false;
  }
});

delete proxy.secret; // "Deletion forbidden: secret"
```

---

## Example: data validation

```javascript
const user = {};

proxy.age = 30;  // OK
proxy.age = "thirty"; // TypeError
```

You can attach "rules" to writing properties - a great technique for data validation.

---

## Example: default value

```javascript
const data = { a: 1 };

const proxy = new Proxy(data, {
  get(target, prop) {
    return prop in target ? target[prop] : "No data";
  }
});

console.log(proxy.a); // 1
console.log(proxy.b); // "No data"
```

Now accessing a nonexistent property does not return `undefined`,
but returns a nice default value instead.

---

## Example: observer (reactive data, like in Vue.js)

```javascript
function reactive(obj) {
  return new Proxy(obj, {
    set(target, prop, value) {
      console.log(`Updated ${prop}: ${value}`);
      target[prop] = value;
      return true;
    }
  });
}

const state = reactive({ count: 0 });
state.count++; // "Updated count: 1"
```

This is exactly how reactive data is implemented in frameworks (Vue, MobX, and others).

---

## Example: intercepting a function call

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

const proxy = new Proxy(sum, {
  apply(target, thisArg, args) {
    console.log(`Called with arguments: ${args}`);
    return target(...args) * 2; // changing the result!
  }
});

console.log(proxy(2, 3)); // Called with arguments: 2,3 -> 10
```

You can wrap even **functions**,
changing their behavior "on the fly".

---

## Why you need Proxy:

Logging and debugging
Data validation
Reactive objects (for example, Vue.js)
Lazy-loading
Safe "readonly" structures
Building APIs with "magic" properties

---

## In short:

| Property | Proxy |
|---|---|
| What it does | Intercepts operations on an object |
| Works with | Objects and functions |
| Used for | logging, validation, reactivity |
| Changes the original? | No, wraps it |
| Example traps | `get`, `set`, `apply`, `deleteProperty`, `construct` |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.