JavaScript-এ বিভিন্ন ধরণের ফাংশন সম্পর্কে জানুন।

JavaScript নিয়ে আমরা যখন কাজ করি তখন আমরা বিভিন্ন ফাংশন ব্যবহার কিংবা নিজেদের প্রয়োজন অনুযায়ী ফাংশন তৈরী করে থাকি। JavaScript এ বিভিন্ন ধরণের ফাংশন আমরা দেখতে পাই। আজকের এই পোষ্টে আমি আপনাদের বিভিন্ন ধরণের ফাংশন উদাহারণসহ তুলে ধরব।

JavaScript এ ফাংশনের ধরণ (Types of JavaScript functions)

1. Normal/Regular Function
2. Anonymous Function
3. Callback Function
4. Self-executed Function
5. Arrow Function
6. Higher-order Function

১. Normal Function

Normal/Regular function এর সাথে আমরা সবাই পরিচিত যেখানে function কীওয়ার্ডটির সাথে একটি ফাংশনের নাম দিতে হয়। যদি কোন আরগুমেন্ট প্রয়োজন হয় তা সচারচর নিয়মে ডিফাইন করা হয়। যেমন নিচের মত দেখতে একটি NormalRegular Function.

function myFunction(){
    console.log('This is normal function');
}

২. Anonymous Function

JavaScript এর প্রায়ই আমাদের এই টাইপের ফাংশন ব্যবহার করতে হয়। Anonymous Function হচ্ছে এমন ফাংশন যার কোন নাম নেই। অর্থাৎ নামবিহীন ফাংশনকে Anonymous Function বলা হয়। আমরা জানি সাধারণত কোন ফাংশন ডিফাইন করতে হলে ফাংশনের একটি নাম দিতে হয় কিন্ত এই প্রকার ফাংশনে কোন প্রকার নাম না দিয়েই ফাংশন লিখা যায়। নিচের উদাহারণটি দেখলে বিষয়টি পরিষ্কার হয়ে যাবে।

var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function(){
   console.log("Anonymous Function")
})

উপরোক্ত উদাহারণে একটি ফাংশন দেখতে পাচ্ছি যেটির কোন নাম নেই। এই নামবিহীন ফাংশনকে বলা হয় Anonymous Function (নামবিহীন ফাংশন)

৩. Callback Function

সহজ করে বলতে গেলে Callback Function হল, যখন কোন ফাংশনের আরগুমেন্ট হিসেবে একটি ফাংশন পাঠানো হয় তখন মূল ফাংশনটি Execute হওয়ার পর এটি Execute হয় তাই একে Callback Function বলা হয়। 

Callback Function দু'ভাবে লিখা যায়

১. Anonymous Function হিসাবে। 

২. Regular Function হিসাবে।

উপরোক্ত Anonymous Function এর উদাহারণে আমরা যে কোডটি দেখলাম তাতে যে নামবিহীন ফাংশনটি ব্যবহার করা হয়েছে তা addEventListener ফাংশনটির আর্গুমেন্ট হিসেবে পাঠানো হয়েছে। এটি ক্লিক ইভেন্টটি দেখবে এবং যখন ক্লিক করা  হবে তখন উক্ত Anonymous Function টি কল হবে । উদাহারণ দিলে আরো পরিস্খার ধারণা পাওয়া যাবে।

// callback function as anonymous function

var btn1 = document.getElementById('btn1');

btn1.addEventListener('click', function(){
   console.log("Callback Function")
})

// callback function as regular function

var btn2 = document.getElementById('btn2');

function myCallback(){
    console.log("Callback Function")
}
btn2.addEventListener('click', myCallback)

৪. Self-executed Function

যে ফাংশনটি নিজে নিজে execute হয় তাকে বলা হচ্ছে Self-executed function. এটিও একটি anonymous function কিন্তু এটি ডিফাইন করার সাথে সাথে এটি কল করা হয়। লক্ষ্য করলে দেখবেন এটির শেষে () দিয়ে ফাংশনটি কল করানো আছে। অবশ্যই বলে রাখি, Self-executed function কিন্ত রিকার্সিভ ফাংশন না। দু'টি দু'জিনিস। এটি আমরা মূলত কোডের কনফ্লিক্ট এড়াতে ব্যহার করি। টোটাল কোডের wrapper হিসাবে।

(function(){
  //here all your code
})()

৫. Arrow Function

অ্যারো ফাংশন হল ES6 এর একটি ফাংশন। এটি ফাংশন ডেফিনেশনকে আরো সহজ ও ক্লিন করেছে। বিশেষ করে anonymous function লিখার সময় একটি ঝামেলা লাগত। এটি ব্যবহার করা হলে কোড আরো ক্লিক এবং রিডেবল হয়ে উঠে। তবে এটি এখনো সব ব্রাউজার সার্পোট না থাকায় ব্যবহার করার ক্ষেত্রে সতর্ক থাকা উঠিত। তবে মর্ডান সব ব্রাউজারে এটি ব্যবহার করা যাবে।

অ্যারো ফাংশন ছাড়া কোড

btn1.addEventListener('click', function(){
   console.log("Anonymous Function")
})

অ্যারো ফাংশন ব্যবহার করে ৩ লাইনের কোড ১ লাইনে :)

btn1.addEventListener('click', () => console.log("Arrow Function"))

৬. Higher-order Function

জাভাস্ক্রিপ্ট-এ Higher-order Function হল সেই ফাংশন, যে ফাংশন তার আর্গুমেন্ট হিসেবে ফাংশন রিসিভ করে কিংবা ফাংশন কাজ শেষে কোন ফাংশন রিটার্ন করে।

btn1.addEventListener('click', function(){
   console.log("Anonymous Function")
})

উপরোক্ত কোডে addEventListener ফাংশনটি একটি Higher-order Function, যেটি তার আর্গুমেন্ট হিসেবে একটি ফাংশন রিসিভ করেছে।

আশা করছি উপরোক্ত আলোচনা থেকে জাভাস্ক্রিপ্ট এর বিভিন্ন ধরণের ফাংশন সম্পর্কে একটি ধারণা লাভ করতে পেরেছেন। অন্যদের জানার সুবিধার্তে শেয়ার করুন।

JavaScript Functions সম্পর্কে বাংলায় ভিডিও টিউটোরিয়ালটি দেখতে পারেন: https://youtu.be/_6z4STxyBK8