Symbol, Proxy আর Reflect — JavaScript-এ মেটাপ্রোগ্রামিং

১ · মেটাপ্রোগ্রামিং কী — যে কোড অন্য কোডের আচরণ দেখে ও বদলায়

এতদিন আপনি যে কোড লিখেছেন, তা কাজ করে ডেটা নিয়ে: দাম যোগ করা, তালিকা সাজানো, পাতায় লেখা দেখানো। এবার একটু ওপরের তলায় উঠি। ধরুন আপনি চান, একটি দোকানের স্টক object-এ কেউ ভুল করে -5 বসাতে গেলেই সাথে সাথে error হোক — কোডের যে জায়গা থেকেই লেখা হোক না কেন। অথবা চান, settings object-এর প্রতিটি পরিবর্তন নিজে থেকে লগ হোক। এখানে আপনি আর ডেটা নিয়ে কাজ করছেন না; কাজ করছেন “object পড়া বা লেখা হলে কী ঘটবে” সেই নিয়ম নিয়ে। কোড দিয়ে কোডের আচরণ ঠিক করার এই কৌশলের নাম মেটাপ্রোগ্রামিং (metaprogramming).

শুনতে কঠিন লাগলেও আপনি এর স্বাদ আগেই পেয়েছেন। পর্ব ১৪-এ getter আর setter দেখেছেন — obj.total পড়লে আসলে একটি function চলে। Object.defineProperty দিয়ে property-কে read-only বা লুকানো বানিয়েছেন। Object.freeze দিয়ে পুরো object-কে বদলানোর অযোগ্য করেছেন। আর পর্ব ২৭-এ দেখেছেন, [Symbol.iterator] method যোগ করলেই আপনার নিজের object for…of-এ চলে। এগুলো সবই ভাষার “স্বাভাবিক আচরণ” বদলানোর উপায়। এই পর্বে তার পূর্ণ হাতিয়ার-বাক্স খুলব।

তিনটিই এসেছে একসাথে, ES2015-এ — কারণ এরা একে অপরের পরিপূরক। Proxy-র নকশা করতে গিয়েই বোঝা যায়, ভাষার মৌলিক কাজগুলোর জন্য একটি পরিষ্কার function-তালিকা দরকার (Reflect), আর ভাষার নতুন “হুক” যোগ করতে দরকার এমন নাম, যা পুরোনো কোডের কোনো property-র সাথে মিলে যাবে না (Symbol). একে বলা যায় JavaScript-এর reflection ব্যবস্থা — চলার সময় প্রোগ্রাম নিজের গঠন দেখতে ও বদলাতে পারে।

২ · Symbol — কখনো সংঘর্ষ হয় না এমন property-র নাম

পর্ব ০৬-এ দেখেছেন, JavaScript-এ সাতটি primitive টাইপের একটি হলো symbol. এবার দেখি সে আসলে কী কাজে লাগে। Symbol() ডাকলে প্রতিবার একটি সম্পূর্ণ নতুন, অনন্য মান তৈরি হয়। বন্ধনীর ভেতরে যে লেখা দেন, সেটি শুধু একটি বর্ণনা (description) — debugging-এ চেনার জন্য; পরিচয়ের অংশ নয়।

const a = Symbol("id");
const b = Symbol("id");
a === b;              // false — একই বর্ণনা, তবু আলাদা মান
a.description;        // "id"
a.toString();         // "Symbol(id)"
`${a}`;               // TypeError: Cannot convert a Symbol value to a string

শেষ লাইনটি ইচ্ছাকৃত। Symbol নিজে থেকে string-এ রূপান্তর হয় না — যাতে ভুল করে "user_" + sym লিখে কেউ অনন্য চাবিটিকে সাধারণ string বানিয়ে না ফেলে। দরকার হলে স্পষ্টভাবে String(sym) বা sym.description লিখতে হয়।

Symbol-কে property-র নাম হিসেবে

