javascriptArrow functionتابع پیکانی در جاوااسکریپت
تابع پیکانی در جاوااسکریپت را با مثال تبدیل دقیقه به ثانیه یاد بگیرید؛ بازگشت ضمنی، بدنهٔ بلوکی و تفاوت مهم آن با تابع معمولی را بررسی کنید.
مفهوم به زبان ساده
تابع پیکانی شکلی از نوشتن عبارت تابع با علامت => است. وقتی می‌خواهید یک محاسبهٔ کوتاه را به متغیری نسبت دهید یا تابعی را به روشی مثل #map بدهید، این شکل می‌تواند خوانا باشد. در مثال، secondsFromMinutes یک ورودی می‌گیرد و حاصل ضرب آن در ۶۰ را برمی‌گرداند. تعریف تابع، آن را اجرا نمی‌کند؛ پرانتزهای فراخوانی لازم‌اند.
اگر بدنه فقط یک عبارت و بدون آکولاد باشد، نتیجهٔ همان عبارت به‌صورت ضمنی برمی‌گردد. اگر برای چند دستور از آکولاد استفاده کنید، نتیجهٔ دلخواه را با #return مشخص کنید. در نمونه، هر دو نسخه نتیجهٔ یکسان دارند، اما شکل بازگشت آن‌ها متفاوت است. برای چند پارامتر یا بدون پارامتر، پرانتز لازم است؛ نوشتن آن حتی برای یک پارامتر نیز مجاز است.
تابع پیکانی جایگزین همهٔ تابع‌ها نیست. این تابع this مستقل ندارد و مقدار this را از محیط تعریف خود می‌گیرد؛ بنابراین برای روشی از شیء که قرار است this آن با فراخوانی تعیین شود، انتخاب مناسبی نیست. با new هم قابل ساختن نیست. در این سطح، ابتدا روی ورودی، خروجی و تفاوت بدنهٔ کوتاه و بلوکی مسلط شوید و از کوتاه‌کردن کد به قیمت پنهان‌شدن منظور پرهیز کنید.
کجا به کار می‌آید؟
- نوشتن تابع تبدیل کوتاه برای map یا filter
- نام‌گذاری یک محاسبهٔ کوچک با ورودی و خروجی روشن
از تعریف تا یک مثال واقعی
const secondsFromMinutes = (minutes) => minutes * 60;
const secondsWithBlock = (minutes) => {
return minutes * 60;
};
console.log(secondsFromMinutes(3));
console.log(secondsWithBlock(3));
console.log([1, 2, 3].map(secondsFromMinutes).join(', '));
180 180 60, 120, 180
این مثال چطور کار می‌کند؟
نسخهٔ اول بدنهٔ عبارتی دارد؛ نتیجهٔ ضرب خودکار برمی‌گردد.
نسخهٔ دوم بدنهٔ بلوکی دارد و به return صریح نیاز دارد.
هر دو فراخوانی با ورودی ۳، عدد ۱۸۰ را برمی‌گردانند.
map تابع را برای هر دقیقه اجرا می‌کند و آرایهٔ ثانیه‌ها ساخته می‌شود.
اشتباه رایج
در minutes => { minutes * 60; } مقدار محاسبه می‌شود، ولی برنمی‌گردد؛ نتیجهٔ فراخوانی undefined است. برای بازگرداندن شیء با بدنهٔ کوتاه، آکولاد شیء را در پرانتز بگذارید: name => ({ name }).
این را به خاطر بسپارید
بدنهٔ کوتاه یک عبارت را برمی‌گرداند؛ بدنهٔ بلوکی برای نتیجهٔ دلخواه به return نیاز دارد.