تابع های Arrow در جاوا اسکریپت — از صفر تا صد

تقریباً سه سال از زمانی که تابع‌های arrow به جاوا اسکریپت اضافه شده‌اند، می‌گذرد و این توابع به یکی از محبوب‌ترین ویژگی‌های این زبان برنامه‌نویسی تبدیل شده‌اند.

مزایای اصلی تابع‌های Arrow

• ساختار خلاصه‌تر نسبت به تابع‌های نرمال
• عدم اتصال (bind) به this

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

در این مقاله ساختار فشرده‌تر تابع‌های arrow را بررسی کرده و همچنین آن‌ها را با معادل‌های نرمالشان مقایسه می‌کنیم. در نهایت دو قاعده برای درک بهتر ساختار تابع‌های arrow ارائه می‌کنیم.

اگر حس می‌کنید ابتدا باید اطلاعات خود را در مورد تابع‌های جاوا اسکریپت بازنگری بکنید پیشنهاد می‌کنیم پیش از ادامه این نوشته مقاله «راهنمای جامع تابع‌های جاوا اسکریپت» را مطالعه کنید.

ساختار عبارت تابعی

عبارت تابعی یک شیء تابع ناشناس است که برابر با یک متغیر گرفته می‌شود. دلیل ناشناس بودن این تابع آن است که نامی ندارد. ساختار آن شامل کلیدواژه function و سپس صفر یا چند parameters است و در انتها statements تابع می‌آیند.

ساختار این تابع چیزی شبیه زیر است:

const name = function(parameters){
   statements
}

یک مثال واقعی از چنین تابعی به صورت زیر خواهد بود:

const double = function(num){
   return num * 2;
}

در این مثال شیء تابع ناشناس خود را برابر با متغیر double در نظر گرفتیم. Function ما یک پارامتر به نام num می‌گیرد و یک عبارت به صورت num * 2 دارد.

این تابع را با فراخوانی زیر می‌توان اجرا کرد:

double(3);
// 6

ساختار تابع Arrow

یک تابع arrow مشابه عبارت تابعی است و تنها تفاوت این است که کوتاه‌تر است. در این مورد نیز یک تابع ناشناس به یک متغیر دارای نام انتساب می‌یابد. ساختار تابع arrow شامل صفر یا چند پارامتر، در ادامه یک فلش <= و سپس در انتها عبارت‌های تابع است:

const name = (parameters) => {
   statements
}

اگر از مثال واقعی قبلی استفاده کنیم، تابع double ما با ساختار arrow خود مانند زیر خواهد بود:

const double = (num) => {
   return num * 2;
}

وقتی که این تابع arrow را با عبارت تابعی قبلی مقایسه کنید، می‌بینید که تفاوت زیادی ندارند:

// Function Expression

const doubleEXP = function(num){
   return num * 2;
}

// Arrow Function

const doubleARR = (num) => {
   return num * 2;
}

همه کاری که انجام داده‌ایم این است که کلیدواژه function را حذف کردیم و آن را با <= جایگزین کرده‌ایم.

می‌بینید که هر دو تابع هنگام فراخوانی، نتیجه یکسانی را بازمی‌گردانند:

doubleEXP(3);
// 6

doubleARR(3);
// 6

این هم نوعی پیشرفت محسوب می‌شود؛ اما واقعیت این است که تابع arrow می‌تواند بسیار بیش از این ساده‌تر شود. در واقع می‌تواند کاملاً فشرده شود. برای نمونه تابع double فوق را می‌توان به صورت زیر نوشت:

const double = num => num * 2;

کارکرد این تابع همانند تابع فوق است.

گرچه این وضعیت کمی سردرگم کننده به نظر می‌رسد؛ اما با ادامه مطالعه این مقاله دلیل این که چرا این دو تابع یکسان هستند را درخواهید یافت:

const double = (num) => {
return num * 2;
}

// Is the same as

const double = num => num * 2;

پارامترهای تابع Arrow

وقتی پارامترهای تابع arrow را بررسی می‌کنیم، باید به خاطر داشته باشیم که تعداد پارامترها در یک تابع arrow بر ساختار آن تابع تأثیر دارد.

اگر 0 پارامتر وجود داشته باشد، در تابع arrow از پرانتز خالی استفاده می‌شود:

() => { statements }

اگر 1 پارامتر وجود داشته باشد، در تابع arrow می‌توان پرانتزها را از پیرامون آن پارامتر برداشت:

parameter => { statements }

اگر 2 پارامتر یا بیشتر وجود داشته باشند، در این صورت پارامترها باید درون پرانتز قرار گیرند:

(param1, param2, ...) => { statements }

اینک به مثال double پیشین خود باز می‌گردیم. با استفاده از قواعدی که در بخش فوق اشاره کردیم می‌بینیم که وقتی تابع arrow یک پارامتر داشته باشد؛ می‌توانیم پرانتزها را حذف کنیم. این وضعیت در کد زیر مشخص است:

const double = (num) => {
return num * 2;
}

// Is the same as

const double = num => num * 2;

بازگشتی از تابع Arrow

تابع‌های Arrow روشی درونی برای کوتاه‌سازی ساختار بازگشتی نیز دارند. بدین ترتیب که اگر تابع arrow صرفاً یک خط کد را بازگشت می‌دهد، می‌توانید براکت‌های عبارت و کلیدواژه return را حذف کنید. بدین ترتیب تابع arrow می‌تواند عبارت موردنظر را بازگشت دهد.

عبارت تابعی زیر را در نظر بگیرید:

let name = function(parameters){
   return expression
}

آن را می‌توان به صورت زیر خلاصه کرد:

let name = (parameters) => expression

با به خاطر سپردن این مسئله اگر بخواهیم مثال اولیه double خود مقداری را بازگشت دهیم می‌توانیم به شیوه تأثیر این قاعده بر نمونه کد خودمان نگاهی داشته باشیم:

const double = (num) => {
   return num * 2;
}

// Is the same as

const double = num => num * 2;

نتایج کلیدی

• تعداد پارامترهایی که یک تابع arrow می‌پذیرد، کلید تعیین ساختار تابع است.
• اگر یک خط کد از یک تابع arrow بازگشت می‌یابد، می‌توان پرانتزها و کلیدواژه return را حذف کرده و صرفاً عبارت بازگشتی را نوشت.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

چالش‌ها

یکی از روش‌های سرگرم‌کننده برای درک و یادگیری این قواعد تشکیل دهنده ساختار تابع‌های arrow تلاش برای تبدیل عبارت‌های تابعی به یک تابع arrow است. در ادامه سه چالش ارائه شده است تا ببینید آیا می‌توانید آن‌ها را به تابع‌های arrow تبدیل کنید یا نه.

چالش شماره 1

const add3 = function(num1, num2, num3){
   return num1 + num2 + num3;
}

چالش شماره 2

const square = function(num){
   return num ** 2;
}

چالش شماره 3

const sayHi = function(){
   console.log('Hi');
}

در این بخش پاسخ چالش‌های فوق ارائه شده است، ولی قویاً توصیه می‌کنیم قبل از مطالعه پاسخ‌ها شانس خود را برای حل تمرین‌های فوق بررسی کنید.

پاسخ چالش شماره 1

در این چالش سه پارامتر وجود دارند و بنابراین باید درون پرانتز قرار گرفتند. ما یک عبارت منفرد را بازگشت می‌دهیم و لذا می‌توانیم پرانتزها و عبارت return را حذف کنیم:

const add3 = (num1, num2, num3) => num1 + num2 + num3;

پاسخ چالش شماره 2

این چالش کاملاً شبیه مثال double قبلی ما است. یک پارامتر وجود دارد و لذا می‌توانیم پرانتزها را حذف کنیم. یک عبارت بازگشت می‌یابد و بنابراین می‌توانیم براکت‌ها و return را حذف کنیم.

const square = num => num ** 2;

پاسخ چالش شماره 3

این سؤال کمی نیاز به دقت دارد. آیا متوجه نکته انحرافی شدید؟ هیچ پارامتری وجود ندارد و لذا از پرانتزهای خالی استفاده می‌کنیم. ما هیچ چیز باز نمی‌گردانیم و قصدمان صرفاً logging است. بنابراین هیچ میانبری برای عبارت وجود ندارد:

const sayHi = () => {
   console.log('Hi');
}

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های طراحی و برنامه نویسی وب
• چگونه با استفاده از جیسون (JSON) بین پایتون و جاوا اسکریپت ارتباط برقرار کنیم؟
• آموزش تعریف توابع در جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های برنامه‌نویسی
• ۱۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید
• منطق شرطی (Conditional Logic) در جاوا اسکریپت — از صفر تا صد

==