Symbol-এর আসল কাজ হলো object-এর property-র নাম (key) হওয়া। লিখতে হয় বর্গবন্ধনীতে — computed property name: { [AUDIT]: "চেক-৭" } বা item[AUDIT] = …. কেন string নয়? ধরুন আপনার দোকানের অ্যাপে একটি analytics library প্রতিটি পণ্য object-এ item.id বসিয়ে ট্র্যাক করে — অথচ আপনার নিজের id property আগে থেকেই আছে। দুটি কোড একই নামে লিখে একে অপরের ডেটা মুছে দিল। Library যদি const TRACK = Symbol("track") বানিয়ে item[TRACK] ব্যবহার করত, তাহলে কোনো সংঘর্ষই সম্ভব হতো না — ওই Symbol-টি যার হাতে নেই, সে ওই property-তে ভুল করেও পৌঁছাতে পারবে না।

Symbol-key আরেকটি বৈশিষ্ট্য পায়: সাধারণ key-তালিকা বানানোর বেশিরভাগ পথে সে দেখা যায় না. কোন পথে দেখা যায় আর কোন পথে যায় না, ধাপে ধাপে দেখুন:

1const AUDIT = Symbol("audit");2const item = { name: "চাল", price: 6500, [AUDIT]: "চেক-৭" };3for (const k in item) console.log(k);4console.log(Object.keys(item));5console.log(JSON.stringify(item));6console.log(Object.getOwnPropertySymbols(item));7console.log(Reflect.ownKeys(item));

Symbol.for — সবার জন্য একটি ভাগাভাগির খাতা

কখনো কখনো উল্টোটাই দরকার: একই Symbol চাই আলাদা ফাইল, আলাদা library, এমনকি পাতার iframe থেকেও। এর জন্য আছে global symbol registry — একটি বৈশ্বিক খাতা। Symbol.for("app.theme") খাতায় ওই নাম খোঁজে; থাকলে সেই Symbol-ই ফেরত দেয়, না থাকলে নতুন বানিয়ে খাতায় তোলে। তাই Symbol.for("app.theme") === Symbol.for("app.theme") হলো true, আর Symbol.keyFor(sym) খাতার নামটি ফেরত দেয় (সাধারণ Symbol()-এর বেলায় undefined). মনে রাখুন, খাতাটি বৈশ্বিক — নাম মিলে গেলে সংঘর্ষ আবার ফিরে আসে, তাই "আপনার-library.কাজ" ধরনের লম্বা, স্পষ্ট নাম ব্যবহার করুন।

৩ · Well-known symbol — ভাষার ভেতরের হুকে নিজের object জোড়া

JavaScript নিজেও কিছু Symbol বানিয়ে Symbol-এর গায়ে রেখে দিয়েছে: Symbol.iterator, Symbol.toPrimitive, Symbol.toStringTag, Symbol.hasInstance, Symbol.asyncIterator আর আরও কয়েকটি (মোট ১৩টি)। এদের বলে well-known symbol. প্রতিটি ভাষার একটি নির্দিষ্ট কাজের হুক: ভাষা ওই কাজ করার আগে দেখে, object-এ ওই Symbol-key-তে কোনো method আছে কি না। থাকলে সেটি ডাকে। এভাবে আপনার নিজের object ভাষার built-in আচরণে অংশ নিতে পারে — কোনো নতুন keyword ছাড়াই।

Symbol.toPrimitive — object কখন সংখ্যা, কখন লেখা

পর্ব ০৬-এ দেখেছেন, object-কে primitive-এ বদলাতে ভাষা ভেতরে ToPrimitive নিয়ম চালায় — সাধারণত valueOf() আর toString() দিয়ে। কিন্তু object-এ [Symbol.toPrimitive](hint) method থাকলে ভাষা সরাসরি সেটিই ডাকে, আর সাথে একটি ইঙ্গিত (hint) দেয় — কোন প্রসঙ্গে রূপান্তর হচ্ছে: "number", "string" নাকি "default" (যখন দুটোই হতে পারে)। একটি টাকার object দিয়ে প্রতিটি প্রসঙ্গ দেখুন:

1const price = new Money(12000);   // ১২০ টাকা, পয়সায়2`দাম: ${price}`3+price4price * 35"মোট " + price6price == "৳ ১২০.০০"

Symbol.toStringTag আর Symbol.hasInstance

