JS 101: অ্যারো (() => {}) ফাংশন

Photo by Jon Tyson on Unsplash

জাভাস্ক্রিপ্ট arrow ফাংশন নিঃসন্দেহে ES6 এর একটি মোস্ট পপুলার ফিচার। ইহা জাভাস্ক্রিপ্ট ফাংশন লেখার জগত টা একটু ভিন্ন আঙ্গিকে তুলে ধরেছে। খুব সহজে সংক্ষিপ্ত আকারে ফাংশন লেখার জন্য arrow function বেশ জনপ্রিয়।

এখানে একটি ES5 function দেখানো হলঃ

function square(num) {
  return num * num;
}

square(2); // return 4
square(7); // return 49
square(9); // return 81

এখন আমরা আগের ফাংশনটিকে ES6 এ লিখবঃvar square = (num) => {
return num * num;
}

square(2); // return 4
square(7); // return 49
square(9); // return 81

আরেকটু সর্ট করে লিখলে ফাংশন টি হবে নিচের মতঃ

const square = num => num * num;

square(2); // return 4
square(7); // return 49
square(9); // return 81

আমরা দেখলাম কিভাবে খুব সহজে ES6 arrow function ব্যবহার করে আমাদের ফাংশন লিখাকে কত সহজ করতে পারি।

তবে অবশ্যই মনে রাখতে হবে যে, কিভাবে একটি একই ES6 arrow ফাংশন ES5 ফাংশন এর তুলনাই অন্যরকম আচরণ করতে পারে। আর জানা দরকার যে কিভাবে ES6 arrow ফাংশন কাজ করে। আমি এখানে ES6 এর বিস্তারিত আলোচনা করবোনা। আজকে জাস্ট আলোচনা করব যে কখন আপনি জাভাস্ক্রিপ্ট ES6 arrow ফাংশন ব্যবহার করবেন, আর কখন ES5 ফাংশন ব্যবহার করবেন।

জাভাস্ক্রিপ্ট ES6 arrow function নিয়ে বিস্তারিত জানতে ঘুরে আসুন Google Developer Expert Tyler McGinnis এর নিচের টিউটোরিয়াল টি তেঃ

How you can use ES6 Arrow Functions to make your JavaScript easier to read

ভেরিয়েশন

Photo by Lily Banse on Unsplash

আপনি ES6 arrow ফাংশন নিয়ে কাজ করতে গেলে অচিরেই বুঝতে পারবেন যে এতে একই কাজ করার জন্য বিভিন্ন টাইপ এর সিনট্যাক্স বিদ্যমান। তো চলুন এই নিয়ে আলচনা করা যাকঃ

১ঃ প্যারামিটার ছাড়া

যদি আপনার ফাংশন এ কোন প্যারামিটার এর প্রয়োজন না হয়, তবে জাস্ট একটা খালি প্রথম বন্ধনি () ব্যবহার করতে হবে => (arrow) এর আগে।

const greet = () => 'Hello World!';

greet(); // Hello World!

আবার আপনি চাইলে প্রথম বন্ধনি () ছাড়াও জাস্ট একটা আন্ডারস্কোর ( _ ) সাইন ব্যবহার করতে পারেন।

const greet2 = _ => 'Hello World!';

greet2(); // Hello World!

২ঃ একটি প্যারামিটার এর জন্য

একটি প্যারামিটার এর জন্য প্রথম বন্ধনি ঐচ্ছিক ব্যাপার, চাইলে দিতে পারেন নিচের মত করে

const addFive = (num) => num + 5;

addFive(10); // 15

আবার না চাইলে প্রথম বন্ধনি নাও দিতে পারেন

const addTen = num => num + 10;

addTen(23); // 33

৩ঃ একাধিক প্যারামিটার এর ক্ষেত্রে

একাধিক প্যারামিটার এর ক্ষেত্রে প্রথম বন্ধনি বাধ্যতামূলক

const sumTwoValue = (a, b) => a + b;

sumTwoVal(10, 20); // 30

৪ঃ ব্লক বডি ( Block Body )

যদি আপনার ফাংশন টা কোন স্পেসিফিক ব্লক এ হয়, তবে অবশ্যই return statement ব্যবহার করতে হবে।

const addThreeVal = (x, y, z) => {
  return x + y + z;
}

৫ঃ অবজেক্ট লিটারালস এর ক্ষেত্রে

আপনি যদি অবজেক্ট লিটারালস রিটার্ন করতে চান তবে অবশ্যই দ্বিতীয় বন্ধনি ব্যবহার করতে হবে।

a =>({ b: a })

এছাড়াও জাভাস্ক্রিপ্ট arrow function নিয়ে আরও অনেক কিছু আলচনা করার আছে। সেগুলো নিয়ে আরও একটি আর্টিকেল লিখবো খুব দ্রুতই। ততদিন সবাই ভালো থাকুন, সুস্থ থাকুন। ধন্যবাদ।

Happy Programming with Beautiful JavaScript (ES6)

আমার সম্পর্কেঃ

আমি মোঃ জামাল উদ্দিন, প্রতিনিয়ত শিখছি এবং যা কিছু শিখছি তা আপনাদের সাথে লেখালেখির মাধ্যমে শেয়ার করার চেষ্টা করছি। কাজ করছি সফটওয়্যার ডেভেলপার হিসেবে। আমার সম্পর্কে বিস্তারিত জানতে ভিজিট করুন https://jaamaalxyz.github.io ওয়েবসাইটে এবং প্রায় সবগুলো জনপ্রিয় সোশ্যাল সাইটে আমাকে পাবেন jaamaalxyz ইউজারনামে।