জাভাস্ক্রিপ্ট Closures

Closures হলো JavaScript-এর একটি পাওয়ারফুল কনসেপ্ট, যেটা অনেক সময় নতুন প্রোগ্রামারদের বিভ্রান্ত করে। আজকের এই পোস্টে আমরা Closures কী, কিভাবে কাজ করে, এবং কখন-কেন ব্যবহার করা হয় — সব কিছু সহজ বাংলায় বুঝবো।

🧬 “Closure” শব্দের উৎস কী?

Closure শব্দটি এসেছে functional programming ধারণা থেকে। প্রথমবার ব্যবহৃত হয়েছিল Lisp-এর মত ভাষায়।

ইংরেজি শব্দ “enclosure” মানে: ঘিরে ফেলা বা আবদ্ধ করে রাখা

Closure মানে: এমন একটি ফাংশন যা তার ঘিরে থাকা (enclosed) scope এর ডেটা লক্ষ্য রাখে (preserve) এবং পরবর্তীতে ব্যবহার করতে পারে

তাই, যখন বলা হয় “একটা ফাংশন অন্য scope এর ভেরিয়েবল enclosed করে রেখেছে”, তখন সেখান থেকেই এসেছে “closure”।

🧠 Closures কী?

Closure হলো একটি ফাংশন যা তার নিজের lexical scope-এর বাইরে থেকেও ভেরিয়েবল অ্যাক্সেস করতে পারে।

আরও সহজভাবে বললে, যখন একটি ফাংশন তৈরি হয় অন্য আরেকটি ফাংশনের ভিতরে, এবং সেই ভিতরের ফাংশন বাইরের ফাংশনের ভেরিয়েবল মনে রাখতে পারে — তখন একে closure বলে।

🧪 উদাহরণ দিয়ে বুঝি