Object.prototype.toString.call(x) হলো টাইপ চেনার একটি পুরোনো, নির্ভরযোগ্য কৌশল — "[object Array]", "[object Map]" ইত্যাদি দেয়। নিজের class-এ get [Symbol.toStringTag]() { return "Money"; } লিখলে আপনার object-ও "[object Money]" দেখাবে; console আর কিছু debugging টুলও এই নাম দেখায়। Symbol.hasInstance আরও সাহসী: class-এ static [Symbol.hasInstance](x) লিখলে x instanceof ThatClass-এর উত্তর আপনি ঠিক করেন। যেমন static [Symbol.hasInstance](n) { return n % 2 === 0; } থাকলে 4 instanceof Even হয় true. মজার, কিন্তু সাবধান — যে পাঠক instanceof-এর স্বাভাবিক অর্থ (prototype chain-এ খোঁজা, পর্ব ২৫) জানেন, তিনি বিভ্রান্ত হবেন।

এবার সব একসাথে চালিয়ে দেখুন — একটি Money class, যার টাকা পয়সায় রাখা (পর্ব ১০-এর নিয়মে), আর Intl.NumberFormat (পর্ব ১০, ২০) দিয়ে বাংলা অঙ্কে লেখা:

const INTERNAL = Symbol("internal");
const bn = new Intl.NumberFormat("bn-BD", { minimumFractionDigits: 2 });
class Money {
  constructor(paisa) { this.paisa = paisa; this[INTERNAL] = "audit-7"; }
  get [Symbol.toStringTag]() { return "Money"; }
  [Symbol.toPrimitive](hint) {
    const taka = this.paisa / 100;
    return hint === "number" ? taka : `৳ ${bn.format(taka)}`;
  }
}
const price = new Money(12000);
console.log(`দাম: ${price}`);                 // hint "string"
console.log(price * 3, price > 100);          // hint "number"
console.log("মোট " + price);                  // hint "default"
console.log(Object.prototype.toString.call(price));

console.log(Object.keys(price), JSON.stringify(price));
console.log(Object.getOwnPropertySymbols(price), price[INTERNAL]);
console.log(Symbol("id") === Symbol("id"), Symbol.for("app.id") === Symbol.for("app.id"));

৪ · Proxy — object-এর সামনে একজন দারোয়ান

Symbol দিয়ে object ভাষার কিছু নির্দিষ্ট কাজে অংশ নেয়। কিন্তু যদি চান যেকোনো property পড়া বা লেখা ধরতে — এমনকি যে property এখনো নেই তারও? Getter/setter প্রতিটি নামের জন্য আলাদা লিখতে হয়, আগে থেকে নাম জানতে হয়। Proxy এই সীমা ভাঙে। তৈরি করার নিয়ম একটাই:

const proxy = new Proxy(target, handler);
// target  — আসল object (বা function), যাকে মোড়ানো হচ্ছে
// handler — একটি সাধারণ object, যার method-গুলো (trap) কাজ মাঝপথে ধরে

Target হলো আসল object — দোকানের গুদাম। Handler হলো দারোয়ানের নির্দেশনার খাতা। Handler-এর প্রতিটি method-কে বলে trap (ফাঁদ) — কারণ সে একটি নির্দিষ্ট মৌলিক কাজকে ফাঁদে ধরে। Handler খালি ({}) হলে Proxy সব কাজ সোজা target-এ পাঠিয়ে দেয়, কোনো পার্থক্য বোঝা যায় না। যে trap লিখবেন, শুধু সেই কাজটির নিয়ম বদলাবে। মোট ১৩টি trap আছে; প্রধানগুলো:

এই ১৩টি কাজ এলোমেলোভাবে বাছা নয়। ECMAScript মানদণ্ডে প্রতিটি object-এর ১১টি “ভেতরের method” আছে — [[Get]], [[Set]], [[HasProperty]] ইত্যাদি — আর function-এর বাড়তি দুটি, [[Call]] ও [[Construct]]; মোট ১৩টি। obj.x থেকে শুরু করে Object.keys পর্যন্ত ভাষার প্রতিটি object-সংক্রান্ত কাজ শেষ পর্যন্ত এগুলোর কোনো একটিতে গিয়ে ঠেকে। Proxy আপনাকে সেই একদম নিচের স্তরটি নিজের হাতে লেখার সুযোগ দেয়। একটি দোকানের স্টক object-এ inventory.chal পড়লে ভেতরে কী ঘটে, ধাপে ধাপে দেখুন:

const inventory = new Proxy({ chal: 50, dal: 20 }, handler);
console.log(inventory.chal);   // কোডে কোথাও লেখা নেই যে মাঝে কেউ আছে

