জাভাস্ক্রিপ্ট- অ্যারো ফাংশন => কি, কেন, কিভাবে
এবং কখন ব্যবহার করা উচিত না।
Arrow function কে সহজভাবে সংজ্ঞায়িত করতে গেলে বলা যায় আমরা জাভাস্ক্রিপ্ট এ রেগুলার যে ফাংশন লিখি তার সংক্ষিপ্ত রূপ। এর মাধ্যমে আমরা ফাংশন এর সিনট্যাক্স কে আরো ছোট করে ফেলতে পারি। এতে আমাদের বয়লারপ্লেট কোড অনেক কমে যায়। আমরা Arrow function এর বেশ কিছু উদাহরণ দেখব, আশা করি সেগুলো দেখলে জিনিসগুলো আরো পরিষ্কার হবে।
প্রথমেই রেগুলার ফাংশন ব্যবহার করে একটা উদাহরণ দেখা যাক-
এখানে আমরা জাভাস্ক্রিপ্ট এর বিল্ট-ইন map ফাংশন ব্যবহার করে names array এর উপাদান গুলো রিটার্ন করেছি। এই কাজ টা আমরা Arrow function দিয়ে করতে পারি ঠিক এইভাবেঃ
একটু ভালোভাবে লক্ষ্য করলে দেখবেন, এখানে Arrow function এর আর্গুমেন্ট মাত্র একটা (name)। ফাংশন এর আর্গুমেন্ট যদি একটা হয় সেক্ষেত্রে parenthesis তথা ফার্স্ট ব্র্যাকেট ব্যবহার করার প্রয়োজন নেই ।
আরেকটা কথা বলে জেনে রাখা ভাল, Arrow function কিন্তু Anonymous অর্থাৎ এর কোনো নাম দেয়া যাবে না রেগুলার ফাংশন এর মত।
এখন আমরা Arrow function এর একটি মজার ফিচার দেখব,সেটা হচ্ছে এক লাইনেই ফাংশন এর যাবতীয় কাজ শেষ করে ফেলব। কথা না বাড়িয়ে কোড এ চলে যাই,
এটাও সহজ সরল একটা প্রোগ্রাম। ফিল্টার ফাংশন মাধ্যমে যাদের বয়স ১৮ বা তার বেশি তাদের রিটার্ন করেছি, কিন্তু একটু আগে যে বলেছিলাম, ফাংশন এর যাবতীয় কাজ এক লাইন এ করব, সেটার কি হল 😲 , হ্যাঁ, সেটাই দেখব এখনঃ
দেখুন, কত সহজেই আমরা ফাংশন টা লিখে ফেললাম, এখন আপনি বলতে পারেন ফাংশন টা ১৮ এবং তার বেশি বয়স গুলো রিটার্ন করছে তা তো বুঝলাম, কিন্তু রিটার্ন শব্দ টা গেল কোথায়? এটা হচ্ছে implicit রিটার্ন। ফাংশন এর কাজ যদি এক লাইন এর হয় তাহলে আপনাকে কষ্ট করে Explicitly রিটার্ন করার কোনো প্রয়োজন নেই।
এবার , আমরা আরো একটি উদাহরণ এর মাধ্যমে Arrow function এর efficiency বুঝার চেষ্টা করব-
আমরা অনেকেই ফুটবল লীগ দেখে থাকি। তো এখানে একটা “Array of objects” তৈরি করেছি এই ফুটবল লীগ গুলোকে নিয়ে। তারপর জাভাস্ক্রিপ্ট এর ম্যাপ, ফিল্টার এসব বিল্ট ইন ফাংশন ব্যবহার করে লা-লিগা তে আর্জেন্টাইন খেলোয়াড় দের গোলসংখ্যা বের করেছি (নিজে আর্জেন্টিনা সাপোর্টার কিনা 😜)
১২ নম্বর লাইন এ আমরা la_liga টাইপ এর সকল অবজেক্ট গুলোকে রিটার্ন করেছি ফিল্টার ফাংশন ব্যবহার করে। ১৫ নম্বর লাইন এ আমরা la_liga টাইপ অবজেক্ট এর মধ্যে যেগুলো আর্জেন্টাইন প্লেয়ার সেগুলো রিটার্ন করেছি এবং সবশেষে ১৮ নম্বর লাইন এ ম্যাপ ফাংশন ব্যবহার করে আর্জেন্টাইন প্লেয়ার দের গোল সংখ্যা বের করেছি। খুবই মজার।
লক্ষ্য করে দেখুন, ১২,১৫,১৮ নম্বর লাইন গুলোই কোড টির লজিক পার্ট। এছাড়া বাকি কোডগুলো বয়লারপ্লেট টাইপ এর। এখন আমরা দেখব Arrow function ব্যবহার করে কত সুন্দরভাবে এই একই প্রোগ্রাম লিখা যায়ঃ
দেখলেন তো, কত বয়লারপ্লেট কোড আমরা কমিয়ে ফেলেছি Arrow function ব্যবহার করে! 😆
অনেক তো গুণগান গাইলাম Arrow function এর। এবার যে যে জায়গায় এটা ব্যবহার করা উচিত না, তা নিয়ে বলা যাক,
যথারীতি, আমরা কোড এ চলে যাইঃ
বলতে পারেন, এটার আউটপুট কি আসবে? প্রথম দেখায় মনে হতে পারে, আউটপুট আসবে Tamim iqbal. কিন্তু আউটপুট আসলে আসবে undefined undefined. এর কারণ কি?
চলুন, কোড টা ট্রেস করি। এখানে profile নামের একটা অবজেক্ট আছে, এবং তার ভেতর fullName নামের একটা মেথড আছে। এখন, এই মেথড টা রেগুলার ফাংশন ব্যবহার করে ইমপ্লিমেন্ট করলে Tamim iqbal ই প্রিন্ট হত। কেননা সেখানে this পয়েন্ট করত প্রোফাইল অবজেক্ট কে, কিন্তু Arrow function ব্যবহার করাতে এই this পয়েন্ট করছে গ্লোবাল অবজেক্ট কে। একটু খোলাসা করে বলি, Arrow function এ this তার প্যরেন্ট স্কোপ কে পয়েন্ট করে। এখানে profile অবজেক্ট এর প্যরেন্ট কে? অবশ্যই গ্লোবাল অবজেক্ট মানে এইক্ষেত্রে window অবজেক্ট। তাই, এই this, profile অবজেক্ট এর property গুলো ধরতে পারছে না। আমরা বুঝলাম যে সব ক্ষেত্রেই Arrow function ব্যবহার করা সমীচীন নয়।
রেগুলার ফাংশন ব্যবহার করে এর সমাধান করে ফেলিঃ
Arrow function নিয়েই যেহেতু এতক্ষণ বকবক করলাম তাই, এর একটা সুবিধা বলেই আজকের মত শেষ করি (কথায় আছে, শেষ ভাল যার, সব ভাল তার 😉)
কথা না বাড়িয়ে, কোড লিখে ফেলি
এখানে আমরা অবজেক্ট এর ভিতর একটা মেথড এবং সেই মেথড এর ভিতর একটা ফাংশন ব্যবহার করেছি। এখন দুঃখজনক হলেও সত্য ৯ নাম্বার লাইন এর this পয়েন্ট করছে গ্লোবাল অবজেক্ট কে। কিন্তু আমরা চাই পয়েন্ট করুক JS অবজেক্ট কে! এখন তাহলে উপায় কি? 😩
চিন্তার কোনো কারণ এ নাই, আমাদের প্রিয় Arrow function আছে না! 😅 আমরা আগেই বলেছি Arrow function ব্যবহার করলে this পয়েন্ট করে তার প্যরান্ট স্কোপ কে। এক্ষেত্রে প্যরান্ট স্কোপ হল JS object. Arrow function ব্যবার করে উপরের কোড টা লিখে ফেলার চেষ্টা করে ফেলতে পারেন, নয়ত নিচের সল্যুশন টা দেখুনঃ
