জেভাস্ক্রিপ্ট আর্ক ফাংশন

ES6-এ আরোহণকারী ফাংশন প্রবর্তিত হয়েছে

আরোহণকারী ফাংশনটি আমাদের ফাংশন লিখতে কম জায়গা নিয়ে যায়:

বিন্যাস

let myFunction = (a, b) => a * b;

আপনার হাতে পরীক্ষা করুন

পূর্বে:

hello = function() {
  return "Hello World!";
}

আপনার হাতে পরীক্ষা করুন

আরোহণকারী ফাংশন ব্যবহার করার পরে:

hello = () => {
  return "Hello World!";
}

আপনার হাতে পরীক্ষা করুন

তাদের অভিব্যক্তি হ্রাস পেয়েছে! যদি ফাংশনটিতে একটি একক স্টেটমেন্ট থাকে এবং সেটি একটি মান ফিরিয়ে দেয়, তবে ব্র্যাকেট এবং return কীওয়ার্ড:

আরোহণকারী ফাংশনের ডিফল্ট রিটার্ন মান:

hello = () => "Hello World!";

আপনার হাতে পরীক্ষা করুন

মন্তব্য:এটা শুধুমাত্র ফাংশনটিতে একটি একক স্টেটমেন্ট থাকলেই কার্যকর

যদি প্যারামিটার থাকে, তবে তাকে ব্র্যাকেটে পাঠানো হবে:

প্যারামিটার সহ আরোহণকারী ফাংশন:

hello = (val) => "Hello " + val;

আপনার হাতে পরীক্ষা করুন

কারণ, একটি প্যারামিটার হলে, আপনি সংযোগকরণকারীকে উপেক্ষা করতে পারেন:

বহুমুখী আরোহণকারী ফাংশন:

hello = val => "Hello " + val;

আপনার হাতে পরীক্ষা করুন

এই কী করবো?

সাধারণ ফাংশনের তুলনায়, আরোহণকারী ফাংশনটির এই এই পদ্ধতিতে একটি বস্তুর সঙ্গে কোনো পার্থক্য নেই

সমীক্ষা করলে, আরোহণকারী ফাংশন ব্যবহার করলে একটি বস্তুর সঙ্গে কোনো পার্থক্য নেই এই এর বানিজ্যিকীকরণ

সাধারণ ফাংশনের মধ্যে এই ফাংশনটি কোন বস্তুর পক্ষ থেকে বানানো হয়েছে, যেমন উইন্ডো, ডকুমেন্ট, বাটন বা অন্য কিছুই হতে পারে

আরোহণকারী ফাংশনের জন্যএই এই কীওয়ার্ড সবসময় আরোহণকারী ফাংশন নির্মাণকারী বস্তুকে ইনডিকেট করে

আমরা এখানে দুটি উদাহরণ দেখে এই পার্থক্যকে বোঝা যাক

এই দুটি উদাহরণটি দুবার পদ্ধতি ব্যবহার করে, প্রথমবার পৃষ্ঠা লোড হওয়ার সময়, দ্বিতীয়বার ব্যবহারকারী বাটনের ক্লিক করার সময়。

প্রথম উদাহরণটি সাধারণ ফাংশন ব্যবহার করে, দ্বিতীয় উদাহরণটি আরোহণকারী ফাংশন ব্যবহার করে。

নির্দেশিকা প্রদর্শিত হয়েছে যে, প্রথম উদাহরণটি দুটি ভিন্ন বস্তু (window এবং button) ফিরিয়ে দেয়, দ্বিতীয় উদাহরণটি দুবার বানানো হয়েছে window বস্তু, কারণ window বস্তু হল ফাংশনের 'মালিক'।

উদাহরণ

সাধারণ ফাংশনের জন্য, this হল ফাংশনটি কোন বস্তুর পক্ষ থেকে বানানো হয়েছে:

// সাধারণ ফাংশন:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// উইন্ডো অবজেক্ট এই ফাংশন কল করুন:
window.addEventListener("load", hello);
// বাটন অবজেক্ট এই ফাংশন কল করুন:
document.getElementById("btn").addEventListener("click", hello);

আপনার হাতে পরীক্ষা করুন

উদাহরণ

এই আইকন ফাংশন সম্প্রসারণ করা হয়েছে এই ফাংশনের মালিকতা নির্দেশ করুন:

// আরো ফাংশন:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// উইন্ডো অবজেক্ট এই ফাংশন কল করুন:
window.addEventListener("load", hello);
// বাটন অবজেক্ট এই ফাংশন কল করুন:
document.getElementById("btn").addEventListener("click", hello);

আপনার হাতে পরীক্ষা করুন

ফাংশন ব্যবহার করতে যখন এইসব পার্থক্যগুলি মনে রাখুন।কখনও সাধারণ ফাংশনের আচরণটি আপনার ইচ্ছাকৃত, না হলে আরো ফাংশন ব্যবহার করুন。

ব্রাউজার সমর্থন

নিচের টাবলে প্রথম সম্পূর্ণরূপে জেভাস্ক্রিপ্ট আরো ফাংশনস সম্পর্কে সম্পূর্ণরূপে সমর্থনকারী ব্রাউজার সংস্করণ উল্লেখ করা হয়েছে:

চ্রোম আইই ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম ৪৫ এডজ ১২ ফায়ারফক্স ২২ স্যাফারি ১০ ওপেরা ৩২
২০১৫ সালের ৯ মাস ২০১৫ সালের ৭ মাস ২০১৩ সালের ৫ মাস ২০১৬ সালের ৯ মাস ২০১৫ সালের ৯ মাস