scope chain আর closure — যে function জন্মস্থান মনে রাখে

১ · Closure কী — যে function জন্মস্থান মনে রাখে

পর্ব ০৭-এ দেখেছেন, একটি নাম কোন variable-কে বোঝায় তা ঠিক হয় কোড কোথায় লেখা আছে তা দেখে — একে বলে lexical scope. আর পর্ব ১৩-এ দেখেছেন, JavaScript-এ function একটি মান: variable-এ রাখা যায়, পাঠানো যায়, অন্য function থেকে ফেরত দেওয়া যায় (first-class function). এই দুটি সত্য একসাথে রাখলে একটি প্রশ্ন ওঠে, আর সেই প্রশ্নের উত্তরই এই পর্বের বিষয়।

প্রশ্নটি এই: একটি function-এর ভেতরে আরেকটি function তৈরি হলো। ভেতরেরটি বাইরের function-এর একটি local variable ব্যবহার করে। এখন বাইরের function ভেতরেরটিকে return করে দিল, আর নিজে শেষ হয়ে গেল। পর্ব ১৩-এর call stack অনুযায়ী বাইরের function-এর frame সরে যাওয়ার কথা, তার local variable-ও হারিয়ে যাওয়ার কথা। তাহলে ভেতরের function পরে যখন চলবে, সেই variable কোথায় পাবে?

JavaScript-এর উত্তর: variable-টি হারায় না। প্রতিটি function তৈরি হওয়ার মুহূর্তে তার চারপাশের variable-এর পরিবেশের সাথে একটি স্থায়ী সংযোগ পেয়ে যায়। Function যেখানেই যাক, যত পরেই চলুক, সেই সংযোগ ধরে তার জন্মস্থানের variable পড়তে ও বদলাতে পারে। আর যতক্ষণ কেউ function-টিকে ধরে রেখেছে, ততক্ষণ সেই variable-গুলোও মেমরিতে বেঁচে থাকে। Function আর তার ধরে রাখা পরিবেশের এই জোড়ের নাম closure.

সবচেয়ে ছোট উদাহরণটি দেখুন। এখানে কোনো চালাকি নেই, শুধু একটি function আরেকটি function ফেরত দিচ্ছে:

function makeGreeting(branch) {
  const prefix = "স্বাগতম, " + branch + " শাখা";   // makeGreeting-এর local
  return function (name) {
    return prefix + " — " + name;                  // বাইরের prefix ব্যবহার
  };
}

const greetRajshahi = makeGreeting("রাজশাহী");   // makeGreeting শেষ হয়ে গেল
greetRajshahi("রফিক");   // "স্বাগতম, রাজশাহী শাখা — রফিক"

Lexical scope বনাম dynamic scope — কেন “জন্মস্থান”, “ডাকার জায়গা” নয়

একটি function-এর ভেতরে বাইরের কোনো নাম থাকলে, বাইরে মানে কোথায়? দুটি সম্ভাব্য নিয়ম আছে। Lexical (static) scope: function যেখানে লেখা হয়েছে, তার চারপাশ। Dynamic scope: function যেখান থেকে ডাকা হয়েছে, সেই মুহূর্তের চারপাশ। JavaScript সবসময় প্রথম নিয়ম মানে:

const vat = 0.15;
function price(amount) { return amount + amount * vat; }

function eidSale() {
  const vat = 0;          // এখানে আরেকটি vat
  return price(1000);     // price কোন vat দেখবে?
}
eidSale();   // 1150 — price লেখা হয়েছে global-এ, তাই global-এর vat

price ডাকা হয়েছে eidSale-এর ভেতর থেকে, যেখানে vat = 0. Dynamic scope হলে ফল হতো ১০০০. কিন্তু price লেখা হয়েছে global-এ, তাই সে global-এর vat দেখে — ফল ১১৫০. এই নিয়মের সবচেয়ে বড় সুবিধা: কোড পড়েই বলা যায় কোন নাম কাকে বোঝায়, কে কোথা থেকে ডাকবে তা না জেনেই। Closure ঠিক এই নিয়মের ওপর দাঁড়িয়ে — function যেহেতু জন্মস্থানের variable দেখে, তাই জন্মস্থানের সাথে সংযোগটি তাকে সাথে রাখতেই হয়। (একটি ব্যতিক্রম মনে রাখুন: সাধারণ function-এর this ঠিক হয় ডাকার ধরন দেখে — সেটি পর্ব ২৪-এর বিষয়। Variable-এর ক্ষেত্রে নিয়ম সবসময় lexical.)

