آموزش جامع توابع Arrow در جاوااسکریپت

🎯 اهداف یادگیری

• درک مفهوم توابع Arrow در ES6
• یادگیری تفاوت‌های توابع Arrow با توابع معمولی
• آشنایی با موارد استفاده مناسب توابع Arrow
• مزایا و معایب توابع Arrow

📌 تابع Arrow چیست؟

توابع Arrow که با نام "توابع پیکانی" نیز شناخته می‌شوند، یکی از ویژگی‌های معرفی شده در ES6 هستند که سینتکس کوتاه‌تری برای نوشتن توابع ارائه می‌دهند:

// تابع معمولی
const sum = function(a, b) {
  return a + b;
};
// تابع Arrow معادل
const sum = (a, b) => a + b;

ویژگی‌های توابع Arrow:

• سینتکس کوتاه: نیاز به نوشتن کلمه کلیدی function نیست
• this متفاوت: this در توابع Arrow به محیط بیرونی اشاره می‌کند
• بدون prototype: توابع Arrow constructor نیستند

📌 سینتکس توابع Arrow

// 1. بدون پارامتر
const sayHello = () => console.log("Hello!");
// 2. یک پارامتر (نیاز به پرانتز ندارد)
const double = n => n * 2;
// 3. چندین پارامتر
const sum = (a, b) => a + b;
// 4. بدنه چندخطی (نیاز به آکولاد و return دارد)
const calculate = (a, b) => {
  const result = a + b;
  return result;
};

نکات مهم:

• بدنه تک‌خطی: نیاز به آکولاد و return ندارد
• بدنه چندخطی: باید از آکولاد و return استفاده شود
• پارامترها: برای یک پارامتر، پرانتز اختیاری است

📌 تفاوت توابع Arrow و معمولی

مهم‌ترین تفاوت توابع Arrow با توابع معمولی در رفتار کلمه کلیدی this است:

const person = {
  name: "علی",
  greet: function() {
    console.log("سلام، من " + this.name); // "سلام، من علی"
    setTimeout(function() {
      console.log("سلام، من " + this.name); // "سلام، من undefined"
    }, 1000);
    // راه‌حل با تابع Arrow
    setTimeout(() => {
      console.log("سلام، من " + this.name); // "سلام، من علی"
    }, 1000);
  }
};

تفاوت‌های کلیدی:

• this: در توابع Arrow، this از محیط بیرونی ارث‌بری می‌کند
• arguments: توابع Arrow objectی به نام arguments ندارند
• new: توابع Arrow را نمی‌توان با new فراخوانی کرد
• prototype: توابع Arrow propertyی به نام prototype ندارند

📌 چه زمانی از توابع Arrow استفاده کنیم؟

توابع Arrow در موارد زیر بسیار مفید هستند:

// 1. توابع کوتاه و ساده
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
// 2. حفظ مقدار this
class Counter {
  constructor() {
    this.count = 0;
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
}

موارد عدم استفاده:

• توابع constructor: به دلیل نداشتن prototype
• توابع متد در اشیا: زمانی که به this نیاز داریم
• توابعی که به arguments نیاز دارند: توابع Arrow arguments ندارند

📌 تمرین عملی

کد زیر را با استفاده از توابع Arrow بازنویسی کنید:

// تمرین 1
const square = function(n) {
  return n * n;
};

📌 قدم بعدی

در درس بعدی با اشیاء در جاوااسکریپت آشنا خواهیم شد!