Arrow Functions

نحوه‌ی نگارش کوتاه‌تر توابع با Arrow Functions

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

• یادگیری Syntax توابع Arrow Function
• آشنایی با حالت‌های مختلف کوتاه‌نویسی Arrow Function
• درک تفاوت اولیه‌ی Arrow Function با Function Expression معمولی
• آشنایی مقدماتی با محدودیت Arrow Function در استفاده از this

مقدمه

در درس قبل با Function Expression آشنا شدیم؛ روشی که در آن تابع به یک متغیر نسبت داده می‌شود. ES6 یک نحوه‌ی نگارش کوتاه‌تر و مدرن‌تر برای این کار معرفی کرد که به آن Arrow Function می‌گویند. این روش امروزه یکی از پرکاربردترین سبک‌های نوشتن تابع در جاوااسکریپت است.

Syntax پایه

یک Function Expression معمولی را در نظر بگیرید:

const greet = function (name) {
  return "سلام " + name;
};

همین تابع را می‌توان به‌صورت Arrow Function نوشت:

const greet = (name) => {
  return "سلام " + name;
};

همان‌طور که می‌بینید، کلیدواژه‌ی function حذف شده و به‌جای آن، بعد از پارامترها، علامت => (arrow) قرار گرفته است.

کوتاه‌نویسی بیشتر

Arrow Function چند سطح کوتاه‌نویسی بیشتر هم ارائه می‌دهد:

حذف return برای بدنه‌ی تک‌خطی

اگر بدنه‌ی تابع فقط شامل یک عبارت باشد که قرار است بازگردانده شود، می‌توان {} و return را کاملاً حذف کرد:

const greet = (name) => "سلام " + name;

console.log(greet("علی")); // سلام علی

به این حالت Implicit Return گفته می‌شود؛ یعنی مقدار بدون نوشتن صریح return بازگردانده می‌شود.

حذف پرانتز برای یک پارامتر

اگر تابع دقیقاً یک پارامتر داشته باشد، پرانتز دور آن هم اختیاری است:

const greet = name => "سلام " + name;

پرانتز اجباری برای صفر یا چند پارامتر

اگر تابع هیچ پارامتری نداشته باشد یا بیش از یک پارامتر داشته باشد، پرانتز الزامی است:

const sayHi = () => console.log("سلام");
const sum = (a, b) => a + b;

sayHi();
console.log(sum(3, 5));

تحلیل کد

در مثال بالا، تابع sum بدون {} و return نوشته شده، اما همچنان مقدار a + b را بازمی‌گرداند؛ چون بدنه‌ی آن فقط یک عبارت است. اگر بخواهیم بیش از یک خط کد داخل تابع بنویسیم، باید از {} و return صریح استفاده کنیم:

const sum = (a, b) => {
  console.log("در حال جمع کردن...");
  return a + b;
};

خطای رایج در بازگرداندن Object

یکی از نکات مهم و کمی گیج‌کننده، بازگرداندن یک Object با Implicit Return است:

const makeUser = name => { name: name };
console.log(makeUser("علی"));

این کد آن‌طور که انتظار می‌رود کار نمی‌کند؛ چون جاوااسکریپت {} را به‌عنوان بدنه‌ی تابع تفسیر می‌کند، نه به‌عنوان یک Object. برای رفع این مشکل، باید Object را داخل پرانتز اضافی قرار داد:

const makeUser = name => ({ name: name });
console.log(makeUser("علی")); // { name: "علی" }

پرانتز اضافی دور {} به جاوااسکریپت می‌گوید که این یک Object Literal است، نه بدنه‌ی تابع.

تفاوت مهم Arrow Function با Function Expression

از نظر ظاهری، Arrow Function کوتاه‌تر از Function Expression معمولی است، اما تفاوت آن‌ها فقط در نگارش نیست. مهم‌ترین تفاوت این دو، نحوه‌ی رفتار آن‌ها با this است؛ Arrow Function برخلاف توابع معمولی، this مستقل خودش را ندارد و آن را از Scope بیرونی به ارث می‌برد. این موضوع آن‌قدر مهم و پیچیده است که یک درس کامل در فصل مربوط به this و Binding به آن اختصاص داده شده؛ در این مرحله فقط لازم است بدانید که این تفاوت وجود دارد.

جدول مقایسه

ویژگی	Function Expression	Arrow Function
Syntax	طولانی‌تر	کوتاه‌تر
Implicit Return	ندارد	دارد (در بدنه‌ی تک‌خطی)
this مستقل	دارد	ندارد (از Scope بیرونی به ارث می‌برد)

اشتباهات رایج

• فراموش کردن پرانتز اضافی هنگام بازگرداندن یک Object با Implicit Return.
• استفاده از Arrow Function در جایی که نیاز به this مستقل تابع وجود دارد (مثل تعریف متد داخل یک Object)، بدون آگاهی از این تفاوت.
• تصور اینکه Arrow Function در همه‌ی شرایط جایگزین کاملی برای Function Expression است.

Best Practices

• برای توابع کوتاه، به‌خصوص callback هایی که به متدهایی مثل map یا filter پاس داده می‌شوند، از Arrow Function استفاده کنید.
• برای متدهای داخل Object که نیاز به this مربوط به همان Object دارند، از Function Expression یا Method Shorthand استفاده کنید، نه Arrow Function.

ارتباط با سایر مفاهیم

Arrow Function در طول این دوره بارها با متدهای آرایه مثل map، filter و reduce ترکیب خواهد شد. رفتار خاص آن با this نیز در فصل this و Binding با جزئیات کامل بررسی می‌شود.

جمع‌بندی

Arrow Function روشی کوتاه‌تر برای نوشتن تابع است که امکاناتی مثل Implicit Return را ارائه می‌دهد. برای بازگرداندن یک Object با Implicit Return، باید آن را داخل پرانتز اضافی قرار داد. مهم‌ترین تفاوت Arrow Function با توابع معمولی، نداشتن this مستقل است که در فصل‌های بعدی به‌طور کامل بررسی می‌شود.