function outerFunction() {
  let outerVariable = "আমি বাইরের ফাংশনের ভেরিয়েবল";

  function innerFunction() {
    console.log(outerVariable); // এটা কাজ করবে!
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // আউটপুট: আমি বাইরের ফাংশনের ভেরিয়েবল

👉 এখানে innerFunction() হচ্ছে একটি closure, কারণ সে outerVariable-কে মনে রাখতে পারছে, যদিও outerFunction() ইতিমধ্যে শেষ হয়ে গেছে।

🧠 Closures কীভাবে কাজ করে?

function outer() {
  let message = "Hello from outer";

  function inner() {
    console.log(message); // 👈 এই access টা closure
  }

  return inner;
}

const myFunc = outer(); // outer() call হয়েছে
myFunc(); // কিন্তু তারপরও inner() ভিতরের ভেরিয়েবল মনে রাখছে

• এখানে inner() ফাংশনটি “enclosed” করে রেখেছে outer() এর ভিতরের ভেরিয়েবল message-কে

• যদিও outer() ফাংশন execution শেষ করে ফেলেছে, তারপরও তার scope টি জীবিত থাকে কারণ inner() ফাংশনের reference এখনো আছে

• 👉 এই enclosing behavior ই হলো closure — অর্থাৎ “বাইরের ভেরিয়েবল ঘিরে রাখা”।

📦 Closures এর ব্যবহার কোথায় হয়?

Closures ব্যবহার হয় অনেক জায়গায়:

✅ ১. ডেটা প্রাইভেসি বা এনক্যাপসুলেশন

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

👉 এখানে count ভেরিয়েবলটি বাইরের থেকে সরাসরি অ্যাক্সেস করা যায় না — একমাত্র closure ফাংশনের মাধ্যমেই এটি ম্যানিপুলেট করা যায়।

✅ ২. Callback এবং asynchronous কোডে

function delayedGreeting(name) {
  setTimeout(function () {
    console.log("Hello, " + name);
  }, 1000);
}

delayedGreeting("রাহুল");

👉 setTimeout এর ভেতরের ফাংশন name ভেরিয়েবল মনে রাখছে, যা closure-এর মাধ্যমে সম্ভব।

✅ ৩. Event Handlers

function createButtonHandler(text) {
  return function () {
    console.log("Button clicked: " + text);
  };
}

const handler = createButtonHandler("Submit");
document.querySelector("button").addEventListener("click", handler);

🤔 কেন Closure গুরুত্বপূর্ণ?

• ডেটা লুকিয়ে রাখা যায় (প্রাইভেট ভেরিয়েবল)
• মেমোরি-efficient কোড লেখা যায়
• জাভাস্ক্রিপ্ট-এর asynchronous behavior বুঝতে সাহায্য করে
• functional programming pattern সহজ হয়

🔍 Practical Example: Filtering Logic with Closure

JavaScript Closure কেবল থিওরির মধ্যেই সীমাবদ্ধ নয় — বাস্তব প্রয়োগে, বিশেষ করে ফিল্টারিং বা সার্চের সময় এটি খুবই কার্যকর।

ধরো তুমি কোনো টেবিল বা ডেটাসেট থেকে ডায়নামিকভাবে ডেটা ফিল্টার করছো — সেখানে Closures আপনাকে context ধরে রাখতে সাহায্য করে।

🎯 উদাহরণ: Closure-based Filtering Function

const handleFilterApply = (column, operator, value) => {
  let filtered = [...rows]; // rows হলো মূল ডেটা

  if (operator === "contains") {
    filtered = filtered.filter((row) => {
      return row[column]
        ?.toString()
        .toLowerCase()
        .includes(value.toString().toLowerCase());
    });
  }

  // অন্যান্য operator গুলোও একইভাবে কাজ করে
  if (operator === "equals") {
    filtered = filtered.filter((row) => row[column] === value);
  }

  setFilteredRows(filtered); // নতুন ফলাফল সেভ করি
};

🔍 এখানে Closure কোথায় হচ্ছে?

filtered.filter((row) => {
  return row[column].toLowerCase().includes(value.toLowerCase());
});

এখানে row => {…} এই কলব্যাক ফাংশনটি হলো একটি closure, কারণ এটি বাইরে থাকা তিনটি ভেরিয়েবল ব্যবহার করছে:

column

value

filtered (যদিও shadowed হতে পারে)

👉 এই ভেরিয়েবলগুলো handleFilterApply ফাংশনের স্কোপে তৈরি হয়েছে। কিন্তু কলব্যাক ফাংশন এগুলোর রেফারেন্স retain করছে।

এটাই Closure — একটি ফাংশন তার বাইরের স্কোপের ভেরিয়েবলকে মনে রাখতে পারা।

❗ যদি Closure না থাকতো?

Closures না থাকলে এই কলব্যাক ফাংশনের মধ্যে column বা value undefined হয়ে যেত, কারণ সেগুলো তার নিজের স্কোপে নেই।

তখন প্রতিটি কলব্যাক ফাংশনে আলাদা করে সেই মান পাঠাতে হতো বা global করে রাখতে হতো — যা:

1. কোড জটিল করে তুলতো

2. ডেটা লিক এবং ভুল মান ফিল্টার হওয়ার ঝুঁকি বাড়াতো

⚠️ সতর্কতা

Closures ভালোভাবে না বুঝে ব্যবহার করলে মেমোরি লিক হতে পারে। কারণ, ফাংশন তার scope-এর রেফারেন্স ধরে রাখে। অতএব, অপ্রয়োজনীয় ক্লোজার এড়িয়ে চলাই উত্তম।

JavaScript Closures শুধু থিওরি বা সাধারণ উদাহরণের মধ্যে সীমাবদ্ধ না — জনপ্রিয় লাইব্রেরি যেমন React, Vue, Angular — এইগুলোর গভীরে Closures ব্যাপকভাবে ব্যবহৃত হয়।

নিচে আমি তিনটি লাইব্রেরিতেই Closures কিভাবে কাজ করে, কেন দরকার পড়ে, এবং কীভাবে তা ব্যবহার করা হয় — সেগুলো সহজ বাংলায় উদাহরণসহ ব্যাখ্যা করছি।

🔁 Closures in React.js

React-এর function component আর hooks ব্যবহার করে যখন আপনি state বা event handler তৈরি করেন, সেখানে Closures প্রকটভাবে কাজ করে।

🎯 উদাহরণ:

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log("Clicked count:", count);
    setCount(count + 1);
  };

  return <button onClick={handleClick}>Click me</button>;
}

👉 এখানে handleClick একটি closure — কারণ এটি count variable-কে preserve করে রেখেছে, যেটা আসলে function component-এর বাইরে নেই, কিন্তু তারপরও access করতে পারছে।

🧠 React Closure Trap (Common Bug)

Closures কখনো কখনো সমস্যা করে, বিশেষ করে asynchronous কোডে:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log("Count after delay:", count); // এখানে পুরানো count আসে
  }, 3000);
}, []);

সমস্যা: এখানে count এর পুরনো value ধরে রাখে, কারণ closure পুরানো context-এর value ধরে রেখেছে।

✅ সমাধান:

useEffect(() => {
  const timer = setTimeout(() => {
    setCount((prev) => {
      console.log("Updated count:", prev);
      return prev + 1;
    });
  }, 3000);
}, []);

🔁 Closures in Vue.js

Vue 2/3 উভয় ভার্সনে Closures ব্যবহার হয়, বিশেষ করে methods ও computed properties-এ।

🎯 উদাহরণ (Vue 2):

export default {
  data() {
    return {
      name: "Yasir",
    };
  },
  methods: {
    greet() {
      return () => {
        console.log("Hello, " + this.name);
      };
    },
  },
  mounted() {
    const sayHello = this.greet();
    sayHello(); // Hello, Yasir
  },
};

👉 greet() ফাংশনের ভিতরে return করা arrow function একটি closure — যা this.name মনে রাখতে পারে, এমনকি অন্য জায়গায় কল করলেও।

Vue 3 Composition API:

import { ref, onMounted } from "vue";

export default {
  setup() {
    const count = ref(0);

    const logCount = () => {
      console.log("Count is:", count.value);
    };

    onMounted(() => {
      setTimeout(logCount, 1000); // closure count.value ধরে রাখে
    });

    return { count };
  },
};

🔁 Closures in Angular

Angular মূলত class-based framework, কিন্তু closures এখানে callback, RxJS stream, বা service function এর মাধ্যমে ব্যবহৃত হয়।

🎯 উদাহরণ:

export class AppComponent {
  name = "Yasir";

  ngOnInit() {
    const greet = () => {
      console.log("Hello, " + this.name);
    };

    setTimeout(greet, 2000); // Closure keeps access to this.name
  }
}

👉 এখানে greet ফাংশন একটি closure — কারণ এটি this.name অ্যাক্সেস করতে পারছে, যদিও পরে এক্সিকিউট হচ্ছে।

RxJS-এ Closure:

this.userService.getUsers().subscribe((users) => {
  console.log("User count:", users.length);
});

👉 এখানে users => {...} একটি closure, কারণ এটি users এবং তার context মনে রাখে।

🧾 উপসংহার

❓ যদি JavaScript-এ Closure না থাকতো, তাহলে কী হতো?

Closures না থাকলে JavaScript:

• ভেরিয়েবল preserve করতে পারতো না
• Async (setTimeout, promises, events) এর সময় পুরানো context রাখতে পারতো না
• Function-scoped privacy বা encapsulation তৈরি করা যেত না
• Higher-order functions (যে ফাংশন ফাংশন return করে বা নেয়) ব্যবহার করা অসম্ভব হতো

🔥 Closure ছাড়া কোড লিখলে কী সমস্যা হয়?

Closures না থাকলে function-এর বাইরে তৈরি হওয়া ভেরিয়েবল গুলোর access হারিয়ে যেত একবার execution শেষ হলে।

✅ Closure থাকলে:

function makeCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

❌ Closure না থাকলে (hypothetically):

function makeCounter() {
  let count = 0;

  function inner() {
    count++; // ERROR: count is gone!
    return count;
  }

  return inner;
}

const counter = makeCounter();
console.log(counter()); // ❌ Error: count is not defined

👉 কারণ count ফাংশন তৈরি হওয়ার পর আর বাঁচিয়ে রাখা যেত না।

🤖 Closure ছাড়া কি JavaScript চলতো?

হ্যাঁ, চলতে পারতো, কিন্তু:

👉 অর্থাৎ modern JS pattern, functional composition, async code — সবকিছু হারিয়ে যেত বা ভীষণ জটিল হতো।

🎭 Closure-এর কোনো “dark side” আছে?

Closure দারুণ উপকারী, কিন্তু কিছু চ্যালেঞ্জ বা “dark edge” আছে:

1. 🧠 ভুলভাবে ব্যবহার করলে পুরাতন ভেরিয়েবল থেকে যায়

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 5 5 5 5 5 — কারণ closure সবগুলোতেই একই i ধরে রাখে

✅ Fix: let ব্যবহার করো (block scoped), না হয় IIFE বা factory function।

2. 🧵 Memory Leak

Closure যে scope ধরে রাখে, সেটা খুব বেশি reference হলে Garbage Collector সেটা পরিষ্কার করতে পারে না।

function createHeavyClosure() {
  let bigData = new Array(1000000).fill("data");

  return function () {
    console.log(bigData[0]);
  };
}

👉 এই bigData ক্লোজার না থাকলে এক্সিকিউশনের পর মেমোরি থেকে চলে যেত।

3. 🧩 Debug করা কঠিন

Closures async callback এ কাজ করলে অনেক সময় বুঝতেই কষ্ট হয় কোন context থেকে variable আসছে।

✅ Closure ছাড়াও কি privacy বা state করা যায়?

হ্যাঁ, করা যায় — যেমন class ব্যবহার করে:

class Counter {
  #count = 0;

  increment() {
    return ++this.#count;
  }
}

const c = new Counter();
console.log(c.increment()); // 1

👉 কিন্তু এটা ES6+ এর সুবিধা। এর আগে closure ছাড়া কোন উপায়ই ছিল না।

🧾 উপসংহার

Closures ছাড়া JavaScript অসম্পূর্ণ।
এটা না থাকলে:

• আপনি async/functional pattern ব্যবহার করতে পারতেন না
• ভেরিয়েবল প্রাইভেসি তৈরি করা যেত না
• callback/context জটিল হয়ে যেত

🔥 Closure না থাকলে:

• Web frameworks যেমন React, Vue কাজ করতো না
• Promise, async-await ভেঙে যেত
• Modern tooling অসম্ভব হতো

🎯 তাই closure এর দরকার হয়, কারণ এটা:

• Context সংরক্ষণ করে
• Functional programming সহজ করে
• Web development এর modern pattern গুলোর ভিত্তি গড়ে দেয়

🔁 ১. Callback – Closures ছাড়া সম্ভব নয় কেন?

✅ কী ঘটে Closures দিয়ে:

function greet(name) {
  return function () {
    console.log("Hello, " + name);
  };
}

const sayHi = greet("Yasir");
sayHi(); // Hello, Yasir

এখানে sayHi হলো callback, এবং সে name ভেরিয়েবল ধরে রেখেছে — এটা closure ছাড়া সম্ভব নয়।

❌ Closure ছাড়া করতে চাইলে:

var globalName;

function greet(name) {
  globalName = name;
  return function () {
    console.log("Hello, " + globalName);
  };
}

সমস্যা:

• একই সময়ে একাধিক call হলে global var ওভাররাইট হয়ে যাবে
• ডেটা লিক হতে পারে
• reusability কমে যাবে

📌 Closures ছাড়াই করলে “global variable collision” হবে — যা বড় অ্যাপ্লিকেশনে ডেটা নিরাপত্তার দিক থেকে ভয়াবহ।

🖱 ২. Event Handler – Closures ছাড়া সম্ভব নয় কেন?

✅ Closures দিয়ে:

function registerClickLogger(buttonId) {
  let clicks = 0;
  document.getElementById(buttonId).addEventListener("click", () => {
    clicks++;
    console.log(`${buttonId} clicked ${clicks} times`);
  });
}

