Blog

JavaScript Proxy & Reflect API :

JavaScript ke Proxy aur Reflect API dono hi metaprogramming ka part hain.
Metaprogramming ka matlab hai — aisi programming jisme hum apne code ka behavior dynamically change, control, ya customize kar sakein.

Use Kya Hai?

Normally, hum ek object ke properties ko directly access karte hain (obj.prop), ya update karte hain (obj.prop = value).

Lekin Proxy ka use karke hum ye operations ke beech me intercept kar sakte hain — matlab property access hone ya change hone par hum apni custom logic laga sakte hain.

Reflect API ek helper tool hai jo object ke saath kaam karne ke liye standardized methods deta hai.
Ye Proxy ke saath kaafi useful hota hai kyunki jab hum kuch operations intercept karte hain, toh hume unka default kaam bhi perform karna hota hai.

Example:
Samajh lo tumhare ghar ka watchman (Proxy) jo kisi bhi guest ko andar aane se pehle verify karta hai (custom logic), aur phir main gate ka key system (Reflect) jo actual me gate ko open karta hai (default operation).

2. Proxy – Kya hota hai?

Proxy ek wrapper hai jo kisi target object ya function ke upar lagta hai aur aapko control deta hai ki jab koi us object ke saath interact kare, toh aap us interaction ko customize kar sako.

Syntax:

const proxy = new Proxy(target, handler);

• target → Original object ya function jiska behavior hum modify karna chahte hain.
• handler → Ek object jisme traps (methods) hote hain jo specific operations ko intercept karte hain.

Proxy ke Common Use Cases

• Validation → Data set karne se pehle type ya value check karna.
• Logging / Debugging → Har property access ya modification ka record rakhna.
• Security → Sensitive properties ko hide karna.
• Default values → Agar property exist nahi karti toh default value dena.
• Data Binding / Reactivity → UI frameworks (Vue.js, MobX) me reactivity ka base concept Proxy hai.

Example: Validation & Logging :

const target = { name: "Rahul", age: 25 };

const handler = {
  get: function(obj, prop) {
    console.log(`Property "${prop}" accessed`);
    return prop in obj ? obj[prop] : "Not Found";
  },
  set: function(obj, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Age must be a number");
    }
    obj[prop] = value;
    console.log(`Property "${prop}" updated to ${value}`);
    return true;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Logs access + "Rahul"
proxy.age = 30; // Valid update
// proxy.age = "thirty"; // Throws error

Yahaan:
get trap → Property read hone par log + value return hoti hai.
set trap → Property set hone par validation hoti hai.

3. Reflect API – Kya hota hai?

Reflect ek built-in object hai jo object ke saath kaam karne ke liye standardized methods deta hai.
Ye methods wahi kaam karte hain jo normal JS operations karte hain, lekin function form me.

Reflect kyun use karein?

• Proxy traps me default operation easily call karne ke liye.
• Exception handling me help karta hai (methods return value dete hain instead of throwing error in some cases).
• Code ko cleaner aur predictable banata hai.

Common Reflect Methods

Reflect ke saath Proxy Example :

const target = { name: "Rahul", age: 25 };

const handler = {
  get: function(obj, prop, receiver) {
    console.log(`Getting ${prop}`);
    return Reflect.get(obj, prop, receiver); // Default kaam
  },
  set: function(obj, prop, value, receiver) {
    console.log(`Setting ${prop} = ${value}`);
    return Reflect.set(obj, prop, value, receiver); // Default kaam
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name); // "Getting name" + "Rahul"
proxy.age = 30; // "Setting age = 30"

Proxy Traps :

Example : Default Values

const user = {
  name: "Rahul"
};

const handler = {
  get(target, prop) {
    return prop in target ? target[prop] : "Default Value";
  }
};

const proxy = new Proxy(user, handler);
console.log(proxy.name); // "Rahul"
console.log(proxy.age); // "Default Value"

Fayde: Isse undefined properties ka error avoid hota hai aur hum fallback value de sakte hain.

6. Proxy + Reflect = Powerful Combo

const data = { a: 10, b: 20 };

const handler = {
  get(target, prop) {
    console.log(`Reading ${prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    console.log(`Writing ${prop} = ${value}`);
    return Reflect.set(target, prop, value);
  }
};

const proxy = new Proxy(data, handler);

console.log(proxy.a); // Reading a → 10
proxy.b = 50; // Writing b = 50

Reason to use both: Proxy ka use hum custom behavior ke liye karte hain aur Reflect ka use default functionality ko preserve rakhne ke liye.

7. Key Points :

• Proxy = Object ke upar control layer (gatekeeper).
• Reflect = Default gate opening mechanism (standardized tools).
• Proxy traps me Reflect ka use karna best practice hai.
• Dono ka combination reactive systems, validation, aur security ke liye powerful hai.
• Vue.js 3, MobX, Apollo Client jaise libraries me ye extensively use hota hai.

Quiz: Test Your Knowledge on Proxy & Reflect API in JavaScript

Bonus: Practical Application!

Aaj hi JavaScript Proxy & Reflect API ka use karke apne code ko aur powerful banayein!

JavaScript ke Proxy aur Reflect API ko sahi tareeke se samajhne ke liye get, set, has, deleteProperty jaise traps aur Reflect ke Reflect.get(), Reflect.set(), Reflect.has() jaise methods ka upayog karein.
Ye metaprogramming ka ek strong feature hai jo aapko apne object ke behavior ko intercept, customize, aur control karne ki power deta hai. Inka use karke aap data validation, logging, security checks, ya custom behavior implement kar sakte hain—wo bhi without directly modifying original objects.