Traditional Function এর সাথে Arrow Function এর পার্থক্য

Arrow Functions - জাভাস্ক্রিপ্ট ইএস৬ (ES6) - Web Development

306

ES6 এর Arrow Functions এবং Traditional Functions (পূর্বের function কিওয়ার্ড দিয়ে ডিফাইন করা ফাংশন) মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে। এই পার্থক্যগুলো syntax, this কনটেক্সট, এবং arguments এর ব্যবহারসহ অন্যান্য বিষয়গুলোকে প্রভাবিত করে। নিচে Arrow Function এবং Traditional Function এর মধ্যে প্রধান পার্থক্যগুলো বিস্তারিতভাবে আলোচনা করা হলো।


1. সিনট্যাক্স (Syntax)

Traditional Function:

function greet(name) {
  return `Hello, ${name}`;
}

এখানে function কিওয়ার্ড দিয়ে ফাংশন ডিফাইন করা হচ্ছে।

Arrow Function:

const greet = (name) => {
  return `Hello, ${name}`;
};

Arrow Function এর সিনট্যাক্স বেশ সংক্ষিপ্ত। এখানে function কিওয়ার্ড নেই এবং আর্গুমেন্টের পর সরাসরি => চিহ্ন ব্যবহার করা হয়েছে। একটি একক এক্সপ্রেশন থাকলে {} এবং return কিওয়ার্ড ছাড়াও Arrow Function ব্যবহার করা যায়:

const greet = (name) => `Hello, ${name}`;

2. this কনটেক্সট (Context of this)

Traditional Function:

this এর মান ফাংশন কিভাবে কল করা হয় তার উপর নির্ভর করে। সাধারণভাবে, this অবজেক্টের কনটেক্সটে পরিবর্তিত হয়।

function greet() {
  console.log(this);  // `this` refers to the context of function call
}
greet();  // `this` refers to the global object (in browser: window)

যদি এটি একটি অবজেক্টের মধ্যে কল করা হয়, তবে this ওই অবজেক্টকেই রেফার করবে।

const person = {
  name: "John",
  greet: function() {
    console.log(this.name);
  }
};
person.greet();  // "John"

Arrow Function:

Arrow Functions এ this এর মান lexical scoping অনুসরণ করে, অর্থাৎ যেখানে Arrow Function তৈরি হয়, সেখানকার this কে রেফার করবে। Arrow Function তার this ধারণ করে, যা বাইরের ফাংশন বা অবজেক্টের this রেফার করে।

const person = {
  name: "John",
  greet: () => {
    console.log(this.name);  // `this` doesn't refer to the person object
  }
};
person.greet();  // undefined (because `this` refers to the global object, not the person)

এখানে, Arrow Function এর this গ্লোবাল স্কোপের this কে রেফার করছে, কারণ Arrow Function তার বাইরের স্কোপ থেকে this পান।


3. arguments অবজেক্ট

Traditional Function:

Traditional Function এর মধ্যে একটি arguments অবজেক্ট থাকে, যা সেই ফাংশনের সমস্ত আর্গুমেন্ট ধারণ করে (এটা এক ধরনের "pseudo-array")। এটি প্যারামিটার হিসেবে সরাসরি পাঠানো যেকোনো আর্গুমেন্টে অ্যাক্সেস দেয়।

function sum() {
  console.log(arguments);  // Array-like object of all arguments
  return Array.from(arguments).reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3));  // 6

এখানে, arguments অবজেক্ট সব প্যারামিটার সম্বলিত একটি আকারহীন অ্যারে প্রদান করে।

Arrow Function:

Arrow Functions এর মধ্যে arguments অবজেক্ট থাকে না। আপনি যদি arguments ব্যবহার করতে চান, তাহলে আপনাকে Traditional Function ব্যবহার করতে হবে।

const sum = () => {
  console.log(arguments);  // Error: arguments is not defined
};
sum(1, 2, 3);

এখানে, Arrow Function এ arguments ব্যবহার করা সম্ভব নয়, কারণ এটি lexical scoping অনুসরণ করে এবং arguments অ্যাক্সেস করা যায় না।


4. Constructor Function (Constructor হিসেবে ব্যবহার)

Traditional Function:

Traditional Function গুলোকে constructor function হিসেবে ব্যবহার করা যায়। new কিওয়ার্ড দিয়ে ফাংশনকে কল করলে এটি একটি নতুন অবজেক্ট তৈরি করবে।

function Person(name) {
  this.name = name;
}
const john = new Person("John");
console.log(john.name);  // "John"

Arrow Function:

Arrow Functions কনস্ট্রাক্টর ফাংশন হিসেবে ব্যবহার করা যাবে না। যদি new কিওয়ার্ড ব্যবহার করা হয়, তবে ত্রুটি (error) হবে।

const Person = (name) => {
  this.name = name;
};

const john = new Person("John");  // Error: Person is not a constructor

এখানে, Arrow Function কনস্ট্রাক্টর ফাংশন হিসেবে কাজ করবে না, কারণ এর this বাইরের স্কোপের this কে রেফার করে, নতুন অবজেক্ট তৈরি করার সময় নিজস্ব this কনটেক্সট তৈরি হয় না।


5. Return Value (রিটার্ন ভ্যালু)

Traditional Function:

সাধারণ function ডিফাইন করলে, যদি ফাংশনের মধ্যে একাধিক স্টেটমেন্ট থাকে, তবে return কিওয়ার্ড ব্যবহার করতে হবে:

function multiply(a, b) {
  return a * b;
}

Arrow Function:

Arrow Function এর মধ্যে যদি একক এক্সপ্রেশন থাকে, তবে return কিওয়ার্ড ছাড়াই সেই এক্সপ্রেশন রিটার্ন হয়ে যায়:

const multiply = (a, b) => a * b;

এখানে, return কিওয়ার্ড প্রয়োজন নেই কারণ Arrow Function এক্সপ্রেশনকে সরাসরি রিটার্ন করে।


পার্থক্য সারাংশ

বৈশিষ্ট্যTraditional FunctionArrow Function
সিনট্যাক্সfunction কিওয়ার্ড দিয়ে ফাংশন ডিফাইন করা হয়=> চিহ্ন দিয়ে ফাংশন ডিফাইন করা হয়
this কনটেক্সটফাংশন কিভাবে কল করা হবে তার উপর নির্ভর করেবাইরের স্কোপের this কে রেফার করে (lexical scoping)
arguments অবজেক্টথাকে এবং আর্গুমেন্ট গুলি অ্যাক্সেস করা যায়থাকে না, আর্গুমেন্ট ব্যবহার করতে হলে ঐ ফাংশনের মধ্যে অন্য উপায় প্রয়োজন
Constructor Functionnew কিওয়ার্ড দিয়ে নতুন অবজেক্ট তৈরি করা যায়new কিওয়ার্ড দিয়ে কাজ করবে না
Return Valueএকাধিক স্টেটমেন্ট হলে return কিওয়ার্ড প্রয়োজনএক্সপ্রেশন সরাসরি রিটার্ন হয়, return কিওয়ার্ড ছাড়া

Arrow Functions সাধারণভাবে ছোট, কমপ্যাক্ট, এবং স্বচ্ছ কোড লেখার জন্য ব্যবহৃত হয়, তবে এর কিছু সীমাবদ্ধতা যেমন this এবং arguments সম্পর্কিত আচরণ, এগুলোর ব্যবহারকে নির্দিষ্ট পরিস্থিতির মধ্যে সীমাবদ্ধ করে।

Content added By
Promotion

Are you sure to start over?

Loading...