আজকে আলোচনা করতে যাচ্ছি “this” কিওয়ার্ড নিয়ে। জাভাস্ক্রিপ্টে একটি মারাত্মক ভয়ের নাম হচ্ছে “this”। এটি খুবই গুরুত্বপূর্ণ একটা টার্মস যার সম্পর্কে পরিষ্কার ধারণা থাকা উচিত বলে আমি মনে করি। শুরুর দিকে এটা নিয়ে প্রায় সবাই একটু কনফিউশনে ভুগে। কারণ এটি এক এক সময় এক এক রকম আউটপুট দেয়। আমাদের বুঝতে হবে কেন এবং কখন কি আউটপুট দেয়। আমি চেষ্টা করবো ব্যাপারটাকে যতটা সম্ভব সহজভাবে লেখার জন্যে যাতে করে এই “this” নিয়ে আজকের পর থেকে কারোর কোন প্রকার কনফিউশন না থাকে এবং কারোর মাথার উপর দিয়ে না যায়।
চলুন একটা উদাহরণ দিয়ে শুরু করা যাকঃ-
function myFunc() {
console.log(this);
}
myFunc();
একটু চিন্তা করুন তো এখানে myFunc() ফাংশনটিকে কে কল করতেছে। যদি এইটা ধরতে পারেন তাহলে myFunc() এর আউটপুট কি হবে সেইটাও বুঝতে পারবেন। একটু চিন্তা করুন সময় নিয়ে।
আশা করি, চিন্তা করেছেন এবং ধরতেও পেরেছেন। যদি না পারেন তাহলে কোন সমস্যা নেই। একটা ব্যাপার সব সময় মাথায় রাখবেন যে “this” এর ভ্যালু কি হবে সেটা নির্ভর করে কোথায় এবং কিভাবে কল হচ্ছে তার উপর ভিত্তি করে। উপরের কোডে myFunc() কে কল করতেছে window অবজেক্ট। কারণ ব্রাউজারে সব কিছু বাই ডিফল্ট window অবজেক্টের আন্ডারে রান হয়। তার মানে হচ্ছে যে যার মাধ্যমে কল হবে “this” তাকে দেখাবে আউটপুট হিসাবে।
window.myFunc();
যেহেতু myFunc() কে window কল করতেছে তাই myFunc() এর ভিতরে থাকা “this” - window এর সব ভ্যালুকে আউটপুট হিসাবে দেখাচ্ছে।
আমরা না অনেক ভাল প্রোগ্রামার। তাই ‘use strict’; মোডে উপরের কোডটি আবার রান করুন এবং দেখুন কি হয়।
এইবার চলুন আরেকটি উদাহরণ দেখিঃ-
let Person = {
name: "Shahan's Diary",
sayName: function() {
console.log(this);
}
};
Person.sayName();
এইবার বলুন তো উপরের কোডটির আউটপুট কি হবে। যারা বলতে পারবেন তাদের জন্যে থাকবে আমার পক্ষ থেকে একটি চকলেট। যদি উপরের বলা কথাগুলা ভালো করে পড়ে থাকেন, বুঝতে কোন অসুবিধা হওয়ার কথা না উপরের কোডের আউটপুট কি হবে। শুধু একটা কথা ভালো করে মনে রাখবেন কোন ফাংশন কল করার সময় ফাংশনের নামের ডটের আগে যে অবজেক্ট নামটা থাকবে তার ভ্যালুই দেখাবে। হ্যাঁ, আমি যদিও অবজেক্টের ভিতরে থাকা ফাংশনকে ফাংশন বলতেছি শুধু বোঝার সুবিধার জন্যে। এটা ফাংশন হবে না, কারণ অবজেক্টের ভিতরে থাকা সব ফাংশনকে বলা হয় মেথড। উপরের কোডের আউটপুট হবে নিচের দেওয়া স্নিপেটের মত।
{name: "Shahan's Diary", sayName: f}
এখন দেখবো কনস্ট্রাক্টর ফাংশনে “this” নিয়ে কিভাবে কাজ করা যায়।
let Person = function(fName, lName) {
this.fName = fName;
this.lName = lName;
this.sayInfo = function() {
return console.log("Hi there, Welcome to " + this.fName + " " + this.lName);
}
};
let person1 = new Person("Shahan's", "Diary");
person1.sayInfo(); // Hi there, Welcome to Shahan's Diary
আশা করি, আপনাদের “this” এর বেসিক ধারণাটা এখন পরিষ্কার হয়েছে। এখন থেকে দেখলেই বুঝবেন যে “this” কি কাজ করছে। হ্যাঁ, এই লেখাটা পড়েই আপনি “this” এর মাস্টার হয়ে যাবেন না। এর আরেকটু অ্যাডভান্সড ব্যবহার রয়েছে। সেটা আপনাদের জন্যে রেখে দিলাম। একটু কষ্ট করে নিজ দায়িত্বে দেখে নিবেন। এরপরেও, যদি মাথার উপর দিয়ে যায় তাহলে কমেন্ট বক্সে কমেন্ট করে উড়াই দিবেন, আমি ধরে নিবো। হ্যাপি কোডিং….