কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে শর্টহ্যান্ড (Arrow) ফাংশন ব্যাখ্যা

এরো ফাংশন যাকে শর্টহ্যান্ড ফাংশনও বলা হয়, ES2015-এ যোগ করা হয়েছিল। এটি ফাংশন লেখার সংক্ষিপ্ত রূপ দেয়। এর নিজস্ব this বাইন্ডিং নেই, এটা সারাউন্ডিং কনটেক্সট থেকে this নেয়।

উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>শর্টহ্যান্ড ফাংশন</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>জাভাস্ক্রিপ্টে শর্টহ্যান্ড ফাংশন</h1>
  <div class="result"></div>
  <button class="Btn">এখানে ক্লিক করুন</button>
  <h3> এরো ফাংশন ও নরমাল ফাংশন ইনভোক করতে বোতামে ক্লিক করুন</h3>
  <script>
    const resEle = document.querySelector(".result");
    let objYear, obj1Year;
    const obj = {
      name: "rohan",
      age: 20,
      birthday() {
        function birthYear() {
          objYear = new Date().getFullYear() - this.age;
        }
        birthYear();
      },
    };
    const obj1 = {
      name: "Shawn",
      age: 22,
      birthday() {
        const birthYear = () => {
          obj1Year = new Date().getFullYear() - this.age;
        };
        birthYear();
      },
    };
    document.querySelector(".Btn").addEventListener("click", () => {
      obj.birthday();
      obj1.birthday();
      resEle.innerHTML += "এরো ফাংশন ছাড়া: জন্ম বছর = " + objYear + " ";
      resEle.innerHTML += "এরো ফাংশন দিয়ে: জন্ম বছর = " + obj1Year + " ";
    });
  </script>
</body>
</html>

আউটপুট

উপরের কোডটি নিচের আউটপুট দেবে:

জাভাস্ক্রিপ্টে শর্টহ্যান্ড (Arrow) ফাংশন ব্যাখ্যা

'এখানে ক্লিক করুন' বোতামে ক্লিক করার পর:

জাভাস্ক্রিপ্টে শর্টহ্যান্ড (Arrow) ফাংশন ব্যাখ্যা

  1. জাভাস্ক্রিপ্টে Fat Arrow Functions

  2. জাভাস্ক্রিপ্টে for...in স্টেটমেন্ট ব্যাখ্যা

  3. জাভাস্ক্রিপ্টে অবজেক্ট সমতা ব্যাখ্যা

  4. জাভাস্ক্রিপ্টে হাইয়ার অর্ডার ফাংশন ব্যাখ্যা