توابع - قسمت 5 | Arrow Functions

سلام جاوااسکریپتی‌ها! توی این قسمت می‌خوایم با یک روش جدید برای داشتن توابع توی جاوااسکریپت آشنا بشیم. یعنی Arrow Function!

Arrow Function چیه؟ 🤔

توی قسمت قبل با Function Expression ها آشنا شدیم و دیدیم که این توابع چطوری ساخته میشن و چه ویژگی‌هایی دارن. مثلاً:

const add = function (a, b) {
  return a + b;
}

توی کد بالا یک متغیر ساختیم و یک تابع که به صورت Function Expresssion ساخته شده رو به اون نسبت دادیم.

توی جاوااسکریپت یک روش کوتاه‌تر و اختصاصی برای داشتن Function Expression وجود داره که اون هم استفاده از Arrow Function هاست 👌

Arrow Function چه شکلیه؟

نحوه نوشتن یک Arrow Function به صورت زیر هست:

() => "Hi"

همونطور که می‌بینیم یک روش جمع و جور برای داشتن توابع در اختیار داریم. به دلیل وجود علامت => به اونها Arrow Function (کمان) گفته میشه.

مقایسه با توابع معمولی

کد بالا مشابه کد زیر هست:

function() {
  return "Hi";
}

خب ساختار این توابع شاید توی نگاه اول مقداری گنگ باشه. بیاید ساختار اون رو بیشتر بررسی کنیم.

بررسی ساختار Arrow Function

همونطور که رایج هست، ما ابتدا Function Expression ها رو می‌ریزیم توی یک متغیر:

const welcome = () => "Hi"

و به صورت زیر درست مثل توابع معمولی می‌تونیم از اون استفاده کنیم:

welcome();

پارامترها رو کجا تعریف کنیم؟

توی این توابع دیگه از کلمه‌کلیدی function استفاده نمی‌کنیم. اما پرانتزهایی که محل قرارگیری پارامترهای توابع بود رو داریم. این پرانتزها درست قبل از علامت => قرار گرفته. پس می‌تونیم ورودی‌های توابع رو اونجا مشخص کنیم:

const welcome = (name, age = null) => "Hi " + name

alert(welcome('Mario'));

اگه تابع ما فقط یک پارامتر داره، می‌تونیم از نوشتن پرانتزها صرف نظر کنیم:

const welcome = name => "Hi"

توی کد بالا، name تنها پارامتر تابع هست.

خروجی تابع کجا مشخص میشه؟

هر چیزی که بعد از علامت => قرار بگیره، به عنوان خروجی تابع در نظر گرفته میشه و return میشه:

const sayHi = () => "Hi";

alert(sayHi());

در واقع چیزی که بعد از علامت => قرار گرفته، بدنه تابع هست که هر چیزی باشه برامون ریترن میشه. اما اگه تابعی داشته باشیم که بدنه چند خطی داشته باشه چطور؟ کافیه بدنه تابع رو توی براکت باز و بسته قرار بدیم:

const welcome = () => {
  // ...
}

اما نکته‌ای که باید در نظر داشته باشیم اینه که اگه بدنه تابع رو توی براکت‌ها بذاریم، خودمون باید صراحتاً از کلمه‌کلیدی return برای مشخص کردن خروجی تابع استفاده کنیم. در غیر این صورت از تابع چیزی ریترن نمیشه و خروجی اون undefined خواهد بود:

const withReturn = () => {
  return "Welcome!";
}

// no return keyword
const withoutReturn = () => {
  "Welcome!";
}

alert(withReturn());    // Welcome!
alert(withoutReturn()); // undefined

خب دوستان اینها چیزهایی بودن که الان لازم بود درباره Arrow Function ها بدونیم. این توابع ویژگی‌های بیشتری دارن که جز‌ئی مباحث پیشرفته جاوااسکریپت (که بعداً قراره با اونها آشنا بشیم) به حساب میان و ما الان احتیاجی به اونها نداریم. اما خب اگه طالب سرسخت علم هستین، این صفحه رو ببینین 👏