২ · Environment record আর scope chain — engine কীভাবে একটি নাম খোঁজে

Closure সত্যিই বুঝতে হলে engine-এর ভেতরের একটি ছবি দরকার। ECMAScript মানদণ্ড (spec) এই ছবিটি বর্ণনা করে কয়েকটি শব্দ দিয়ে। শব্দগুলো ভয় পাওয়ার মতো নয় — প্রতিটির পেছনে একটি সহজ ধারণা।

এই খাতাটির নাম spec-এ environment record. পুরোনো সংস্করণে খাতা আর outer সংযোগ মিলিয়ে বলা হতো “Lexical Environment”; এখনকার spec-এ outer সংযোগটি সরাসরি record-এর ভেতরেই থাকে। দুই নামই বই আর ব্লগে দেখবেন — মানে একই। খাতাগুলো outer সংযোগ দিয়ে জুড়ে যে শিকল তৈরি হয়, সেটাই scope chain.

একটি নাম দেখলে engine-এর কাজ সোজা: চলতি খাতায় খোঁজো → না পেলে outer খাতায় → তার outer-এ → … → global → সেখানেও না পেলে ReferenceError. প্রথম যেখানে পাওয়া যায়, সেখানেই খোঁজা থামে — এ কারণেই ভেতরের একই নাম বাইরেরটিকে আড়াল করে (পর্ব ০৭-এর shadowing). তিন স্তর গভীর একটি function-এ চারটি নাম খোঁজা ধাপে ধাপে দেখুন। “পরে” চাপুন।

1const fee = 10;2function branch() {3  const city = "Rajshahi";4  function counter() {5    const no = 3;6    function teller() {7      return `${city}-${no}: ${fee} taka`;8    }9    return teller();10  }11  return counter();12}13branch();

এবার closure-এর রহস্যটি এক বাক্যে বলা যায়: একটি খাতা ততক্ষণ বেঁচে থাকে, যতক্ষণ কেউ তার দিকে সংযোগ রাখে। সাধারণ কলের পরে কেউ সংযোগ রাখে না, তাই খাতাটি garbage collection-এ মুছে যায়। কিন্তু ভেতরের কোনো function বাইরে ফেরত গেলে তার [[Environment]] সেই খাতার দিকে সংযোগ রাখে — খাতাটি থেকে যায়। এ কারণেই closure-এর variable stack-এ নয়, heap-এ থাকে বলে ভাবা ভালো।

৩ · Closure মান নয়, variable ধরে রাখে — counter factory

Closure নিয়ে সবচেয়ে বড় ভুল ধারণা হলো: “function তৈরির সময় বাইরের variable-গুলোর একটি কপি তুলে রাখে।” না — function তুলে রাখে খাতাটি, অর্থাৎ variable-গুলোর binding (নাম আর ঘরের সংযোগ)। তাই function তৈরির পরে বাইরে মান বদলালে function বদলানো মানটিই দেখে:

let rate = 5;                              // ডেলিভারি চার্জ, শতাংশে
const fee = (amount) => (amount * rate) / 100;
rate = 10;                                 // function তৈরির পরে বদল
fee(1000);   // 100 — 50 নয়; fee দেখে ঘরটি, তৈরির সময়ের মান নয়

এই আচরণ সুবিধাও, বিপদও। সুবিধা: closure-এর ভেতরে একটি variable বদলালে পরের কলে সেটি মনে থাকে — counter, ব্যালান্স, cache সব এভাবেই কাজ করে। বিপদ: আপনি ভাবছেন একটি মুহূর্তের মান “ছবি তুলে” রাখা হয়েছে, আসলে রাখা হয়েছে ঘরটি — পরে কেউ বদলালে চমক (অংশ ৫ আর ৮)।

