🕵️

How to Use Proxy in JavaScript

JavaScriptAdvanced

Intercept and customize object operations.

Code Example

JavaScript
// Basic Proxy
const target = { name: "Alice", age: 30 };

const handler = {
  get(obj, prop) {
    console.log(`Getting ${prop}`);
    return obj[prop];
  },
  set(obj, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    obj[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name); // Logs "Getting name", returns "Alice"
proxy.age = 31; // Logs "Setting age to 31"

// Validation with Proxy
function createValidatedUser(data) {
  return new Proxy(data, {
    set(obj, prop, value) {
      if (prop === "age" && (value < 0 || value > 150)) {
        throw new Error("Invalid age");
      }
      if (prop === "name" && typeof value !== "string") {
        throw new Error("Name must be string");
      }
      obj[prop] = value;
      return true;
    }
  });
}

const user = createValidatedUser({ name: "Bob", age: 25 });
user.age = 30; // OK
// user.age = -5; // Error!

// Default values
const defaults = { theme: "light", lang: "en" };
const withDefaults = new Proxy({}, {
  get(obj, prop) {
    return prop in obj ? obj[prop] : defaults[prop];
  }
});

withDefaults.theme = "dark";
console.log(withDefaults.theme); // "dark"
console.log(withDefaults.lang); // "en"

// Logging operations
function createLogger(obj) {
  return new Proxy(obj, {
    get(obj, prop) {
      console.log(`Access: ${prop}`);
      return obj[prop];
    },
    set(obj, prop, value) {
      console.log(`Change: ${prop} = ${value}`);
      obj[prop] = value;
      return true;
    }
  });
}

const logged = createLogger({ count: 0 });
logged.count++; // Logs "Access: count", "Change: count = 1"

// Private properties
function createPrivate(obj, privateProps) {
  return new Proxy(obj, {
    get(obj, prop) {
      if (privateProps.includes(prop)) {
        throw new Error("Private property");
      }
      return obj[prop];
    }
  });
}

const data = createPrivate(
  { public: "visible", private: "hidden" },
  ["private"]
);
console.log(data.public); // "visible"
// console.log(data.private); // Error!

Explanation

Proxy intercepts object operations. Handler defines traps: get, set, has, deleteProperty, etc. Use for validation, logging, defaults, private properties.

Related Tutorials