inventory  ──►  Proxy { [[Target]]: {…}, [[Handler]]: handler }
কাজ: [[Get]]("chal")
handler.get আছে?  →  হ্যাঁ  →  target-এ সরাসরি না গিয়ে trap ডাকো

get(target, key, receiver) {
  if (!(key in target)) return 0;       // "chal" আছে, তাই এই লাইন পার
  return Reflect.get(target, key, receiver);
}
target = আসল object · key = "chal" · receiver = inventory (Proxy নিজে)

Reflect.get(target, "chal", receiver)
  ├─ নিজস্ব property "chal"?  হ্যাঁ → 50
  ├─ না থাকলে → prototype chain-এ খোঁজা
  └─ getter হলে → this = receiver দিয়ে getter চালানো

target ──50──► Reflect.get ──50──► get trap ──50──► console.log → 50
trap চাইলে এখানে মান বদলাতে পারত — যেমন দাম টাকায় রূপান্তর, বা লগ লেখা

get trap:  "tel" in target?  →  না  →  return 0
target ছোঁয়া হয়নি · "tel" in inventory  →  false  (has trap নেই, তাই target-এর উত্তর)

প্রথম ব্যবহার — না-থাকা key-তে ডিফল্ট মান

উপরের get trap-টিই একটি পূর্ণ কৌশল: স্টকে নেই এমন পণ্যের পরিমাণ undefined-এর বদলে 0. ফলে inventory.tel + 5 লিখলে NaN আসে না। Python-এর defaultdict যাঁরা চেনেন, তাঁরা মিল পাবেন। তবে খেয়াল রাখুন, এটি কোডের “ভুল ধরা” ক্ষমতা কমায় — বানান ভুল করে inventory.chaal লিখলেও চুপচাপ 0 আসবে। কোনটি চান — নীরব ডিফল্ট নাকি জোরে error — সেটি নকশার সিদ্ধান্ত; পরের অংশে উল্টোটিও দেখব।

৫ · Proxy দিয়ে বাস্তব কাজ — যাচাই, typo-রক্ষা, read-only আর লগ

একটি অনলাইন মুদি দোকানের গুদাম ভাবুন। স্টকের সংখ্যা বদলায় অনেক জায়গা থেকে — অর্ডার, ফেরত, নতুন চালান, অ্যাডমিন প্যানেল। প্রতিটি জায়গায় “সংখ্যা ঋণাত্মক হলো কি না” যাচাই লিখলে একদিন কেউ ভুলবেই। তার চেয়ে গুদামের দরজায় একজন দারোয়ান বসান — set trap — যে প্রতিটি লেখা যাচাই করবে। ঠিক মান হলে স্বাভাবিকভাবে লেখা হয়, ভুল হলে TypeError:

1set(target, key, value, receiver) {2  if (!Number.isInteger(value) || value < 0)3    throw new TypeError(`${String(key)}: স্টক ঋণাত্মক হতে পারে না`);4  console.log(`লগ: ${String(key)} ${target[key] ?? 0} → ${value}`);5  return Reflect.set(target, key, value, receiver);6}

এবার পুরোটা চালিয়ে দেখুন — যাচাই করা গুদাম, ডিফল্ট মান, লগ, আর সাথে একটি config object, যা বানান ভুলে error দেয়:

const stock = { chal: 50, dal: 20 };
const inventory = new Proxy(stock, {
  get(target, key, receiver) {
    return key in target ? Reflect.get(target, key, receiver) : 0;   // অজানা পণ্য → 0
  },
  set(target, key, value, receiver) {
    if (!Number.isInteger(value) || value < 0)
      throw new TypeError(`${String(key)}: স্টক ঋণাত্মক হতে পারে না (${value})`);
    console.log(`লগ: ${String(key)} ${target[key] ?? 0} → ${value}`);
    return Reflect.set(target, key, value, receiver);
  },
});
console.log(inventory.chal, inventory.tel, "tel" in inventory);
inventory.dal -= 5;
inventory.tel = 12;
try { inventory.chal -= 60; } catch (e) { console.log(e.name + ": " + e.message); }
console.log(JSON.stringify(stock), inventory === stock);
const config = new Proxy({ apiUrl: "/api", timeout: 3000 }, {
  get(t, key, r) { if (key in t) return Reflect.get(t, key, r); throw new Error(`অজানা সেটিং "${String(key)}"`); },
});
console.log(config.timeout);
try { console.log(config.timout); } catch (e) { console.log(e.message); }

