Proxy and Reflect

Syntax

new Proxy(target, handler)
Reflect.get(target, key)

Examples

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

const loggedUser = new Proxy(user, {
  get(target, prop) {
    console.log(`Reading property: ${prop}`);
    return Reflect.get(target, prop); // forwards to the default behavior
  }
});

console.log(loggedUser.name);
// "Reading property: name"
// "Alice"

const validatedUser = new Proxy({}, {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("age must be a number");
    }
    return Reflect.set(target, prop, value);
  }
});

validatedUser.age = 30; // works fine
// validatedUser.age = "old"; // throws TypeError

function withDefault(obj, defaultValue) {
  return new Proxy(obj, {
    get(target, prop) {
      return prop in target ? target[prop] : defaultValue;
    }
  });
}

const settings = withDefault({ theme: "dark" }, "not set");
console.log(settings.theme);    // "dark"
console.log(settings.fontSize); // "not set" - property does not exist, but no error

Best practices

• Use Reflect methods inside Proxy traps to forward default behavior, rather than manually reimplementing property access logic
• Reach for Proxy for cross-cutting concerns like validation, logging, or reactivity systems - not as a general-purpose object wrapper for everyday code
• Be aware that Proxy adds a small performance overhead on every intercepted operation - avoid it in performance-critical hot paths
• Document any Proxy-based behavior clearly, since intercepted objects can behave in ways that are surprising to someone reading the code without that context

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation