Arrow Functions এ this এর ব্যবহারের নিয়ম

ES6 এর Arrow Functions এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হলো, this এর আচরণ। সাধারণ ফাংশনের তুলনায় Arrow Functions এ this এর আচরণ কিছুটা আলাদা। Arrow Functions এ this এর মান লেক্সিক্যালি নির্ধারিত হয়, অর্থাৎ যে স্কোপে ফাংশনটি ডিফাইন করা হয়, সেই স্কোপের this ভ্যালু Arrow Function এর মধ্যে ব্যবহৃত হবে। সাধারণ ফাংশনে, this ফাংশনটির কলিং কনটেক্সটের উপর নির্ভর করে পরিবর্তিত হয়।

এখানে Arrow Functions এবং সাধারণ ফাংশনের মধ্যে this এর ব্যবহার সম্পর্কিত পার্থক্যগুলো বিশ্লেষণ করা হলো।

1. সাধারণ ফাংশন এবং this এর ব্যবহার

সাধারণ ফাংশন ব্যবহার করার সময়, this শব্দটি ডাইনামিকভাবে কলিং কনটেক্সট অনুসারে নির্ধারিত হয়। এর মানে হলো, যেখান থেকে ফাংশনটি কল করা হচ্ছে, সেখানে this পরিবর্তিত হবে।

উদাহরণ (সাধারণ ফাংশন):

const person = {
  name: "John",
  greet: function() {
    console.log(this.name);  // `this` refers to the `person` object
  }
};

person.greet();  // "John"

এখানে, greet ফাংশনে this person অবজেক্টকে রেফার করে, কারণ এটি person.greet() হিসেবে কল করা হয়েছে।

2. Arrow Function এবং this এর ব্যবহার

Arrow Functions এ this এর মান লেক্সিক্যাল স্কোপিং অনুসরণ করে, অর্থাৎ Arrow Function যেখানে ডিফাইন করা হয়, সেখানে this এর মান নির্ধারিত হয়। এটি সাধারণ ফাংশনের মতো ডাইনামিক নয়, তাই Arrow Function এ this কখনও পরিবর্তিত হয় না। Arrow Function এর this মূলত তার বাইরের স্কোপ থেকে আসা মানকে ধরে রাখে।

উদাহরণ (Arrow Function):

const person = {
  name: "John",
  greet: function() {
    setTimeout(() => {
      console.log(this.name);  // `this` refers to the `person` object due to lexical scoping
    }, 1000);
  }
};

person.greet();  // "John" after 1 second

এখানে, Arrow Function এ this person অবজেক্টের this কে রেফার করছে, কারণ Arrow Function লেক্সিক্যালি সেই this স্কোপের সাথে সম্পর্কিত।

3. this এর ব্যবহার setTimeout এবং setInterval এর সাথে

একটি প্রচলিত সমস্যা যা সাধারন ফাংশনে this ব্যবহারের সময় দেখা দেয় তা হল setTimeout বা setInterval এর মধ্যে this এর আচরণ। সাধারণ ফাংশনে, this setTimeout এর মধ্যে ফাংশন কল করার সময় পরিবর্তিত হতে পারে, কিন্তু Arrow Functions এ this তার বাইরের স্কোপের this ভ্যালুই ধরে রাখে।

উদাহরণ (সাধারণ ফাংশন):

const person = {
  name: "John",
  greet: function() {
    setTimeout(function() {
      console.log(this.name);  // `this` refers to the global object or `undefined` in strict mode
    }, 1000);
  }
};

person.greet();  // undefined or Error: Cannot read property 'name' of undefined

এখানে, setTimeout এর ভিতরের সাধারণ ফাংশনটি this কে ডাইনামিকভাবে আপডেট করে, তাই এটি window (গ্লোবাল অবজেক্ট) বা undefined রেফার করবে, এবং তাতে name প্রপার্টি পাওয়া যাবে না।

উদাহরণ (Arrow Function):

const person = {
  name: "John",
  greet: function() {
    setTimeout(() => {
      console.log(this.name);  // `this` refers to the `person` object
    }, 1000);
  }
};

person.greet();  // "John" after 1 second

এখানে, Arrow Function this এর মান person অবজেক্ট থেকে নেবে, এবং তাই সঠিকভাবে "John" প্রিন্ট হবে।

4. this এর ব্যবহার Callback Functions এ

Arrow Functions this এর আচরণে একাধিক সুবিধা দেয়, বিশেষ করে কলব্যাক ফাংশনের ক্ষেত্রে। সাধারণ ফাংশন ব্যবহারের ক্ষেত্রে, কলব্যাক ফাংশনে this পরিবর্তিত হতে পারে, কিন্তু Arrow Functions এ this এর মান বাইরের স্কোপের সাথে সম্পর্কিত থাকে।

উদাহরণ (Callback Function - সাধারণ ফাংশন):

function Timer() {
  this.seconds = 0;
  setInterval(function() {
    this.seconds++;  // `this` refers to the global object or `undefined` in strict mode
    console.log(this.seconds);
  }, 1000);
}

const timer = new Timer();  // Error: Cannot read property 'seconds' of undefined

এখানে, setInterval এর মধ্যে this এর মান পরিবর্তিত হচ্ছে, তাই this.seconds অ্যাক্সেস করা যাবে না।

উদাহরণ (Callback Function - Arrow Function):

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;  // `this` refers to the `Timer` object
    console.log(this.seconds);
  }, 1000);
}

const timer = new Timer();  // Correctly increments seconds

এখানে, Arrow Function ব্যবহার করা হলে this যথাযথভাবে Timer অবজেক্টের সাথে সম্পর্কিত থাকে, এবং কোড সঠিকভাবে কাজ করবে।

• Arrow Functions এ this এর মান লেক্সিক্যালভাবে নির্ধারিত হয়, অর্থাৎ যেখানে ফাংশনটি ডিফাইন করা হয়, সেখানকার this মান Arrow Function এ ব্যবহৃত হয়।
• সাধারণ ফাংশনে this কলিং কনটেক্সট অনুযায়ী পরিবর্তিত হয়, এবং এটি this কে নতুন স্কোপে প্রোপাগেট করে।
• Arrow Functions এর মাধ্যমে কলব্যাক এবং অ্যাসিঙ্ক্রোনাস কাজের ক্ষেত্রে this এর আচরণ সহজে পরিচালনা করা যায়।

Arrow Functions এর মাধ্যমে কোড আরো পরিষ্কার, সংক্ষিপ্ত এবং উন্নত হয়ে উঠে, বিশেষত যখন ফাংশনের ভিতরে this ব্যবহারের প্রয়োজন হয়।