আরও কয়েকটি চেনা নকশা

Read-only view: কোনো module-কে settings পড়তে দিতে চান, বদলাতে নয়। set, deleteProperty আর defineProperty trap-এ error ছুড়ুন, get-এ ভেতরের object পেলে সেটিকেও একই Proxy-তে মুড়ে দিন। Object.freeze-এর সাথে পার্থক্য হলো — freeze আসল object-কেই সবার জন্য জমিয়ে দেয়, আর Proxy শুধু এই পথে আসা লোকদের থামায়; মালিক নিজে target বদলাতে পারে, আর read-only view-তে সাথে সাথে নতুন মান দেখা যায়।

পরিবর্তনের লগ আর পর্যবেক্ষণ: settings object-এর প্রতিটি set-এ একটি callback ডাকুন — “থিম dark থেকে light হলো” — আর UI নিজে থেকে নতুন করে আঁকুন। এই ধারণাই আধুনিক framework-এর reactivity-র হৃদয়। Vue 3-এর reactive() ধারণাগতভাবে এরকম (সরলীকৃত, আসল কোড নয়; framework নিয়ে পর্ব ৫৪-এ):

// ধারণা বোঝানোর জন্য সরলীকৃত — Vue-র আসল বাস্তবায়ন অনেক বড়
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key);                 // "এই মুহূর্তে যে UI আঁকা হচ্ছে, সে key-টি পড়ল" — মনে রাখো
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const ok = Reflect.set(target, key, value, receiver);
      trigger(target, key);               // "key বদলেছে" — যারা পড়েছিল, তাদের আবার চালাও
      return ok;
    },
  });
}
const cart = reactive({ count: 0 });
// প্রত্যাশিত আচরণ: cart.count++ লিখলেই পাতার "কার্টে ১টি পণ্য" লেখাটি নিজে থেকে বদলায়

ঋণাত্মক index (মজার উদাহরণ): Python-এ a[-1] শেষ উপাদান দেয়। JavaScript-এ arr[-1] হলো "-1" নামের একটি property, সাধারণত undefined. একটি get trap key "-1" দেখে তাকে length - 1-এ বদলে দিলেই arr[-1] দেয় শেষ উপাদান। তবে আধুনিক JavaScript-এ এর জন্য Proxy লাগে না — ES2022 থেকে arr.at(-1) আছে (পর্ব ১৫)। Proxy-র আগে সবসময় ভাবুন: ভাষায় সহজ উপায় আছে কি?

Function-এর Proxy — apply আর construct: target function হলে apply trap প্রতিটি call ধরে — কতবার ডাকা হলো গোনা, সময় মাপা, ফল cache করা। Test library-গুলোর “spy” বা “mock” function এই ধারণায় চলে। construct trap new ধরে — যেমন একটি class থেকে একটিমাত্র object (singleton) বানাতে দেওয়া।

Revocable proxy — প্রত্যাহারযোগ্য অনুমতি: Proxy.revocable(target, handler) একটি { proxy, revoke } জোড়া দেয়। revoke() ডাকার পর ওই Proxy দিয়ে যেকোনো কাজে TypeError: Cannot perform 'get' on a proxy that has been revoked (V8-এর বার্তা)। একটি third-party plugin-কে কিছুক্ষণের জন্য আপনার ডেটায় প্রবেশাধিকার দিলেন, কাজ শেষে দরজা বন্ধ — মেয়াদ শেষে বাতিল হওয়া bKash-এর OTP-র মতো। এটিই revocable proxy, আর নিরাপত্তা-গবেষণার “membrane” নকশার ভিত্তি (ভাবনার প্রশ্ন ২)।

৬ · Reflect — ডিফল্ট কাজের সরকারি হাতিয়ার

Reflect কোনো class নয়, new Reflect() হয় না — এটি Math-এর মতো একটি সাধারণ object, যাতে ১৩টি static function আছে, Proxy-র ১৩টি trap-এর হুবহু একই নাম আর একই argument নিয়ে: Reflect.get, Reflect.set, Reflect.has, Reflect.deleteProperty, Reflect.ownKeys, Reflect.apply, Reflect.construct, Reflect.defineProperty ইত্যাদি। প্রতিটি সেই মৌলিক কাজটি “স্বাভাবিক নিয়মে” করে। নিয়মটি সহজ: trap-এর ভেতরে স্বাভাবিক আচরণ চাইলে একই নামের Reflect function ডাকুন, সব argument হুবহু দিয়ে.

