জাভাস্ক্রিপ্ট ফাংশন যত উপায়ে define করা যায়

জাভাস্ক্রিপ্ট ফাংশন খুবই গুরুত্বপুর্ণ একটি বিষয় যা আমাদের সবার জানা উচিৎ। আসলে মজার বিষয় হলো জাভাক্রিপ্টে class বলতে কিছু নেই। ES6 আসার পর যদিও class syntax আনা হয় কিন্তু এটা আসলে synthatic suger (একটু ভিন্নতা আছে কিন্তু সেটা আজ আলোচ্য বিষয় না)।

জাভাস্ক্রিপ্টে ফাংশন আমরা ৪ ভাবে define করা যায়ঃ

1. Function Declaration
2. Function Expression
3. Arrow Function
4. Immediately Invoke Function Expression (IIFE)

Function Declaration

Function Declaration এর আরেক নাম বলা হয় Name Function। এটা আমরা সবসময় ব্যবহার করি, যা শুরু হয় function keyword দিয়ে তারপর আমরা একটা নাম দেই:

function declared() {
  console.log("Hello from function declaration", this);
}

Function Declaration এর একটা বিশেষত্ব হলো এই ফাংশন গুলো Hoisted হয়, মানে হচ্ছে এই ফাংশন আপনার কোডে যেখানেই থাকুক না কেন execute করার সময় তাদের scope এর উপরে নিয়ে যায়। উদাহরণস্বরূপ

declared();
anotherFunc();
function declared() {
  console.log("Hello from function declaration", this);
}
function anotherFunc(){
  console.log("Another function")
}

খেয়াল করলে দেখবেন আমি declared() ফাংশনটাকে invoke করেছি decalre করার আগে। যদিও আমরা এইভাবে লিখেছি কিন্তু execution এর সময় আসলে ব্যাপারটা দাঁড়ায় এভাবেko

function declared() {
  console.log("Hello from function declaration", this);
}
function anotherFunc() {
  console.log("Another function");
}
declared();
anotherFunc();

একে জাভাস্ক্রিপ্টের ভাষায় বলা হয় Hoisting। আরও বিস্তারিত জানতে এই ব্লগ টা পড়তে পারেন।

Function Expression

এটা হচ্ছে কোনো একটা ভ্যারিয়েবলে Anonymous function যদি রাখা হয়। উদাহরণঃ

var funcExpression = function(){
  console.log("hello from function expression", this)
}

এর একটা সমস্যা হচ্ছে এটা আগে declare করা যায় না। কারণ আপনি যখন আগে declare করতে যাবেন তখন জিনিস টা দাঁড়াবে এভাবে

var funcExpression;
funcExpression();
funcExpression = function(){
  console.log("hello from function expression", this)
}

// Result: TypeError: funcExpression is not a function

Hoisting এর সময় যখন ফাংশন invoke হচ্ছে, তখন কিন্তু function define করা নেই। যার কারণে আমরা TypeError পাচ্ছি।

Arrow Function

ES6 এ এই নতুন ধরণের ফাংশন এর পরিচয় করানো হয়, => আছে দেখে এবং অ্যারো এর মত দেখায় এই কারণে একে Arrow Function বলা হয়।

var arrwFunc = () => {
  console.log("hello Arrow Function", this)
}

অন্যান্য ফাংশন এ this এর access থাকে কিন্তু Arrow Function এ this এর access নেই। ES6 এই ফাংশন আসার আগে bind() মেথড ব্যবহার করতে হতো যাতে কোনো unexpected behavior না করে।

Immidiately Invoke Function Expression (IIFE)

এই ফাংশনটা সাথে সাথে invoke হয়ে যায় কিন্তু আপনি আর ব্যবহার করতে পারবেন না। দেখতে অনেকটা এরকম

(function () {
  var unknownVar = 'A var that you will never find';
  console.log(unknownVar);
})();

এর ভিতরে যদি ভ্যারিয়েবল ও থাকে সেটারও অ্যাক্সেস আপনি পাবেন না।