তীর ধনুকের Arrow Function
তীর লাগে হৃদয়ে। ভেঙে ফেলে রিলেশনকে। আর জাভাস্ক্রিপ্টে তীর বা Arrow লাগলে সেটা ফাংশনকে সোজা করে ফেলে। তবে তীরের তাড়া খাওয়ার আগে দুইটা প্যারামিটার দিয়ে একটা ফাংশন ডিক্লেয়ার করে ফেল।
function add(a, b) {
const result = a + b;
return result;
}
const sum = add(5, 90);
console.log(sum);
Output: 95এবং এই সেইম ফাংশনকে তুই আরেকটু ছোট করে লিখতে পারিস।
function add(a, b) {
return a + b;
}
const sum = add(5, 90);
console.log(sum);
Output: 95এটা হলো ফাংশন ডিক্লারেশন, যেখানে আমরা function কি-ওয়ার্ড দিয়ে ফাংশন ডিক্লেয়ার করি। কিন্তু তুই চাইলে ফাংশনকে ভেরিয়েবলের মতোও লিখতে পারিস, এইটাকে বলে ফাংশন এক্সপ্রেশন।
const add2 = function(a, b) {
return a + b;
}এখানে কোনো স্পেশাল কিছু নাই, শুধু ফাংশনকে ভেরিয়েবলের মতো করে ডিক্লেয়ার করেছি। এই পদ্ধতিতেও কাজ একইভাবে হয়, শুধু এভাবে লেখা হয় বলে এটাকে বলে function expression।
এখন আসি arrow function-এর কথায়। এটি ফাংশন এক্সপ্রেশনের আরও সংক্ষিপ্ত একটি ফর্ম, যেখানে function কি-ওয়ার্ডটি বাদ দিয়ে একটি অ্যারো (=>) ব্যবহার করা হয়। অ্যারো (arrow) মানে একটা সমান চিহ্ন (=)-এর পর একটা গ্রেটার দ্যান (>) চিহ্ন দিলে => এমন হয়, যেটা দেখতে অনেকটা তীর বা arrow-এর মতো দেখায়।
const add3 = (a, b) => a + b;
const sum = add3(5, 30);
console.log(sum);এটাই হলো অ্যারো ফাংশন। এখানে return স্টেটমেন্টটি আলাদাভাবে দিতে হবে না, যদি এক লাইনে সব কিছু করা যায়। তবে তুই চাইলে { } ব্যবহার করে return স্টেটমেন্টও দিতে পারবি।
এখন আমরা যদি অনেক প্যারামিটার নিয়ে কাজ করতে চাই, সেখানেও arrow function ব্যবহার করতে পারি।
const add4 = (num1, num2, num3, num4) => num1 + num2 + num3 + num4;
const sum = add4(5, 30, 4, 6);
console.log(sum);
Output: 45এই অ্যারো ফাংশনের মাধ্যমে আমরা আগের সব ফাংশনের কাজ করতে পারি, তবে অনেক কম কোড লিখতে হয়।
অ্যারো ফাংশনে যদি একাধিক প্যারামিটার থাকে, তাহলে সবগুলা প্যারামিটারকে ব্র্যাকেটে রাখতে হয়। আর যদি একটিমাত্র প্যারামিটার হয়, তাহলে চাইলে ব্র্যাকেট () দিতে পারবি। আবার না দিলেও চলে। তাই এমন কয়েকটা উদাহরণ দেখি—
const student = {
name: 'ananta',
age: 23
}
const getName = person => person.name;
const getAge = (person) => person.age;
const age = getAge(student);
console.log(age);
Output: 23এখানে আমরা একটি অ্যারো ফাংশনে অবজেক্ট পাস করেছি এবং সেই অবজেক্টের age প্রোপার্টি রিটার্ন করেছি। এবার একটি অ্যারো ফাংশন তৈরি করি, যেখানে একটি array পাস করা হবে এবং সেটির একটি নির্দিষ্ট ইনডেক্স প্রিন্ট করা হবে।
const getThird = numbers => numbers[3];
const third = getThird([5, 34, 6, 26, 6]);
console.log(third);
Output: 26
এখন আরেকটি উদাহরণ দেখি, যেখানে কোনো প্যারামিটার নেই—
const getPi = () => Math.PI;
console.log(getPi());
Output: 3.141592653589793এখন যদি আমাদের একটি বড় অ্যারো ফাংশন থাকে, যেখানে একাধিক লাইন কোড থাকে, তখন আমরা { } ব্যবহার করব।
const doMath = (x, y, z) => {
const sum = x + y + z;
const mult = x * y * z;
const result = sum + mult;
return result;
}
const result = doMath(3,5,8);
console.log(result)
Output: 136এখানে আমরা return কেন ব্যবহার করেছি? কারণ, এক লাইনের অ্যারো ফাংশনে রিটার্ন (return) না লিখলেও রিটার্ন অটোমেটিক হয়ে যাবে। অন্যদিকে arrow ফাংশনের মধ্যে সেকেন্ড ব্র্যাকেট দিয়ে যদি এক বা একাধিক লাইন কোড লিখিস, তাহলে কিন্তু অটোমেটিক কোনো কিছু রিটার্ন হবে না; বরং কিছু রিটার্ন করতে চাইলে সেটা স্পষ্টভাবে return লিখে তারপর যেটাকে রিটার্ন করতে চাস, সেটার নাম বা মান লিখে দিতে হবে।
রেগুলার ফাংশন এবং অ্যারো ফাংশনের মূল পার্থক্য
অ্যারো ফাংশন ছোট ও সহজ কাজের জন্য এবং কলব্যাক ফাংশনের জন্য উপযুক্ত। তবে যদি this কি-ওয়ার্ড প্রয়োজন হয়, তখন রেগুলার ফাংশন ভালো কাজ করে।
রেগুলার ফাংশনের নিজস্ব this থাকে, যেখানে অ্যারো ফাংশন তার আশেপাশের স্কোপ থেকে this ইনহেরিট করে। এটি অবজেক্ট বা ক্লাসের সাথে কাজ করার সময় কাজে আসে। এই কথাগুলো এখন তোর কঠিন লাগবে। তবে যখন this কি-ওয়ার্ড এবং স্কোপ নিয়ে আরেকটু জানবি, তখন এইগুলা একদম ক্লিয়ার হয়ে যাবে।
const person = {
name: "Ananta",
greetRegular: function () {
console.log("Hello, " + this.name);
},
greetArrow: () => {
console.log("Hello, " + this.name);
}
};
person.greetRegular();
person.greetArrow();
Output:
Hello, Ananta
Hello, undefinedডিফল্ট প্যারামিটারসহ অ্যারো ফাংশন
const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet());
console.log(greet("Ananta"));
Output:
Hello, Guest!
Hello, Ananta!অবজেক্ট রিটার্ন
অ্যারো ফাংশনে অবজেক্ট রিটার্ন করতে গেলে অনেক সময় ক্যাঁচাল লাগে। প্যারেনথেসিস দিয়ে এটি হ্যান্ডেল করতে হয়।
// wrong
const getObject = () => { key: "value" };
console.log(getObject());
Output: undefined
// right
const getObject = () => ({ key: "value" });
console.log(getObject());
Output: { key: "value" }Practice:
- একটি array-এর প্রথম ইনডেক্সের মান রিটার্ন করবে, এমন একটা অ্যারো ফাংশন লিখ।
- তিনটি সংখ্যা নিয়ে তাদের গুণফল রিটার্ন করে, এমন একটা অ্যারো ফাংশন লিখ।
- এমন একটি arrow function তৈরি কর, যা কোনো প্যারামিটার নেয় না শুধু "unknown" রিটার্ন করে।
- একটি object-এর মধ্যে নাম এবং পকেটে কত টাকা আছে এমন দুইটা প্রপার্টি আছে। এখন এমন একটা অ্যারো ফাংশন লিখ, যেটা টাকার পরিমাণকে 5 দিয়ে ভাগ করে ভাগফল রিটার্ন করবে।
- জাভাস্ক্রিপ্টে কোনো একটা অ্যারের শেষ উপাদান পাওয়ার জন্য শেষ উপাদানের ইনডেক্স বের করতে হয়। শেষ উপাদানের ইনডেক্স বের করার সিস্টেম হচ্ছে, অ্যারের লেংথ বের করে সেটা থেকে 1 বিয়োগ করবি। এইটা আগে একটু প্র্যাকটিস করে ফেল। তারপর একটি array-এর প্রথম ও শেষ উপাদান যোগ করে যোগফল রিটার্ন করবে, এমন একটা arrow function লিখে ফেল।
- এমন একটা ফাংশন তৈরি কর, যা দুইটা সংখ্যা যোগ করবে। প্রথম সংখ্যা না থাকলে 10, আর দ্বিতীয় সংখ্যা না থাকলে 5 ধরে যোগফল দেখাবে। এইটা Arrow function দিয়ে করবি।