কেন target[key] যথেষ্ট নয় — receiver-এর বাগ

অনেকে (আর অনেক AI) trap-এ লেখেন return target[key]. বেশিরভাগ সময় কাজ করে। বিপদ লুকিয়ে থাকে getter আর inheritance-এ। নিচের কোডে একটি user object-এর getter this._name পড়ে। তারপর Proxy-কে prototype বানিয়ে একটি admin object তৈরি হলো, যার নিজের _name আছে:

const user = { _name: "রিনা", get name() { return this._name; } };

const bad  = new Proxy(user, { get(t, k)    { return t[k]; } });               // ভুল
const good = new Proxy(user, { get(t, k, r) { return Reflect.get(t, k, r); } }); // ঠিক

const admin1 = Object.create(bad);  admin1._name = "অ্যাডমিন";
const admin2 = Object.create(good); admin2._name = "অ্যাডমিন";

console.log(admin1.name, admin2.name);
// প্রত্যাশিত আউটপুট: রিনা অ্যাডমিন

admin1.name পড়লে admin1-এ নিজের name নেই, তাই খোঁজ যায় prototype-এ — Proxy-তে। Trap পায় receiver = admin1. কিন্তু ভুল trap সেটি ফেলে দিয়ে t[k] লেখে, ফলে getter চলে this = user নিয়ে — উত্তর আসে “রিনা”, অ্যাডমিনের নাম নয়। ঠিক trap receiver-টি Reflect.get-কে দেয়, getter চলে this = admin2 নিয়ে — “অ্যাডমিন”. এই বাগ সহজে ধরা পড়ে না, কারণ সাধারণ ব্যবহারে (Proxy-কে সরাসরি পড়া) দুটোই একই উত্তর দেয়। Class-এর inheritance-এ (পর্ব ২৬) Proxy থাকলে এটি সত্যিকারের ভুল হিসাবে পরিণত হয়। set-এর বেলাতেও একই কথা — Reflect.set(t, k, v, r) receiver দিয়ে setter চালায় আর নতুন property ঠিক object-এ বসায়।

Reflect বনাম Object-এর পুরোনো method

কিছু Reflect function দেখতে Object-এর পুরোনো method-এর মতো, কিন্তু আচরণে পার্থক্য আছে — সবচেয়ে বড়টি হলো ব্যর্থ হলে error না ছুড়ে false ফেরত দেওয়া:

true/false ফেরত দেওয়ার সুবিধা Proxy-তে স্পষ্ট: set, deleteProperty, defineProperty trap-কে ঠিক এই boolean-ই ফেরত দিতে হয়। return Reflect.set(…) লিখলে স্বাভাবিক ফলটি হুবহু পৌঁছে যায় — read-only property-তে লিখতে গেলে false, আর strict mode-এ ভাষা সেটিকে ঠিক সময়ে TypeError বানায়। আর operator-গুলোর (in, delete, new) function-রূপ থাকায় এগুলো higher-order function-এ সহজে পাঠানো যায়।

৭ · নিয়ম, দাম আর সাবধানতা — invariant, গতি, debugging আর decorator

Invariant — Proxy যে মিথ্যা বলতে পারে না

Proxy যা খুশি তাই ফেরত দিতে পারে — প্রায়। ভাষার কিছু প্রতিশ্রুতি আছে যা কোনো অবস্থায় ভাঙা যায় না, এদের বলে invariant. যেমন: কোনো property যদি target-এ non-configurable আর non-writable হয় (property descriptor, পর্ব ১৪), তাহলে get trap-কে তার আসল মানই ফেরত দিতে হবে। জমানো object-এর property সব সময় একই থাকবে — এই প্রতিশ্রুতির ওপর নিরাপত্তা-কোড ভরসা করে, আর Proxy সেটি ভাঙলে পুরো ভাষার নির্ভরযোগ্যতা যেত। তাই engine প্রতিটি trap-এর ফল target-এর সাথে মিলিয়ে দেখে:

const target = {};
Object.defineProperty(target, "x", { value: 1, writable: false, configurable: false });
const liar = new Proxy(target, { get: () => 2 });
liar.x;   // TypeError (নিচে V8-এর বার্তা)

TypeError: 'get' on proxy: property 'x' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '1' but got '2')

এরকম আরও নিয়ম: has trap non-configurable property-কে “নেই” বলতে পারে না; ownKeys-এর তালিকায় সব non-configurable key থাকতেই হবে; Object.preventExtensions করা target-এর বেলায় ownKeys হুবহু target-এর key দিতে হবে। সাধারণ, বদলানো যায় এমন property-তে এসব নিয়ম প্রযোজ্য নয় — সেখানে trap স্বাধীন।

যা Proxy দিয়ে যায় না

• Private field: #balance-এর মতো private field (পর্ব ২৬) target-এর গায়ে লেগে থাকে, Proxy-র গায়ে নয়। Proxy-র মাধ্যমে এমন getter ডাকলে this হয় Proxy, ফলে TypeError: Cannot read private member #bal from an object whose class did not declare it.
• Map, Set, Date-এর মতো built-in: এদের ডেটা থাকে ভেতরের লুকানো ঘরে। new Proxy(new Map(), {})-এ .get("a") ডাকলে TypeError: Method Map.prototype.get called on incompatible receiver #<Map> — method-কে আসল Map-এ bind করে দিতে হয়। Vue-র মতো library এজন্য Map/Set-এর জন্য আলাদা handler লেখে।
• পরিচয় (identity): proxy !== target. একই object-এর দুই রূপ মিশে গেলে Set, WeakMap বা === তুলনায় অদ্ভুত ভুল হয়।
• কপি ও পাঠানো: structuredClone(proxy) DataCloneError দেয় — Proxy-কে worker-এ পাঠানো যায় না।

গতির দাম আর debugging-এর দাম

পর্ব ০৫-এ দেখেছেন, V8 সাধারণ object-এর property পড়াকে hidden class আর inline cache দিয়ে প্রায় একটি মেমরি-পড়ার মতো দ্রুত বানায়। Proxy-তে প্রতিটি পড়া একটি আসল function call (আর Reflect মিলিয়ে দুটি), সাথে invariant-যাচাই — JIT অনেক কৌশল খাটাতে পারে না। ফলে tight loop-এ লাখো বার পড়া হলে সাধারণ object-এর চেয়ে কয়েক গুণ থেকে অনেক গুণ ধীর হতে পারে (engine আর কাজভেদে সংখ্যা বদলায়, তাই নিজের কোডে মেপে দেখুন — পর্ব ৫৩)। UI-এর state বা config-এর মতো মাঝে মাঝে ছোঁয়া ডেটায় এটি টেরই পাওয়া যায় না; ছবির pixel বা বড় হিসাবের array-তে Proxy নয়।

Debugging-এর দামটি আরও সূক্ষ্ম। Proxy-র নিয়ম চোখে দেখা যায় না: config.timeout লেখা লাইনটি আসলে একটি function চালায়, যা অন্য ফাইলে লেখা। Stack trace-এ trap-এর ফ্রেম ঢুকে পড়ে, console-এ object দেখাতে গিয়ে DevTools নিজেই trap ডেকে বসে, আর নতুন সহকর্মী বোঝেন না “undefined কেন 0 হলো”. তাই নিয়ম: Proxy ব্যবহার করলে নাম আর মন্তব্যে স্পষ্ট লিখুন (createValidatedInventory), সীমানায় (ডেটা ঢোকার দরজায়) রাখুন, আর সাধারণ function বা class দিয়ে কাজ হলে সেটাই বেছে নিন।

বাস্তব library-র ভেতরের “জাদু”

তবু Proxy বড় বড় library-র মেরুদণ্ড। Vue 3-এর reactivity (উপরে দেখেছেন) Proxy-নির্ভর; MobX-এর নতুন সংস্করণগুলোও তাই। Immer (React/Redux জগতে জনপ্রিয়) আপনাকে একটি draft দেয় — একটি Proxy — যাতে আপনি স্বাভাবিকভাবে draft.items.push(x) লেখেন; Proxy প্রতিটি পরিবর্তন নোট করে, আর শেষে আসল ডেটা না ছুঁয়ে একটি নতুন অপরিবর্তনীয় কপি বানায় (পর্ব ২১-এর structural sharing মনে করুন)। কিছু ORM আর API client-ও Proxy দিয়ে না-থাকা method-কে ডাটাবেস কোয়েরি বা HTTP call-এ রূপ দেয়। এগুলো ব্যবহার করার সময় মনে রাখুন: আপনার হাতের object হয়তো আসল object নয় — console.log-এ অদ্ভুত দেখালে, বা structuredClone-এ error এলে, এটাই কারণ।

