19. Metaprogramming with Proxy & Reflect API (Reactive State Engine) • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

**Normal Programming:** Code jo data ko process karta hai.  
**Metaprogramming:** Code jo **programming language ke apne default behaviour ko modify karta hai!**

JavaScript me Metaprogramming ke 2 main pillars hain:
1. **`Proxy` (The Guard / Interceptor):** Object ke har action (read, write, delete) ke aage ek bodyguard baitha deta hai.
2. **`Reflect` (The Default Forwarder):** Bodyguard ko bolta hai: *"Check pass ho gaya, ab jo default JS kaam hota hai wo kar do."*

---

### 2. How Vue 3 Reactivity Works (Proxy Architecture)

Vue 3 ne pura reactivity engine `Object.defineProperty` se badal kar **`Proxy`** par shift kar diya kyunki Proxy naye properties add hone aur array index updates ko bhi track kar leta hai!

```javascript
const targetObject = {
    username: "rishabh",
    coins: 100
};

// The Proxy Handler (Traps)
const handler = {
    // Intercept property reading: target.property
    get(target, property, receiver) {
        console.log(`🔍 [GET Trap] Property '${property}' accessed.`);
        return Reflect.get(target, property, receiver);
    },

// Intercept property writing: target.property = value
    set(target, property, value, receiver) {
        console.log(`✏️ [SET Trap] Property '${property}' changed to '${value}'.`);
        
        if (property === 'coins' && typeof value !== 'number') {
            throw new TypeError("Coins must be a numeric value!");
        }
        
        return Reflect.set(target, property, value, receiver);
    }
};

const proxyUser = new Proxy(targetObject, handler);

console.log(proxyUser.username); // Triggers GET trap -> "rishabh"
proxyUser.coins = 250;           // Triggers SET trap -> 250
// proxyUser.coins = "free";     // Throws TypeError: Coins must be a numeric value!
```

---

### 3. Complete Reactive State Engine (Mini Vue 3 Scratch Implementation)

```javascript
function reactive(data, onStateChange) {
    return new Proxy(data, {
        set(target, key, value, receiver) {
            const oldValue = target[key];
            const success = Reflect.set(target, key, value, receiver);
            
            if (success && oldValue !== value) {
                onStateChange(key, value, oldValue); // Auto trigger UI re-render!
            }
            return success;
        }
    });
}

// Real-Time Demo
const store = reactive({ count: 0, user: "Rishabh" }, (key, newVal, oldVal) => {
    console.log(`📢 [UI RE-RENDER] ${key} changed from ${oldVal} ➔ ${newVal}`);
});

store.count++; // 📢 [UI RE-RENDER] count changed from 0 ➔ 1
store.count++; // 📢 [UI RE-RENDER] count changed from 1 ➔ 2
store.user = "Google Engineer"; // 📢 [UI RE-RENDER] user changed from Rishabh ➔ Google Engineer
```

---

### 4. Comparison Table: `Object.defineProperty` vs `Proxy`

---

### 5. Top 3 Big Tech Use Cases of Proxy

1. **Negative Array Indexing:** Python ki tarah `arr[-1]` se last element access karne ke liye proxy banana.
2. **Schema & Type Validation:** Runtime par API payload validate karna.
3. **Audit Logging & Analytics:** Object ke access logs monitor karna bina actual business logic ko modify kiye.

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **Proxy me `Reflect` use karna kyun recommended hai?** -> Taaki default internal slot operations safe tareeqe se forward hon aur prototype inheritance ke dauran `this` context (receiver) sahi target par point kare.
2. **Proxy kitne types ke traps support karta hai?** -> Total 13 internal traps (jaise `get`, `set`, `has`, `deleteProperty`, `apply`, `construct`, etc.).
3. **Kya Proxy ko revoke (destroy) kiya ja sakta hai?** -> Haan! `Proxy.revocable(target, handler)` use karke hum proxy ko baad me `revoke()` kar sakte hain jisse security memory leak bache.

---
**Next Topic:** 20. DOM Event Propagation: Capturing, Target, Bubbling & Delegation

Loading lesson content...

🎯 Big Tech Coding & Interview Challenges

Practice these curated problems. Click "Load in Sandbox" to solve live in the Code Studio!

1 Questions

Medium

1. Observable State Engine with Proxy & Reflect

Build a `reactive(target, onChange)` function that returns a Proxy triggering `onChange(key, newVal)` whenever any property is updated.

💡 View Pro Interview Hint

• Use Reflect.set inside the proxy set trap.

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. Observable State Engine with Proxy & Reflect

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track