makeCounter — প্রতিটি কলে নতুন খাতা

এবার ব্যাংকের টোকেন মেশিনটি কোডে বানাই। makeCounter একটি function factory: প্রতিবার ডাকলে একটি নতুন counter function তৈরি করে দেয়। প্রশ্ন হলো, দুটি counter কি একই count ভাগ করে? ধাপে ধাপে দেখুন:

1function makeCounter(label) {2  let count = 0;3  return () => `${label}-${++count}`;4}5const cash = makeCounter("C");6const loan = makeCounter("L");7cash(); cash();8loan();

এবার তিনটি ধারণা — দুটি স্বাধীন counter, পরে বদলানো মান দেখা, আর গোপন ব্যালান্স — একসাথে চালিয়ে দেখুন। ওয়ালেটের অংশটি পরের অংশে বিস্তারিত।

function makeCounter(label) {
  let count = 0;                          // এই variable closure-এ ধরা থাকবে
  return () => `${label}-${++count}`;
}
const cash = makeCounter("C"), loan = makeCounter("L");
console.log(cash(), cash(), loan(), cash());

let rate = 5;
const fee = (amount) => (amount * rate) / 100;
rate = 10;                                // function তৈরির পরে বদল
console.log(fee(1000));

function makeWallet(balance) {            // parameter-ও খাতায় থাকে, বাইরে থেকে ছোঁয়া যায় না
  return {
    deposit: (t) => (balance += t),
    withdraw: (t) => (t > balance ? "ব্যালান্স কম" : (balance -= t)),
    balance: () => balance,
  };
}
const w = makeWallet(500);
console.log(w.deposit(200), w.withdraw(1000), w.withdraw(300));
console.log(w.balance(), Object.keys(w));

৪ · Private state আর function factory — ওয়ালেট, ছাড় আর rate limiter

উপরের makeWallet একটি গুরুত্বপূর্ণ নকশা দেখায়। bKash বা Nagad-এর মতো একটি মোবাইল ওয়ালেট ভাবুন। ব্যালান্স কেউ সরাসরি লিখে বদলাতে পারে না; বদলানোর একমাত্র পথ নিয়ম মেনে জমা আর তোলা — যেখানে যাচাই হয় ব্যালান্স যথেষ্ট কি না। প্রোগ্রামিংয়ে এই ধারণার নাম encapsulation: ডেটা লুকিয়ে রেখে শুধু নিয়ন্ত্রিত দরজা খোলা রাখা।

Java বা C++-এ এর জন্য আছে private শব্দ। JavaScript-এ বহু বছর এমন কিছু ছিল না — object-এর সব property সবাই দেখতে ও বদলাতে পারত। তখন closure-ই ছিল সত্যিকারের গোপনীয়তার একমাত্র উপায়: variable-টি একটি function-এর খাতায় রাখুন, আর বাইরে দিন শুধু সেই function-গুলো যারা খাতাটি দেখতে পায়। বাইরের কোডের কাছে খাতায় পৌঁছানোর কোনো নাম নেই — তাই কোনো উপায়ও নেই।

পর্ব ২৬-এ class আর #private field দেখবেন। তখন বুঝবেন, দুটি আসলে একই সমস্যার দুটি সমাধান — একটি function-এর পথে, একটি object-এর পথে। এর মজার দার্শনিক দিকটি ভাবনার প্রশ্ন ৪-এ।

Function factory — একটি কাঠামো, অনেক নিয়ম

একটি ই-শপের কথা ভাবুন। ঈদে ১০% ছাড়, নতুন গ্রাহকের জন্য ১৫%, পাইকারি ক্রেতার জন্য ২৫%. প্রতিটির জন্য আলাদা function লেখার বদলে একটি factory লিখুন, যা হার নিয়ে একটি নতুন ছাড়-function বানিয়ে দেয়:

function makeDiscount(percent) {
  return (price) => Math.round(price - (price * percent) / 100);
}
const eidOffer  = makeDiscount(10);
const newbie    = makeDiscount(15);
const wholesale = makeDiscount(25);

