توابع پیکانی
تا اینجا یاد گرفتید تابع را اعلان کنید، آرگومان بدهید و با return جواب را بیرون بفرستید. خیلی از کمک‌کارهای روزمره کوتاه‌اند و نوشتن کاملِ function سنگین به‌نظر می‌رسد. JavaScript شکل فشرده‌تری هم دارد: تابع پیکانی با نشانهٔ =>.
تابع پیکانی یعنی چه
هنوز همان تابع است: ورودی می‌گیرد، بدنه را اجرا می‌کند، می‌تواند نتیجه برگرداند. فقط شکل عوض می‌شود. معمولاً با const اسم می‌گذارید، پارامترها را می‌نویسید، => می‌آید، بعد یا یک عبارت کوتاه یا یک بلوک { }.
کنار اعلان کلاسیک
📊 تابع کلاسیک در برابر پیکانی
| مفهوم | شکل کلاسیک | شکل پیکانی |
|---|---|---|
| کمک‌کار نام‌دار | function add(a, b) { return a + b; } |
const add = (a, b) => a + b; |
| یک عبارت برگشتی | return a + b; داخل { } |
عبارت بعد از => خودش برمی‌گردد |
| چند دستور | { } به‌همراه return |
همان قاعده: { } و return |
| یک پارامتر | (name) |
name => ... (پرانتز اختیاری) |
| بدون پارامتر | function hi() { ... } |
const hi = () => ... — () خالی لازم است |
| جای تعریف | اعلان یا عبارت | تقریباً همیشه داخل متغیر |
هر دو سبک می‌توانند عدد و رشته برگردانند. وقتی کمک‌کار کوچک است و اسم روشن با const می‌خواهید، پیکان راحت‌تر است. وقتی می‌خواهید یک بلوک نام‌دار برجسته باشد، function کلاسیک هم کاملاً درست است.
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);
عبارتِ بعد از پیکان خودش برمی‌گردد
اگر بعد از => فقط یک عبارت باشد، همان مقدار خودبه‌خود به صدازننده می‌رسد — نه { } لازم است نه کلمهٔ return. اینجا double(5) می‌شود ۱۰. آرگومان را عوض کنید؛ حاصل ضرب عوض می‌شود.
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));
با آکولاد خودتان return بنویسید
وقتی بدنه داخل { } است، JavaScript آخرین خط را خودکار برنمی‌گرداند. مثل تابع کلاسیک باید return بنویسید. خروج زودهنگام و منطق چندمرحله‌ای همین‌طور خوانا می‌ماند.
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);
یک پارامتر: پرانتز را می‌شود برداشت
اگر دقیقاً یک پارامتر دارید، می‌توانید name => ... بنویسید بدون ( ). محل صدا عوض نمی‌شود: greet("Sara"). با دو پارامتر یا بیشتر، پرانتز بماند.
const hello = () => "Hello";
console.log(hello());
صفر پارامتر هم () می‌خواهد
وقتی ورودی ندارید، قبل از => پرانتز خالی بگذارید. حذفش خطای نحو است. صدا همچنان hello() است — آن جفت خالی یعنی «پارامتری نیست».
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));
اسم بگذارید، بعد صدا بزنید
const add = (a, b) => a + b پیکان را زیر نام add نگه می‌دارد. صدا مثل هر تابعی است: add(3, 4) مقدار ۷ می‌دهد. یک تعریف، دو صدا — بدنه را دوباره نمی‌نویسید.
پیکان را روی صفحه ببرید
با پیکان یک رشتهٔ خوش‌آمد بسازید، صدا بزنید، نتیجه را در پاراگراف بنویسید — همان الگوی صفحه، فقط شکل تابع کوتاه‌تر.
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>
پاراگراف Hello, Omar را نشان می‌دهد. پیکان رشته را برگرداند؛ خط بعد آن را روی صفحه گذاشت. فقط آرگومان را عوض کنید، تازه کنید، خط تازه را بخوانید. جلسهٔ بعد محدودهٔ دید است — کجا آن اسم‌ها دیده می‌شوند.
تمرین
function triple(n) { return n * 3; }را به پیکانِconstبا بدنهٔ عبارتی بازنویسی کنید.- بنویسید
const hi = name => "hi " + nameوhi("Neda")را چاپ کنید. - بنویسید
const ping = () => "pong"و یک‌بار صدا بزنید. - پیکانی با بلوک بنویسید که اگر
n === 0بود"zero"وگرنه"nonzero"برگرداند. - بعد از
const add = (a, b) => a + bمقدارadd(6, 1)را بگیرید و ببینید۷است. - در نمونهٔ HTML فقط رشتهٔ آرگومان را عوض کنید، تازه کنید، پاراگراف را بخوانید.
اشتباه‌های رایج
- بعد از
=>آکولاد باز کردن و فراموش کردنreturn— صدا می‌شودundefined - وقتی هیچ پارامتری نیست، حذف کردن
() - قاطی کردن
=>با عملگر مقایسه — پیکان نحوِ تابع است، نه «بزرگ‌تر از» - انتظار درس کامل دربارهٔ
thisدر همین صفحه — تفاوت اتصال مال جلسهٔ بعدی‌تر است؛ اینجا شکل فشرده است - فکر کردن که پیکان دانش
returnرا بی‌نیاز می‌کند — عبارت همچنان برمی‌گردد؛ بلوک همچنانreturnمی‌خواهد
خلاصه
- تابع پیکانی با
=>نوشته می‌شود و معمولاً درconstمی‌ماند - عبارتِ برهنه بعد از
=>خودش برمی‌گردد - بدنهٔ
{ }بهreturnصریح نیاز دارد - یک پارامتر می‌تواند بدون
( )باشد؛ صفر پارامتر()خالی می‌خواهد - صدا زدن با اسم، مثل هر تابع دیگر
- به‌روزرسانی صفحه می‌تواند از رشتهٔ برگشتیِ پیکان استفاده کند
- بعدی: محدودهٔ دید — اسم‌ها کجا زنده‌اند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود