8.4 অ্যারো ফাংশন 

জাভাস্ক্রিপ্ট এর ES6 ভার্সন এ নতুন একধরণের ফাংশন সিটেক্স আনা হয়েছে যেটা নরমাল ফাঙ্কশন থেকেও শর্ট ফর্ম এবং দেখতেও কনভেনশনাল ফাংশন থেকে সহজ। এই ফাংশন এ অ্যারো (=>) সিনটেক্স ব্যবহার  করতে হয় এবং function কীওয়ার্ড লাগেনা। এটাকে arrow function বলা হয়। তাছাড়াও অ্যারো ফাংশন  এর কিছু বৈশিষ্ট আছে যা নরমাল ফাংশন থেকে একটু আলাদা। কয়েকটি উদাহরণ দেখলে বেপারটি পরিষ্কার হওয়া যাবে।

বেসিক সিনট্যাক্স:

param => expression;

একাধিক প্যারামিটার সিনট্যাক্স:

(param 1, param 2) => expression;

একাধিক লাইন এক্সপ্রেশন এ কার্লি ব্রাকেট এবং রিটার্ন স্টেটমেন্ট দিতে হয়। যেমনঃ 

param => {
  let a = 1;
  return a + param;
}

 

আর যদি মাল্টিপল প্যারামিটার থাকে তাহলে পারমিটের গুলাকে ব্রাকেট এ রাখতে হয়:

(param1, paramN) => {
   let a = 1;
   return a + param1 + paramN;
}

 

Arrow ফাংশন  এর কিছু লিমিটেশনস এবং বৈশিষ্ট আছে:

  1. অ্যারো ফাংশন এর নিজস্ব this এবং super এর বাইন্ডিং নেই।
  2. অ্যারো ফাংশন কে method হিসাবে ব্যবহার করা যায়না। 
  3. অ্যারো ফাংশন call, apply এবং bind মেথড এর সাথে কাজ করেনা, যেহেতু এই মেথডগুলা scope স্টাবলিশ এর মাধ্যমে কাজ করে। 
  4. অ্যারো ফাংশন কে constructor হিসাবে ব্যবহার করা যায়না।
উদাহরন

  • single parameter এরজন্যে ( ) দেয়ার দরকার পড়েনা। আবার single line expression এরজন্যে { } দেয়ার দরকার পড়েনা। যেমন,

    const square = n => n * n;
    
console.log(square(3)); // 9
  • কিন্ত নিচের কোড আবার syntax error দিবে, 
    const x = ...n => { // SyntaxError
  console.log(n);
};

x(4,6,7);
  • return এও যদি … ব্যবহার করার দরকার পড়ে তাহলেও একে object বা array হিসেবে return করতে হবে 
    const x = (...n) => {
  return { ...n };
};

const obj = x(4, 6, 7);

console.log(obj); //{ '0': 4, '1': 6, '2': 7 }
  • কোনো parameter ব্যতীত arrow function, 
    const a = 4;
const b = 2;
const arrowTest = () => ({sum: a + b + 100});

console.log(arrowTest()); // { sum: 106 }
  • multiple parameter, expression এবং default value সহ arrow function, 
    const rectangleArea = (width = 1, height = 1) => {
  let area = width * height;
  return area;
};

console.log(rectangleArea(3, 4)); // 12

     

এসো নিজে করি
  • নিচের কোডের আউটপুট কি হবে? 
    const stringLength = (str) =>
  console.log(`the length of "${str}" is:`, str.length);

stringLength("whatever");
  • নিচের কোডের আউটপুট কি হবে? 
    function nester() {
  return () => {
    return () => console.log("Found me!");
  };
}

nester()()();
  • নিচের কোডের আউটপুট কি হবে? 
    const arr = [1, 2, 3];
const multiplyByN = (n) => arr.map((num) => console.log(num * n));

multiplyByN(2);
  • নিচের কোডের আউটপুট কি হবে? 
    let alerts = [
  "Hey, you are awesome",
  "You are so wonderful",
  "What a marvel you are",
  "You're so lovely",
  "You're so sweet that I'd think you're a sweet potato -- and I LOOOOVE POTATOES",
];

function showAlert(name) {
  alert(alerts[Math.floor(Math.random() * alerts.length)] + `, ${name}!`);
}

showAlert("XYZ");
  • নিচের কোডের আউটপুট কি হবে? 
    const arrowTest = ({ a, b } = { a: 10, b: 20 }) => a + b;

console.log(arrowTest());
8.3. Spread Operator
8.5. find, fill