eidOffer(1200);     // 1080
wholesale(1200);    // 900
[500, 800].map(newbie);   // [ 425, 680 ]

Rate limiter — N বারের বেশি নয়

একটি OTP পাঠানোর বোতাম ভাবুন — একজন ব্যবহারকারী বারবার চাপলে সার্ভারে শত শত SMS যাবে, খরচও বাড়বে। একটি সরল সমাধান: যে function প্রথম N বার কাজটি করতে দেয়, তারপর থামিয়ে দেয়।

function makeLimiter(limit) {
  let used = 0;                              // closure-এ থাকা গোনা
  return (task) => {
    if (used >= limit) return "সীমা শেষ — পরে চেষ্টা করুন";
    used++;
    return task();
  };
}
const otpLimit = makeLimiter(3);
otpLimit(() => "OTP পাঠানো হলো");   // প্রথম ৩ বার: "OTP পাঠানো হলো"
                                      // ৪র্থ বার থেকে: "সীমা শেষ — পরে চেষ্টা করুন"

বাস্তব rate limiter সাধারণত একটি সময়ের জানালা ধরে গোনে (যেমন “প্রতি মিনিটে ৩ বার”) আর সময় পেরোলে গোনা নতুন করে শুরু করে; debounce আর throttle-এর মতো সময়ভিত্তিক closure পর্ব ৩৬-এ। আর মনে রাখুন: ব্রাউজারের এই সীমা শুধু ভালো ব্যবহারকারীর অভিজ্ঞতার জন্য — আসল সুরক্ষা সবসময় সার্ভারে থাকতে হবে, কারণ ব্রাউজারের কোড যে কেউ বদলাতে পারে।

৫ · লুপের ক্লাসিক প্রশ্ন — প্রতি পুনরাবৃত্তিতে নতুন binding

পর্ব ০৭-এ প্রথম দেখেছিলেন: for (var i = 0; i < 3; i++) setTimeout(() => console.log(i), 10) ছাপে 3 3 3, আর var-এর জায়গায় let দিলে 0 1 2. তখন বলা হয়েছিল, “callback মান নয়, ঘর মনে রাখে।” এখন আপনার হাতে environment record-এর ছবি আছে — তাই এবার দেখা যাক ভাষার মানদণ্ড ঠিক কোন নিয়মে let-কে আলাদা করে।

প্রথমে মূল কথাটি আবার: callback তৈরি হয় লুপ চলার সময়, কিন্তু চলে লুপ শেষ হওয়ার পরে — কারণ setTimeout-এর callback চলে call stack খালি হলে (event loop, পর্ব ৩১)। তখন callback তার খাতায় variable-টির সেই মুহূর্তের মান পড়ে। তাই আসল প্রশ্ন: তিনটি callback-এর জন্মস্থান কি একটিই খাতা, না তিনটি আলাদা খাতা?

• var: var block মানে না; i থাকে ঘিরে থাকা function-এর (বা global-এর) খাতায় — একটিমাত্র binding. তিনটি callback একই খাতা ধরে রাখে।
• let: spec-এর for লুপের নিয়মে (ForBodyEvaluation) প্রতিটি পুনরাবৃত্তির শুরুতে CreatePerIterationEnvironment নামের একটি ধাপ চলে: একটি নতুন খাতা তৈরি হয়, আগের খাতা থেকে j-এর বর্তমান মান কপি করা হয়, তারপর সেই নতুন খাতায় j++ চলে। ফলে প্রতিটি পুনরাবৃত্তির নিজের j — একে বলা যায় per-iteration binding.

1for (var i = 0; i < 3; i++)2  setTimeout(() => console.log(i), 10);3for (let j = 0; j < 3; j++)4  setTimeout(() => console.log(j), 20);

ES2015-এর আগে মানুষ প্রতিটি পুনরাবৃত্তির জন্য নতুন খাতা বানাত একটি function ডেকে — হয় IIFE দিয়ে (পরের অংশ), নয়তো একটি factory দিয়ে: setTimeout(makeLogger(i), 10), যেখানে makeLogger(n) একটি function ফেরত দেয়। দুটোই একই কৌশল: function কল = নতুন খাতা = নতুন binding. let শুধু এই কৌশলটিকে ভাষার ভেতরে বসিয়ে দিয়েছে।

