اصول اولیه arrow functions

یه syntax ساده و مختصری برای ایجاد تابع وجود دارد که معمولا از Function Expression ها بهتر است.

این “arrow functions” نامیده می شود ، زیرا به این شکل است:

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

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

اینجا تابع func پارامتر های arg1 تا argN رو قبول میکنه سپس محاسباتی رو انجام داده و در در صورت نیاز نتیجه رو برمیگرداند.

به عبارتی دیگر ، یک ورژن کوتاهتر:

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

let func = function(arg1, arg2, ...argN) {

return expression;

};

بیایید یه مثال روشنتر رو ببینیم:

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

/* This arrow function is a shorter form of:

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

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

۱۰

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

/* This arrow function is a shorter form of:

let sum = function(a, b) {

return a + b;

};

alert( sum(۱, ۲) ); // ۳

همانطور که گفتیم (a, b) => a + b دو پارامتر a, b رو به عنوان پارمتر ورودی گرفته و مجموعش رو برمیگردونه.

اگر شما فقط یک پارامتر دارید میتونید اون رو بدون پرانتز بنویسید:

let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6

let double = n => n * ۲;

// roughly the same as: let double = function(n) { return n * 2 }

alert( double(۳) ); // ۶

اگر هیچ پارامتری نداشتید باید پرانتز باز و بسته رو به صورت خالی بنویسید:

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

sayHi();

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();

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

let welcome = (age < ۱۸) ?

() => alert('Hello') :

() => alert("Greetings!");

welcome();

Arrow functions ممکن است در ابتدا ناآشنا به نظر برسند و بسیار خوانا نباشند ، اما با عادت چشم ها به ساختار سریعاً تغییر می کند.

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

arrow function های چندخطی

مثالهای بالا پارامتر ها را از سمت چپ => گرفته و عبارت سمت راست را با آنها ارزیابی و یا محاسبه میکند.

گاهی اوقات ما به چیزی پیچیده تر نیاز داریم ، مانند عبارات یا گزاره های متعدد که باید آنها را در آکولاد بنویسیم.

سپس از return طبیعی در آنها استفاده کنید.

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

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

let sum = (a, b) => { // the curly brace opens a multiline function

let result = a + b;

return result; // if we use curly braces, then we need an explicit "return"

};

alert( sum(۱, ۲) ); // ۳

در باره arrow function بیشتر بدانیم

اینجا متخصرا در مورد arrow functions ها صحبت کردیم اما این همه چیز نیست.

arrow functions ها ویژگی های جذابتری دارند.

برای مطالعه عمیق آنها ، ابتدا باید برخی از جنبه های دیگر JavaScript را بشناسیم ، بنابراین بعداً در مباحث پیشرفته تر به Arrow functions برمیگردیم .

در حال حاضر ، ما می توانیم از arrow functions برای عملکردهای یک خطی و callbacks استفاده کنیم.

خلاصه

Arrow functions برای یک خط مفید است. ولی به دو صورت میشه نوشت اونها رو:

بدون آکولاد({}): (...args) => expressionسمت راست یک عبارت است، تابع آن را ارزیابی می کند و نتیجه را برمی گرداند.

با آکولاد({}): (...args) => { body } – آکولاد ها به ما اجازه می دهند تا چندین دستور را درون تابع بنویسیم ، اما برای بازگشت چیزی نیاز به rerturn صریح داریم.

تمرین

Function Expressions را با arrow functions در کد زیر جایگزین کنید:

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?",

function() { alert("You agreed."); },

function() { alert("You canceled the execution."); }

);

arrow function های چندخطی

خلاصه

تمرین

دیدگاهتان را بنویسید لغو پاسخ