JavaScript Proxy Objects: Intercepting and Customizing Object Operations

What Is a Proxy? The Middleman Model 🤝

A Proxy sitsbetweenyour code and your object — every operation passes through it:

Your code → 🤝 PROXY(the handler) → 📦 TARGET(the real object) decides what happens stores the actual data

The Anatomy

const proxy = new Proxy(target, handler);

A trapis a method on the handler that intercepts one specific operation:gettraps reads,settraps writes,hastrapsinchecks,deletePropertytrapsdelete, and more.

🔑 The key mental model:code never touches the target directly anymore — it talks to the proxy, and the proxy's traps decide what really happens. It's middleware for objects.

The Two Essential Traps: get and set 🎣

The get Trap — Intercepting Reads 📖

const user = {
  name: "Priya", role: "admin"
};
const userProxy = new Proxy(user, {
  get(target, prop) {
    // target = the original object, prop = the property being read
    if (!(prop in target)) {
      return `⚠️ "${String(prop)}" doesn't exist!`;
      // custom missing-key behavior!
    } return target[prop];
  }
});
console.log(userProxy.name);
// "Priya" ✅
console.log(userProxy.role);
// "admin" ✅
console.log(userProxy.phone);
// "⚠️ "phone" doesn't exist!" — instead of undefined ✨

The trap signature:get(target, property)— return whatever the reader should receive.

The set Trap — Intercepting Writes ✏️

const product = {
  price: 499
};
const productProxy = new Proxy(product, {
  set(target, prop, value) {
    // target = object, prop = property name, value = incoming value
    if (prop === "price") {
      if (typeof value !== "number" || value < 0) {
        console.log("❌ Invalid price — rejected!");
        return true;
        // ✅ return true = "handled, no error"
      } console.log(`💰 Price updated: ₹${target[prop]} → ₹${value}`);
    } target[prop] = value;
    // actually perform the write
    return true;
    // ⚠️ set traps MUST return true on success
  }
});
productProxy.price = 599;
// 💰 Price updated: ₹499 → ₹599 ✅
productProxy.price = -50;
// ❌ Invalid price — rejected! (target unchanged)
console.log(product.price);
// 599 ✅

⚠️ Thereturn truerule:asettrap must return a truthy value when the write succeeds — returning falsy throws a TypeError in strict mode (and modules/classes are always strict — Lesson 36!). This trips up everyone once.

Sound Familiar? Proxy vs Getters/Setters (Lesson 31) 🔄

	Getters/Setters (Lesson 31)	Proxy
Scope	One specific property per get/set	Everyproperty at once 🕸️
Unknown/dynamic keys	❌ Must exist in advance	✅ Traps intercept ANY key
Delete,in, other operations	❌ Can't intercept	✅ 13 traps available
Granularity	Per-property	Per-object
Use when	Guarding known fields	Guarding/interceptingeverything

Lesson 31 was a door lock on one room. Proxy is a security system for the whole building. 🏢

---

The Full Trap Menu 🍽️ (Know These Exist)

Proxy offers 13 traps — the everyday five:

script.js

Copy Code Run Online

const handler = {
  get(target, prop) {
    …
  }, // 📖 reading: proxy.prop
  set(target, prop, value) {
    …
  }, // ✏️ writing: proxy.prop = x
  has(target, prop) {
    …
  }, // ❓ checks: "prop" in proxy
  deleteProperty(target, prop) {
    …
  }, // 🗑️ deleting: delete proxy.prop
  apply(target, thisArg, args) {
    …
  }, // 📞 calling (when target is a FUNCTION!)
};

applydeserves a spotlight —functions can be proxied too:

script.js

Copy Code Run Online

function calculate(a, b) {
  return a + b;
}const timedCalculate = new Proxy(calculate, {
  apply(target, thisArg, args) {
    console.time("⏱️ calculation");
    // start timer
    const result = target(...args);
    // call the REAL function (spread — Lesson 14!)
    console.timeEnd("⏱️ calculation");
    // stop timer
    return result;
  }
});
timedCalculate(1299, 3);
// ⏱️ calculation: 0.05ms
// → 3897

Every call now gets timed automatically — without touchingcalculate's code. This is how profiling tools and API monitors work. 🔬

Real-World Build #1: The Validation Proxy ✅

Form-style validation that guards an entire object:

script.js

Copy Code Run Online

function createValidated(schema) {
  return new Proxy( {
  }, {
    set(target, prop, value) {
      const rule = schema[prop];
      if (rule && !rule.check(value)) {
        console.log(`❌ ${String(prop)}: ${rule.message}`);
        return true;
      } target[prop] = value;
      console.log(`✅ ${String(prop)} accepted`);
      return true;
    }
  });
}const signup = createValidated( {
  age: {
    check: v => Number.isInteger(v) && v >= 18, // Lesson 51's Number tools!
    message: "must be a whole number, 18+"
  }, email: {
    check: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v), // Lesson 28's regex! 🔍
    message: "must be a valid email"
  }
});
signup.age = 22;
// ✅ age accepted
signup.age = "twenty";
// ❌ age: must be a whole number, 18+
signup.email = "priya@example.com";
// ✅ email accepted
signup.email = "not-an-email";
// ❌ email: must be a valid email