৬ · IIFE আর module pattern — ES module আসার আগের ইতিহাস

২০১৫-র আগে JavaScript-এ let/const-এর block scope ছিল না, ব্রাউজারে module-ও ছিল না। একটি পাতায় দশটি <script> ফাইল থাকলে সবার top-level var একই global খাতায় পড়ত। আপনার var count আর একটি slider লাইব্রেরির var count — একটি অন্যটিকে চুপচাপ মুছে দিত। নতুন scope বানানোর একমাত্র উপায় ছিল একটি function. তাই মানুষ পুরো ফাইলটিকে একটি function-এ মুড়ে সাথে সাথে ডেকে ফেলত — IIFE:

var Cart = (function () {
  var items = [];                         // গোপন — বাইরে থেকে পৌঁছানো যায় না
  function total() {
    return items.reduce(function (s, x) { return s + x.price; }, 0);
  }
  return {                                // বাইরে শুধু এই "public API"
    add: function (item) { items.push(item); },
    total: total
  };
})();

Cart.add({ name: "চা পাতা", price: 180 });
Cart.total();     // 180
Cart.items;       // undefined — items লুকানো

jQuery-র ফাইল খুললে দেখবেন পুরো লাইব্রেরি একটি বিশাল IIFE-এর ভেতরে। Douglas Crockford-এর লেখা আর Yahoo-র YUI লাইব্রেরির ব্লগ এই নকশাকে ব্যাপক জনপ্রিয় করে। পরে এর একটি রূপ “revealing module pattern” নামে পরিচিত হয় — সব function ভেতরে সাধারণভাবে লিখে, শেষে কোনগুলো বাইরে দেখানো হবে তার একটি তালিকা ফেরত দেওয়া। Node.js-এর CommonJS-ও আসলে প্রতিটি ফাইলকে গোপনে একটি function-এ মুড়ে চালায় — সেজন্যই সেখানে top-level var global-এ যায় না (পর্ব ০৭-এর টেবিল মনে করুন)।

আজ আপনার কাছে আছে ES module (import/export, পর্ব ৪৫): প্রতিটি ফাইল নিজেই একটি scope, যা export করা হয়নি তা গোপন। তাই নতুন কোডে IIFE-এর দরকার খুব কম। তবু দুটি জায়গায় এখনো দেখবেন: পুরোনো কোডবেস আর লাইব্রেরি, আর একটি async কাজ সাথে সাথে চালানোর জন্য (async () => { … })(); — যেখানে top-level await ব্যবহার করা যায় না।

৭ · Memoization আর once — closure-এ রাখা cache

একটি ই-কমার্স সাইটে ডেলিভারি চার্জ হিসাব করতে হয় জেলা অনুযায়ী — হয়তো দূরত্ব, কুরিয়ারের হার আর ওজনের একটি ভারী হিসাব। একই সেশনে একজন গ্রাহক ঢাকা বেছে নিলেন, তারপর খুলনা, তারপর আবার ঢাকা। তৃতীয়বার পুরো হিসাব আবার করার দরকার কী? প্রথম ফলটি মনে রাখলেই হয়। একই input-এ একই ফল দেয় এমন function-এর ফল জমিয়ে রাখার এই কৌশলের নাম memoization, আর জমানোর জায়গাটি একটি cache. Cache কোথায় রাখবেন? Closure-এ — যাতে সেটি কলের পর কলে টিকে থাকে, অথচ বাইরের কেউ গোলমাল করতে না পারে।

