توابع پیکانی

توابع پیکانی (Arrow functions)

یک عبارت تابع پیکانی (Arrow function expression) که به آن «پیکان چاق» (fat arrow) هم می‌گویند تا از ساختار احتمالی -> در آینده‌ی جاوااسکریپت متمایز شود، ساختار کوتاه‌تری نسبت به بیان توابع (Function expressions) دارد. این توابع از خودشان this ،arguments ،super یا new.target ندارند و همیشه ناشناس (Anonymous) هستند.

دو عامل اصلی باعث معرفی توابع پیکانی شد: توابع کوتاه‌تر و عدم اتصال (non-binding) کلمه کلیدی this.

توابع کوتاه‌تر (Shorter functions)

در برخی الگوهای برنامه‌نویسی تابعی (Functional)، استفاده از توابع کوتاه‌تر بسیار محبوب است. این دو مدل را با هم مقایسه کنید:

const a = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

// حالت اول: با تابع معمولی
const a2 = a.map(function (s) {
  return s.length;
});
console.log(a2); // [8, 6, 7, 9]

// حالت دوم: با تابع پیکانی
const a3 = a.map((s) => s.length);
console.log(a3); // [8, 6, 7, 9]

عدم وجود this مستقل (No separate this)

تا قبل از توابع پیکانی، هر تابع جدیدی که تعریف می‌شد مقدار this مخصوص به خودش را داشت؛ مثلاً:

• در صورت استفاده از تابع سازنده (Constructor)، یک شیء جدید بود.

• در حالت Strict Mode، مقدارش undefined بود.

• اگر تابع به عنوان متدِ یک شیء صدا زده می‌شد، به همان شیء اصلی اشاره می‌کرد.

این رفتار برای برنامه‌نویسی به سبک شیءگرا اصلاً ایده‌آل نبود:

function Person() {
  // تابع سازنده Person() کلمه this را برای خودش تعریف می‌کند
  this.age = 0;

  setInterval(function growUp() {
    // در حالت معمولی (non-strict)، تابع growUp() کلمه this را
    // به عنوان شیء جهانی (global) تعریف می‌کند که با this
    // تعریف شده در تابع سازنده Person() متفاوت است.
    this.age++;
  }, 1000);
}

const p = new Person();

در نسخه ECMAScript 3/5، این مشکل را با ریختن مقدار this درون یک متغیر واسطه (که در کلوژر حفظ می‌شد) حل می‌کردند:

function Person() {
  // بعضی‌ها به جای self از کلمه that استفاده می‌کنند؛ فرقی ندارد فقط باید یکدست بنویسید.
  const self = this;
  self.age = 0;

  setInterval(function growUp() {
    // این تابع به متغیر self اشاره می‌کند که حاوی همان شیء مورد نظر ماست.
    self.age++;
  }, 1000);
}

یک راه دیگر هم این بود که از یک تابع باند شده (bound function) استفاده شود تا مقدار درستِ this به تابع growUp منتقل شود.

اما یک تابع پیکانی اصلاً this مخصوص به خودش را ندارد و از مقدار this محیط بیرونی‌اش (enclosing execution context) استفاده می‌کند. بنابراین در کد زیر، کلمه this در تابعی که به setInterval پاس داده شده، دقیقاً همان مقدارِ this در تابع بیرونی را دارد:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // کلمه this به درستی به شیء person اشاره می‌کند
  }, 1000);
}

const p = new Person();