JavaScript Proxy

Written by Swapnil RajaPublished 24 Aug 2026

A Proxy wraps an object and lets you intercept what happens when it is used.

Reading a property, writing one, even checking if it exists - all of it can be intercepted.

This is how libraries build reactive objects that notice when you change them.

Example

javascript

const target = { name: "Ada" };

const handler = {
  get(obj, key) {
    return obj[key];
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name);

PreviousJavaScript Performance Measurement NextJavaScript Reflect

Example

javascript

const target = { name: "Ada", age: 36 };
const reads = [];

const proxy = new Proxy(target, {
  get(obj, key) {
    reads.push(key);
    return obj[key];
  }
});

proxy.name;
proxy.age;

console.log(reads.join(","));

Example

javascript

const target = { age: 0 };

const proxy = new Proxy(target, {
  set(obj, key, value) {
    if (key === "age" && value < 0) {
      return false;
    }
    obj[key] = value;
    return true;
  }
});

proxy.age = -5;
console.log(proxy.age);

proxy.age = 30;
console.log(proxy.age);

Example

javascript

const target = { theme: "dark" };

const proxy = new Proxy(target, {
  get(obj, key) {
    return key in obj ? obj[key] : "not set";
  }
});

console.log(proxy.theme);
console.log(proxy.missing);

Example

javascript

const target = { name: "Ada" };
let reads = 0;

const proxy = new Proxy(target, {
  get(obj, key) {
    reads++;
    return obj[key];
  }
});

target.name;
proxy.name;

console.log(reads);

Example

javascript

const target = { name: "Ada" };

const proxy = new Proxy(target, {
  has(obj, key) {
    return key === "name" ? true : key in obj;
  }
});

console.log("name" in proxy);
console.log("age" in proxy);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Proxy</title>
</head>
<body>

  <h1>Proxy</h1>

  <p id="out"></p>

  <script>
    const user = { name: "Ada", age: 36 };

    const validated = new Proxy(user, {
      set(obj, key, value) {
        if (key === "age" && (typeof value !== "number" || value < 0)) {
          return false;
        }
        obj[key] = value;
        return true;
      }
    });

    validated.age = -10;
    const rejected = validated.age;

    validated.age = 40;
    const accepted = validated.age;

    document.getElementById("out").textContent =
      "After rejecting -10: " + rejected + ", after 40: " + accepted;
  </script>

</body>
</html>

JavaScript Proxy

Example

Target, Handler and Traps

Syntax

Logging Every Read

Example

Validating on Write

Example

Default Values for Missing Properties

Example

The Original Object Is Unaffected

Example

The has Trap

Example

Complete Example

Try It Yourself

Important Points

Conclusion