1function memoize(fn) {2  const cache = new Map();3  return (key) => {4    if (cache.has(key)) return cache.get(key);5    const v = fn(key);         // ভারী হিসাব6    cache.set(key, v);7    return v;8  };9}10const charge = memoize(slowCharge);11charge("Dhaka"); charge("Khulna"); charge("Dhaka");

এবার memoization-এর আসল জাদু দেখুন fibonacci-তে — সাথে লুপের প্রশ্নটি আর once. প্রথম দুই লাইনের timer-এর আউটপুট সবার শেষে আসবে, কারণ timer চলে sync কোড শেষ হওয়ার পরে:

for (var i = 0; i < 3; i++) setTimeout(() => console.log("var", i), 10);
for (let j = 0; j < 3; j++) setTimeout(() => console.log("let", j), 20);

function memoize(fn) {
  const cache = new Map();
  return (n) => {
    if (cache.has(n)) return cache.get(n);
    const result = fn(n);
    cache.set(n, result);
    return result;
  };
}
let calls = 0;
const fib = memoize((n) => { calls++; return n < 2 ? n : fib(n - 1) + fib(n - 2); });
console.log(fib(40), "calls:", calls);

function once(fn) {
  let done = false, result;
  return (...args) => {
    if (!done) { done = true; result = fn(...args); }
    return result;
  };
}
const placeOrder = once((id) => `অর্ডার ${id} জমা হলো`);
console.log(placeOrder(7), "|", placeOrder(8));

৮ · Callback, async আর মেমরি — closure-এর অন্য পিঠ

Event handler আর callback — “মনে রাখা” স্বাভাবিকভাবে

আপনি সম্ভবত না জেনেই closure লিখে আসছেন। একটি বোতামে event listener লাগানোর সময়:

function setupLikeButton(button, postId) {
  let likes = 0;
  button.addEventListener("click", () => {
    likes++;                                     // closure-এ থাকা গোনা
    button.textContent = `👍 ${likes} (post ${postId})`;
  });
}

setupLikeButton এক মুহূর্তে শেষ হয়ে যায়, কিন্তু ক্লিক আসে মিনিট বা ঘণ্টা পরে। তখনও handler likes, button আর postId জানে — কারণ সেগুলো তার জন্মস্থানের খাতায় আছে, আর ব্রাউজার handler-টিকে ধরে রেখেছে বলে খাতাটিও বেঁচে আছে। পাতায় বিশটি পোস্ট থাকলে বিশবার setupLikeButton ডাকা হবে — বিশটি আলাদা খাতা, বিশটি আলাদা গোনা, ঠিক makeCounter-এর মতো। Event-এর বিস্তারিত পর্ব ৩৮-এ।

Async কোডে stale মান

Closure ঘর ধরে রাখে — কিন্তু কোন ঘর? যে ঘর তৈরির মুহূর্তে scope-এ ছিল। Async কোডে এখান থেকে একটি সূক্ষ্ম বাগ আসে, যার নাম stale closure: callback একটি পুরোনো খাতার পুরোনো মান দেখে, অথচ আপনি চেয়েছিলেন “এখনকার” মান।

async function showPrice(productId) {
  const currency = getCurrency();          // এই মুহূর্তের মুদ্রা, ধরা যাক "BDT"
  const price = await fetchPrice(productId);   // ২ সেকেন্ড অপেক্ষা
  render(price, currency);                 // ইতিমধ্যে ব্যবহারকারী USD বেছে নিলেও এখানে "BDT"
}

await-এর পরের অংশ আসলে একটি পরে-চলা callback (পর্ব ৩৪), আর সেটি currency-এর পুরোনো binding দেখে — const বলে সেটি আর কখনো বদলাবে না। সমাধান নির্ভর করে কী চান তার ওপর: অপেক্ষার পরে getCurrency() আবার ডাকুন, বা পুরোনো অনুরোধটি বাতিল করুন (পর্ব ৩৬-এর AbortController). মূল শিক্ষা: পরে চলা কোড যে variable পড়ছে, সেটি তৈরির মুহূর্তের নাকি এখনকার — প্রতিবার ভাবুন।

Memory — closure যা ধরে রাখে, তা মুছতে পারে না

GC শুধু সেই জিনিস মোছে, যেখানে আর পৌঁছানো যায় না (পর্ব ০৫)। একটি দীর্ঘজীবী closure — event handler, setInterval-এর callback, global-এ রাখা cache — তার খাতাকে পৌঁছানো-যায় অবস্থায় রাখে। খাতায় একটি বিশাল array থাকলে সেটিও থেকে যায়:

function setupReport(button) {
  const rows = loadAllRows();              // ধরা যাক ৫ লাখ সারির বিশাল array
  const summary = rows.length + " সারি";
  const debug = () => rows[0];             // rows ব্যবহার করে — কখনো ডাকা হয় না
  button.addEventListener("click", () => console.log(summary));
}

DevTools-এ closure দেখা

Closure অদৃশ্য নয় — DevTools এগুলো সরাসরি দেখায়। Chrome বা Edge-এ Sources প্যানেলে closure-এর ভেতরের একটি লাইনে breakpoint বসান (বা কোডে debugger; লিখুন)। কোড থামলে ডান পাশের Scope অংশে পরপর দেখবেন: Local (এই কলের নিজের খাতা), Closure (makeCounter) (জন্মস্থানের খাতা — এখানে count আর label), Script (top-level let/const), আর Global. এটাই আক্ষরিক অর্থে scope chain-এর ছবি। Console-এ console.dir(cash) লিখে function-টি খুললে ভেতরের [[Scopes]] ঘরেও একই শিকল দেখা যায়। Memory প্যানেলের heap snapshot-এ “Retainers” দেখে বোঝা যায় কোন closure একটি বড় object-কে বাঁচিয়ে রেখেছে — বিস্তারিত পর্ব ৫৩-এ।

৯ · AI-এর যুগে — AI-এর লেখা closure যাচাই করা

AI টুলগুলো closure খুব ভালো লেখে — কারণ ইন্টারনেটে এর কোটি উদাহরণ। সমস্যা হলো, সেই উদাহরণগুলোর বড় অংশ পুরোনো বা খেলনা। তিনটি ফাঁদ বিশেষভাবে চোখে রাখুন।

১. লুপে var. পুরোনো Stack Overflow উত্তর থেকে শেখা মডেল এখনো মাঝে মাঝে for (var i …) লিখে ভেতরে event handler বা timer বসায় — সব বোতাম শেষ index দেখায়।

২. React hook-এ stale closure. React-এর function component প্রতিটি render-এ নতুন করে চলে, তাই প্রতিটি render-এর নিজের খাতা, নিজের count. AI প্রায়ই এমন কোড দেয় (চালানো যায় না, React লাগে):

function Timer() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount(count + 1), 1000);  // count সবসময় 0
    return () => clearInterval(id);
  }, []);                        // খালি dependency: effect শুধু প্রথম render-এ
  return <p>{count}</p>;
}
// প্রত্যাশিত আচরণ: 0 → 1 → 1 → 1 … (আটকে যায়)
// ঠিক রূপ: setCount((c) => c + 1)

