توابع پیکانی (Function Arrows)
«تابع پیکانی (Arrow Function)» شکل کوتاه «عبارت تابع (Function Expression)» است. در ES6 معرفی شد. کلمه function و return و آکولادها گاهی حذف می شوند. این یعنی نوشتن سریع تر و خواناتر، مخصوصاً برای کارهای کوتاه.
سینتکس کوتاه پیکانی
در حالت ساده، ورودی ها در پرانتز می آیند، سپس => ، سپس بدنه. اگر فقط یک دستورِ بازگشتی داری، آکولاد و return حذف می شود.
let myFunction = (a, b) => a * b;
قبل و بعد از پیکان
همین منطق را با عبارت تابع معمولی هم می نویسیم؛ اما طولانی تر است.
let myFunction = function(a, b) {
return a * b;
};
let myFunction = (a, b) => a * b;
یک دستور؛ بازگشت پیش فرض
وقتی فقط یک دستور داری، مقدار همان دستور برمی گردد. دیگر return و آکولاد لازم نیست.
let hello = () => "Hello World!";
پارامترها و پرانتز
با یک پارامتر، می توان پرانتز را حذف کرد. با چند پارامتر، پرانتز لازم است.
let hello = (val) => "Hello " + val;
let hi = val => "Hi " + val;
بدنه بلوکی و return اجباری
اگر بدنه را داخل آکولاد می گذاری، باید return بنویسی؛ وگرنه undefined می گیری.
// نادرست: چیزی برنمی گرداند
let myFunction = (x, y) => {
x * y;
};
// نادرست: return بیرونِ بدنه نیست
let myFunction2 = (x, y) => return x * y ;
// درست: return داخل آکولاد
let myFunction3 = (x, y) => {
return x * y;
};
this در توابع پیکانی
«this» در پیکانی «بسته (Lexical)» است؛ یعنی از محیط بیرونی می آید. برای متد شیء مناسب نیست، چون this به شیء بایند نمی شود.
// تابع معمولی: this همان فراخواننده است
let hello = function() {
document.getElementById("demo").innerHTML += this;
};
window.addEventListener("load", hello);
document.getElementById("btn").addEventListener("click", hello);
// پیکانی: this از محیط می آید (مالک تابع)
let hello = () => {
document.getElementById("demo").innerHTML += this;
};
window.addEventListener("load", hello);
document.getElementById("btn").addEventListener("click", hello);
هشدار: توابع پیکانی hoist نمی شوند؛ قبل از استفاده تعریفشان کن.
گام های تمرینی
- یک تابع ضرب پیکانی بساز و تست کن.
- نسخه تک دستوری آن را بدون return بنویس.
- مثال this را با دکمه صفحه امتحان کن.
جمع بندی سریع
- پیکانی، نسخه کوتاه عبارت تابع است.
- یک دستور؛ بازگشت خودکار دارد.
- بدنه بلوکی، return می خواهد.
- this در پیکانی لکسیکال است.
- برای متد شیء، معمولی بهتر است.
برای پایه کار، بخش تعریف تابع را بخوان. سپس برای ورودی ها، به پارامترهای تابع برو. این صفحه مرجع خوب توابع پیکانی است.