۱۸ ژوئیه ۲۰۲۳

مفاهیم ساده‌ی Arrow functions

یک راه ساده‌تر و کوتاه‌تر دیگر برای ساختن تابع‌ها وجود دارد‌؛ راهی که معمولا از Function Expressions بهتر است.

به‌خاطر شکلی که دارد، arrow functions نام گرفته است.

let func = (arg1, arg2, ..., argN) => expression;

…این کد یک تابع func می‌سازد که آرگومان‌های arg1..argN را می‌پذیرد و با استفاده از این آرگومان‌ها expression سمت راست را ارزیابی می‌کند و نتیجه آن را برمی‌گرداند.

به بیانی دیگر، این کد نسخه‌ی کوتاه‌شده کد زیر است:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

بیایید مثال دیگری ببینیم:

let sum = (a, b) => a + b;

/* نسخه کوتاه تابع زیر است arrow function این:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

همانطور که می‌بینید (a + b) <= (a, b) بدین معنی‌ست که این تابع دو آرگومان با نام‌های a و b می‌پذیرد. و هنگام اجرا شدن، مقدار a + b را حساب می‌کند و نتیجه را برمی‌گرداند.

  • اگر فقط یک آرگومان داشته باشیم می‌توانیم پرانتز دور آرگومان را حذف کنیم و کد را از این هم کوتاه‌تر کنیم.

    برای مثال:

    let double = n => n * 2;
    // let double = function(n) { return n * 2 } :معادل است با
    
    alert( double(3) ); // 6
  • اگر آرگومان ورودی نداشته باشیم، پرانتزها خالی می‌مانند ولی حتما باید حاضر باشند:

    let sayHi = () => alert("Hello!");
    
    sayHi();

از Arrow functionها به همان شکل Function Expressionها استفاده می‌شود.

برای مثال، برای ساخت یک تابع به‌شکل داینامیک مانند زیر عمل می‌کنیم:

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

ممکن است در ابتدا غریبه و ناخوانا به نظر برسند اما وقتی چشمتان به آن عادت می‌کند، همه چیز عوض می‌شود.

و برای کدهای تک خطی بسیار مناسب هستند. مخصوصا وقتی خسته‌تر از آن هستیم که کلمات زیادی بنویسیم.

وقتی Arrow Functionها چندخطی می‌شوند

arrow function‌هایی که تا به اینجا دیدیم خیلی ساده بودند. آن‌ها آرگومان‌ها را از سمت چپ <= دریافت کردند، آن‌ها را ارزیابی کردند و عبارت سمت راست را از طریق آن‌ها برگرداندند.

گاهی اوقات ما به تابعی پیچیده‌تر همراه با چند عبارت و دستور نیاز داریم. در این صورت، می‌توانیم آن‌ها را درون آکولاد قرار دهیم. تفاوت اصلی این است که آکولادها برای برگرداندن یک مقدار به return نیاز دارند (درست مانند یک تابع عادی).

مانند این:

let sum = (a, b) => {  // کمانک یک تابع چندخظی را دربرمی‌گیرد
  let result = a + b;
  return result; // استفاده کنیم "return" اگر از آکولاد استفاده کنیم، سپس باید صراحتا از
};

alert( sum(1, 2) ); // 3
باز هم هست

ما در اینجا از کوتاهی و مختصری arrow functionها گفتیم. ولی فقط این نیست!

این توابع ویژگی‌های جالب دیگری هم دارند.

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

فعلا می‌توانیم از arrow functionها برای اعمال تک خطی و callbackها استفاده کنیم.

خلاصه

توابع Arrow function مناسب عملیات ساده خصوصا کدهای تک‌خطی هستند. آن‌ها دو حالت دارند:

  1. بدون آکولاد: (expression) <= (args...) – سمت راست یک expression یا عبارت است: تابع آن را ارزیابی می‌کند و نتیجه را برمی‌گرداند. اگر تنها یک آرگومان وجود داشته باشد، پرانتزها می‌توانند حذف شوند مانند n => n * 2.
  2. با آکولاد: { body } <= (args...) – آکولادها به ما این امکان را می‌دهند تا چند دستور را داخل تابع بنویسیم, اما در این صورت باید حتما از return برای بازگرداندن نتیجه استفاده کنیم.

تمارین

در کد زیر function expressionها را با arrow functionها جایگزین کنید:

function ask(question, yes, no) {
  if (confirm(question)) yes();
  else no();
}

ask(
  "Do you agree?",
  function () {
    alert("You agreed.");
  },
  function () {
    alert("You canceled the execution.");
  }
);
function ask(question, yes, no) {
  if (confirm(question)) yes();
  else no();
}

ask(
  "Do you agree?",
  () => alert("You agreed."),
  () => alert("You canceled the execution.")
);

کوتاه و تمیز است، مگر نه؟

نقشه آموزش

نظرات

قبل از نظر دادن این را بخوانید…
  • اگر پیشنهادی برای بهبود ترجمه دارید - لطفا یک ایشوی گیت‌هاب یا یک پول‌ریکوئست به جای کامنت‌گذاشتن باز کنید.
  • اگر چیزی را در مقاله متوجه نمی‌شوید – به دقت توضیح دهید.
  • برای قراردادن یک خط از کد، از تگ <code> استفاده کنید، برای چندین خط – کد را درون تگ <pre> قرار دهید، برای بیش از ده خط کد – از یک جعبهٔ شنی استفاده کنید. (plnkr، jsbin، codepen…)