Decorator — আসছে, কিন্তু সাবধানে বলুন

মেটাপ্রোগ্রামিংয়ের আরেকটি হাতিয়ার হলো decorator — class বা তার method-এর আগে @ দিয়ে লেখা একটি function, যা সংজ্ঞাটিকে মুড়ে বা বদলে দেয়। এর বর্তমান মানদণ্ড-রূপটি ২০২২ সালে TC39-এ Stage 3-এ পৌঁছায়, আর TypeScript 5.0 (২০২৩) থেকে এটি সমর্থন করে। এই লেখার সময় পর্যন্ত বেশিরভাগ ব্রাউজার আর Node.js-এ এটি নিজস্বভাবে চলে না; TypeScript বা Babel দিয়ে রূপান্তর করে ব্যবহার করা হয় — ব্যবহারের আগে নিজের পরিবেশের সমর্থন দেখে নিন। তাই নিচের কোড এখানে চালানো যাবে না:

function logged(method, context) {          // TC39 Stage 3 (২০২২) রূপ
  return function (...args) {
    console.log(`→ ${String(context.name)}(${args.join(", ")})`);
    return method.apply(this, args);
  };
}
class Cart {
  @logged add(item) { /* … */ }
}
new Cart().add("চাল");
// প্রত্যাশিত আউটপুট: → add(চাল)

সাবধান: Angular আর NestJS-এর মতো framework বহু বছর ধরে TypeScript-এর পুরোনো “experimental” decorator ব্যবহার করে, যার argument আর আচরণ নতুন মানদণ্ড থেকে আলাদা। অনলাইনে (আর AI-এর উত্তরে) দুই ধরনের কোড মিশে থাকে — কোনটি দেখছেন, tsconfig.json-এর experimentalDecorators দেখে বুঝুন। দীর্ঘ ইতিহাস ভাবনার প্রশ্ন ৫-এ।

৮ · AI-এর যুগে — “জাদু” লেখার আগে সহজ পথ খুঁজুন

AI-কে “object-এ validation যোগ করো” বললে সে প্রায়ই সোজা Proxy লিখে দেয় — দেখতে আধুনিক আর চতুর। কিন্তু অনেক সময় একটি সাধারণ setStock(name, qty) function বা class-এর setter যথেষ্ট, যা পড়তে সহজ, দ্রুত, আর TypeScript-এর টাইপ-যাচাইয়ের সাথেও ভালো মেলে। AI যে কোড থেকে শিখেছে তাতে Proxy-র অনেক “দেখাও কী পারি” উদাহরণ আছে, কিন্তু রক্ষণাবেক্ষণের দাম নিয়ে কথা কম।

AI-এর লেখা মেটাপ্রোগ্রামিং কোড — যাচাইয়ের চেকলিস্ট

• Proxy সত্যিই দরকার কি না ভেবেছি — function, class-এর setter, Object.freeze বা arr.at() দিয়ে কাজ হয় কি না
• প্রতিটি trap স্বাভাবিক পথে Reflect.* ডাকে, receiver-সহ; কোথাও target[key] শর্টকাট নেই
• set, deleteProperty, defineProperty trap boolean ফেরত দেয়
• Symbol key আর toJSON/then-এর মতো ভাষার প্রশ্ন নিরাপদে পার হয় — JSON.stringify, template literal আর await দিয়ে নিজে চালিয়ে দেখেছি
• লুকানো metadata-র জন্য string-key নয়, Symbol; সত্যিকারের গোপন ডেটার জন্য #private
• Private field, Map/Set বা structuredClone-এর সাথে Proxy মেশানো হয়নি, বা হলে আলাদা ব্যবস্থা আছে
• Decorator কোডে কোন সংস্করণ (TC39 Stage 3 নাকি TypeScript-এর experimental) তা স্পষ্ট