👉 এখানে clicks variable প্রতিটি ইভেন্ট হ্যান্ডলারে প্রাইভেট এবং আলাদা থাকে।

❌ Closure ছাড়া করলে:

let globalClicks = 0;

function handler() {
  globalClicks++;
  console.log("Clicked", globalClicks);
}

সমস্যা:

• সব ইভেন্ট একই কাউন্টার শেয়ার করবে
• অনেক event থাকলে conflict বা mixup হবে
• ব্যবহারে জটিলতা বাড়বে

🔐 ৩. Encapsulation – Closures ছাড়া ডেটা লুকানো সম্ভব না

✅ Closures দিয়ে:

function SecretHolder() {
  let secret = "Top Secret";

  return {
    reveal() {
      return secret;
    },
  };
}

👉 secret শুধু reveal() থেকেই অ্যাক্সেসযোগ্য — বাইরের কেউ সরাসরি access করতে পারে না।

❌ Closure ছাড়া করলে:

function SecretHolder() {
  this.secret = "Top Secret";
}
const obj = new SecretHolder();
console.log(obj.secret); // ❌ anyone can read

সমস্যা:

• ডেটা লুকিয়ে রাখা যায় না
• API design insecure হয়
• accidental overwrite সম্ভব

⚡ ৪. Memoization – Closures ছাড়া efficient cache সম্ভব না

✅ Closures দিয়ে:

function memoize() {
  const cache = {};

  return function (x) {
    if (cache[x]) return cache[x];
    const result = expensiveFunction(x);
    cache[x] = result;
    return result;
  };
}

👉 এখানে cache শুধু ওই ফাংশনের ভিতরে থাকে — বাইরের কেউ modify করতে পারে না।

❌ Closure ছাড়া করলে:

const cache = {};

function calc(x) {
  if (cache[x]) return cache[x];
  cache[x] = x * x;
  return cache[x];
}

সমস্যা:

• গ্লোবাল cache → অন্য ফাংশনেও সমস্যা
• reusable নয়
• memory leak হতে পারে

➗ ৫. Currying – Closures ছাড়া ফাংশন চেইনিং সম্ভব না

✅ Closures দিয়ে:

function add(a) {
  return function (b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(10)); // 15

👉 এখানে a ভেরিয়েবল add5() এর মধ্যে মনে রাখা হচ্ছে — এটাই closure।

❌ Closure ছাড়া করলে:

function add(a, b) {
  return a + b;
}

সমস্যা:

• Currying বা partial application সম্ভব নয়
• Functional style coding সীমিত
• Composition pattern support পাওয়া যাবে না

🧾 সংক্ষিপ্ত উপসংহার:

🎯 শেষ কথা:

Closures ছাড়া JavaScript চলবে না বললেও ভুল হবে না।
Closures আমাদেরকে modular, reusable, memory-safe এবং async-friendly কোড লেখার মূল অস্ত্র।

একটি জনপ্রিয় ইন্টারভিউ প্রশ্ন

🔍 Closures & var vs let — কী পার্থক্য?

১. var:

• var হলো function-scoped (বা global-scoped যদি ফাংশনের বাইরে ডিফাইন করা হয়)
• এর মানে হলো, var ভেরিয়েবল লুপের সকল iteration এ একই স্কোপ শেয়ার করে
• এজন্য closure যখন var ভেরিয়েবলকে ধরে রাখে, তখন একই ভেরিয়েবলটি সব callback/fn এর মধ্যে ভাগাভাগি হয়

২. let:

• let হলো block-scoped — যেমন for লুপ, if ব্লক ইত্যাদির ভিতরে নতুন স্কোপ তৈরি করে
• অর্থাৎ, প্রতি iteration এ আলাদা আলাদা let ভেরিয়েবল তৈরি হয়
• Closure তখন আলাদা আলাদা কপি ধরে রাখে, তাই প্রত্যেক callback আলাদা মান পায়

উদাহরণ দিয়ে দেখো:

for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log("var:", i);
  }, 100);
}
// Output: var: 3 var: 3 var: 3

• কারণ: সব callback একই i ধরে রেখেছে, যেটা loop শেষ হওয়ার পরে 3

