জাভাস্ক্রিপ্টে অ্যারো ফাংশন ইভেন্ট হ্যান্ডলারে this এর ত্রুটি

সম্প্রতি সাধারণ ফাংশনের পরিবর্তে সর্বত্র অ্যারো ফাংশন ব্যবহার করার প্রবণতা তৈরি হয়েছে। যাইহোক, এই ফাংশনগুলির একটি অসুবিধা আছে - তারা this সংরক্ষণ করে না। আসুন দেখি, এটির কারণে আমরা কোন সমস্যার সম্মুখীন হতে পারি।

ধরুন আমাদের একটি বাটন আছে:

<button>text</button>

ভেরিয়েবলে এই বাটনের রেফারেন্স পাওয়া যাক:

let button = document.querySelector('button');

একটি অ্যারো ফাংশন ব্যবহার করে বাটনে একটি ইভেন্ট হ্যান্ডলার যোগ করা যাক:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

এখানেই আমাদের জন্য একটি অবাক করা বিষয় রয়েছে: অ্যারো ফাংশনের মধ্যে this সেই এলিমেন্টকে নির্দেশ করবে না যেখানে ইভেন্টটি ঘটেছে।

দেখি এটির জন্য আমরা কি করতে পারি।

প্রথম সমাধান

this ব্যবহার না করে, ইভেন্টের সাথে সংযুক্ত ভেরিয়েবল ব্যবহার করা যেতে পারে:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

দ্বিতীয় সমাধান

event.target এর মাধ্যমে ইভেন্টের সাথে সংযুক্ত এলিমেন্ট পাওয়া যেতে পারে:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

তৃতীয় সমাধান

অ্যারো ফাংশন ব্যবহার না করে, একটি সাধারণ ফাংশন ব্যবহার করা যেতে পারে:

button.addEventListener('click', function() {
	console.log(this.textContent);
});