৩. চিরকাল বাড়তে থাকা cache. “এই function-টি দ্রুত করো” বললে AI প্রায়ই একটি সীমাহীন Map দিয়ে memoize করে — key হিসেবে user input বা object. ডেমোতে চমৎকার, সার্ভারে কয়েক দিন চললে মেমরি শেষ।

AI-এর লেখা closure হাতে পেলে — যাচাইয়ের চেকলিস্ট

• লুপের ভেতরে তৈরি callback বা handler আছে কি না দেখেছি; লুপ variable let/const দিয়ে, লুপের ভেতরেই ঘোষিত
• প্রতিটি closure কোন কোন বাইরের variable পড়ে, তা চিহ্নিত করেছি — আর সেগুলো পরে বদলালে closure কী দেখবে, ভেবেছি
• await, timer বা event-এর পরে পড়া মান “তৈরির মুহূর্তের” নাকি “এখনকার” হওয়া উচিত, যাচাই করেছি (stale closure)
• React কোডে useEffect/useCallback-এর dependency তালিকা আর functional update দেখেছি
• প্রতিটি cache-এর একটি সীমা বা মোছার নিয়ম আছে; memoize করা function সত্যিই pure
• দীর্ঘজীবী handler বা setInterval কোনো বড় ডেটা বাঁচিয়ে রাখছে না, আর দরকার শেষে সরানো হয়
• “private” দাবি করা ডেটা সত্যিই closure বা #private-এ — শুধু _balance নামের property নয় (নামের আগে আন্ডারস্কোর কিছুই লুকায় না)