One handler, a schema of rules, andevery propertygets validated — no per-property getters needed. Add a new field? Add one schema entry. 🏗️

Real-World Build #2: Reactivity — How Vue 3 Works ⚡

The crown jewel use case. When state changes → the UI updates automatically. Here's theactual principlein ~20 lines:

script.js

Copy Code Run Online

function reactive(target, onChange) {
  return new Proxy(target, {
    set(obj, prop, value) {
      obj[prop] = value;
      // ① update the data
      onChange(prop, value);
      // ② notify the world! 📢
      return true;
    }
  });
}// 🎨 A pretend "UI":
function render(prop, value) {
  console.log(`🖥️ UI updated — ${String(prop)} is now "${value}"`);
}// ⚡ Reactive state:
const state = reactive( {
  count: 0, theme: "light"
}, render);
state.count = 1;
// 🖥️ UI updated — count is now "1"
state.count = 2;
// 🖥️ UI updated — count is now "2"
state.theme = "dark";
// 🖥️ UI updated — theme is now "dark"

Every assignment automatically triggers a UI update.No manual syncing, noupdateDOM()calls — the Proxy intercepts writes and fires re-renders. Vue 3's reactivity, MobX, and many state libraries are built on exactly this pattern. You just read the core idea behind a billion-dollar ecosystem. 💡

📜 History note (interview gold):Vue 2 usedObject.defineProperty()— which needed each property known in advance (like Lesson 31's getters). Vue 3 switched to Proxy precisely because traps interceptanyproperty, even ones added later. That's the Proxy-vs-getters difference powering real framework history.

Real-World Build #3: Logging & Debugging Proxy 🔍

Wrap any object to watch everything that happens to it:

script.js

Copy Code Run Online

function watch(obj, label = "object") {
  return new Proxy(obj, {
    get(target, prop) {
      console.log(`📖 [${label}] read "${String(prop)}"`);
      return target[prop];
    }, set(target, prop, value) {
      console.log(`✏️ [${label}] "${String(prop)}" changed → ${value}`);
      target[prop] = value;
      return true;
    }, deleteProperty(target, prop) {
      console.log(`🗑️ [${label}] "${String(prop)}" deleted`);
      delete target[prop];
      return true;
    }
  });
}const cart = watch( {
  items: 2
}, "cart");
cart.items = 3;
// ✏️ [cart] "items" changed → 3
console.log(cart.items);
// 📖 [cart] read "items" → 3
delete cart.items;
// 🗑️ [cart] "items" deleted

Dropwatch()around any object during debugging and see its entire life story — who read what, who changed what, when. 🕵️

---

⚠️ When NOT to Use Proxy

Honesty time — Proxy is powerful but specialized:

Situation	Better Tool
Guarding one known property	Getters/setters (Lesson 31) ✅
Simple computed values	A getter or a method ✅
Performance-critical hot loops	Proxy adds overhead to every operation 🐢
Beginner everyday code	Plain objects + classes are simpler ✅
You needproxy === targetidentity	They're never equal — plan for it

script.js

Copy Code Run Online

const target = {
  a: 1
};
const proxy = new Proxy(target, {
});
console.log(proxy === target);
// false — a Proxy is a NEW object!
console.log(proxy.a);
// 1 — but behaves like the target

🏆 The rule:reach for Proxy when you need to intercept operationsgenerically— unknown keys, whole-object behavior, reactive systems, or cross-cutting concerns like logging. For everyday property logic, Lesson 31's getters/setters are simpler and faster.

---

Common Beginner Mistakes (And Fixes)

❌ Mistake	🔍 What Happens	✅ Fix
settrap withoutreturn true	TypeError in strict mode 💥	Always return true after a successful write
Modifying the target INSIDE get with side effects	Infinite loops / weird behavior	Traps should read/write, not re-trigger themselves
Expectingproxy === target	Always false 😱	They're different objects — compare via contents
Proxying for simple validation	Overkill complexity	One field? Use a setter (Lesson 31)
ForgettingReflect(advanced note)	Reinventing default behavior	Reflect.get(target, prop)does the default cleanly
Proxy in hot performance paths	Noticeable slowdown	Keep Proxy for state/config, not per-frame math

---

Quick Self-Check: Lesson 54 Quiz 🧠

1. What are the two arguments ofnew Proxy(), and what does each do?
2. What must asettrap return on success — and what happens otherwise?
3. What's the output?
   script.js

   Copy Code Run Online

   const p = new Proxy( {
     x: 10
   }, {
     get(t, prop) {
       return prop in t ? t[prop] : "missing!";
     }
   });
   console.log(p.x, p.y);

4. Why did Vue 3 choose Proxy over Vue 2's Object.defineProperty approach?
5. When should you prefer a plain getter/setter over a Proxy?

(Answers: 1. The target (the original object being wrapped) and the handler (an object of trap methods defining interception behavior) · 2. A truthy value (true) — returning falsy throws a TypeError in strict mode · 3. "10 missing!" — x exists so it passes through; y is absent so the trap's custom fallback kicks in · 4. Proxy traps intercept ANY property — including ones added later — while defineProperty needed each property known and wrapped in advance · 5. When guarding or computing specific known properties — Proxy shines for generic, whole-object, or dynamic-key interception)