for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log("let:", i);
  }, 100);
}
// Output: let: 0 let: 1 let: 2

• কারণ: let প্রতিটি iteration এ আলাদা ভেরিয়েবল তৈরি করে, তাই closure আলাদা মান ধরে রাখে

কেন এই পার্থক্য?

• Closure কাজ করে lexical scope এর উপর।
• var এক ফাংশনের স্কোপ, তাই loop variable একটাই হয় সব iteration-এ
• let নতুন block scope তৈরি করে, তাই closure-র জন্য আলাদা আলাদা ভেরিয়েবল তৈরি হয়

🎯 সংক্ষেপে:

🔔 তাই JavaScript লুপে closure এর সাথে var এর বদলে let ব্যবহার করাই best practice!

Typical Closure Questions and How to Answer Them

• Question 1: What is a Closure in JavaScript?

How to Answer:

• Begin by defining a closure: A closure in JavaScript is when a function retains access to its lexical scope even when that function is executed outside of its original scope. Then, provide a simple example, like the createCounter function from a previous chapter, to illustrate the concept.

• Question 2: Can Closures Be Used for Data Privacy?

How to Answer:

• Affirm that closures are a great tool for data privacy in JavaScript. Use the module pattern as an example, where you return an object with methods to interact with private variables, without exposing the variables themselves.

• Question 3: How Do Closures Work with Asynchronous Code?

How to Answer:

• Explain that closures are very useful in asynchronous code, especially in callbacks and promises, as they allow the callback function to access the scope in which it was declared. Provide an example of using closures in an fetch request or with setTimeout.

• Question 4: Describe a Scenario Where Closures Might Be Preferable to Global Variables

How to Answer:

• Discuss the benefits of closures in avoiding global variables, which can lead to code conflicts and security issues. Use an example like encapsulating functionality within a function to maintain state between function calls, without polluting the global namespace.

• Question 5: How Do Closures Work in Loops, Especially with var and let?

How to Answer:

• Explain that var shares the same variable across loop iterations, leading to closures capturing the last value of the variable. let creates a new binding for each iteration, allowing each closure within the loop to capture a unique copy of the loop variable. This difference is crucial for ensuring closures within loops behave as expected.

• Question 6: How Are Closures Used in Functional Programming?

How to Answer:

• Closures are a cornerstone of functional programming in JavaScript, particularly in higher-order functions and currying. Explain how closures enable functions to be returned from other functions with “remembered” environments.

Common Misconceptions Debunked:

• Myth 1: Closures Are Functions Returning Functions

Example:

function sayAlex() {
  console.log("alex");
}
function nameGenerator() {
  return sayAlex;
}

var myName = nameGenerator();
myName();

Reality: Here, nameGenerator returns the function sayAlex, but there’s no closure because nothing is closed over the function. A closure involves a function retaining access to its lexical scope, not just returning another function.

• Myth 2: Closures Are About Functions Remembering Their Own Variable Values

Example:

function nameGenerator() {
  var name = "alex";
  function sayAlex() {
    console.log(name);
  }

  name = "jane";
  return sayAlex;
}

var myName = nameGenerator();
myName(); // Logs 'jane'

Reality: This example demonstrates a closure. The function sayAlex closes over the variable name, not its value at the time of definition. The closure retains a reference to the variable, which is why it logs ‘jane’ instead of ‘alex’.

• Myth 3: You Can Only Create a Closure with a Function Expression

Reality: Closures can be formed with both function declarations and expressions. The defining characteristic of a closure is its ability to access variables from an outer function’s scope, regardless of how the function was defined.

• Myth 4: Closures Are Complex and Rarely Needed

Reality: Closures are a fundamental part of JavaScript, essential in many common programming scenarios. They are frequently used in:

1. Event Handlers: To remember the state of certain elements.

2. Callbacks: Especially in asynchronous operations.

3. Modules: To create private variables and functions.

4. Memoization: Storing the results of expensive function calls.

5. Libraries/Frameworks: Many JavaScript libraries use closures.

6. Bundlers like Webpack: To manage module references.