شیوه استفاده از Arrow Function در جاوااسکریپت

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

البته ممکن است که ظاهر کلی این دستور کمی عجیب به نظر برسد اما در نهایت ارزش لازم برای یاد گرفتن را دارد. این دسته از توابع نه تنها باعث می‌شوند که زمان کمتری را برای تعریف تابع استفاده کنید، بلکه باعث می‌شوند که کدهای‌تان خواناتر باشد. تعداد بسیار زیادی از برنامه‌نویسان جاوااسکریپت در حال حاضر نیز به صورت روزانه از این شکل توابع استفاده می‌کنند.

سینتکس پایه‌ای این دسته از توابع در MDN به شکل زیر تعریف شده است:

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

در این آموزش برای آنکه بتوانیم ایجاد توابع arrow را در سناریوهای مختلف درک کنیم، از چندین مثال واقعی استفاده می‌نماییم. سعی داریم که تمام کدها را با استفاده از ES5 نیز پیاده‌سازی کنیم تا تفاوت‌ها را بهتر مشاهده نمایید.

بدون پارامتر ورودی

ساده‌ترین شکل یک تابع حالتی است که در آن ما هیچ پارامتر ورودی را وارد نمی‌کنیم. در مثال زیر ما تنها یک تابع ساده را تعریف کرده‌ایم و در نهایت آن را برابر یک متغیر قرار داده‌ایم. قصد داریم که ابتدا این کار را با استفاده از ES5 انجام دهیم:

// ES5 syntax with no parameters
var birthday = function() {
   return "Happy birthday!";
}

console.log( birthday() );
// Happy birthday!

در نسخه ES6 که ما قصد استفاده از توابع Arrow را داریم، به براکت‌ها، کلمات کلیدی function و return نیازی نخواهیم داشت. حال برای نوشتن تمام این تابع تنها به یک خط کدنویسی نیاز داریم. در کدهای زیر پرانتز خالی نشان دهنده آن است که ما تابعی فاقد پارامتر ورودی داریم. 

// ES6 syntax with no parameters
var birthday = () => "Happy birthday!";

console.log( birthday() );
// Happy birthday!

یک پارامتر ورودی

بیایید مثال قبلی را با یک پارامتر ورودی توسعه دهیم. برای سینتکس قدیمی، تنها کاری که می‌خواهیم انجام دهیم این است که ورودی name را به پارامتر اضافه کرده و در نهایت آن را به متن برگشتی الصاق کنیم. 

// ES5 syntax with one parameter
var birthday = function( name ) {
   return "Happy birthday, " + name + "!";
}

console.log( birthday( "John" ) );
// Happy birthday, John!

چنین رویکردی در حالت جدید، همان خروجی را خواهد داشت با این تفاوت که همه چیز بسیار فشرده‌تر است. حال تنها تغییراتی که باید انجام دهید اضافه کردن name به داخل پرانتزهای خالی و انتهای رشته‌ای است که به عنوان خروجی از آن استفاده می‌کنیم:

// ES6 syntax with one parameter

var birthday = ( name ) => "Happy birthday, " + name + "!" ;

console.log( birthday( "Jane" ) );

// Happy birthday, Jane!

دو پارامتر ورودی

شما می‌توانید از توابع arrow با هر تعداد که پارامتر می‌خواهید استفاده کنید. برای مثال در مثال بعدی قصد داریم که از دو پارامتر استفاده بکنیم که البته محدودیت تکنیکی برای انجام چنین کاری نداریم. پارامترهای ورودی age و name خواهند بود. ابتدا بیایید این کار را در ES5 انجام دهیم:

// ES5 syntax with two parameters
var birthday = function( age, name) {
   return "Happy " + age + "th birthday, " + name + "!";
}

console.log( birthday( 30, "John" ) );
// Happy 30th birthday, John!

همان خروجی را می‌توانید با استفاده از توابع arrow به صورت زیر پیاده‌سازی کنید.

// ES6 syntax with two parameters
var birthday = ( age, name ) => "Happy " + age + "th birthday, " + name + "!";

console.log( birthday( 32, "Jane" ) );
// Happy 32th birthday, Jane!

اگر فکر می ‌کنید که این کار باعث می‌شود یک خط کد شما بسیار طولانی شود، مشکلی نیست می‌توانید آن را در یک جفت براکت قرار دهید، اما به یاد داشته باشید که چنین کاری باعث می‌شود که نیاز به استفاده مجدد از کلمه کلیدی return داشته باشید://

// Same ES6 function enclosed in a function block
var birthday = ( age, name ) => {
   return "Happy " + age + "th birthday, " + name + "!"
};

console.log( birthday( 34, "James" ) );
// Happy 34th birthday, James!

دستورات شرطی

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

// Conditional statement with ES5 syntax
var switcher = function( state ) {
   if( state == "on" ) {
      return "Switched on!";
   } else if ( state == "off" ) {
      return "Switched off!";
   } else {
      return "Switcher not working!";
   }
}

console.log( switcher( "on" ) );
// Switched on!

می‌توانید چنین حالتی را با استفاده از توابع arrow پیاده‌سازی کنید که کار چندان دشواری نخواهد بود:

// Conditional statement with ES6 syntax
var switcher = ( state ) => {
   if( state == "on" ) {
      return "Switched on!";
   } else if ( state == "off" ) {
      return "Switched off!";
   } else {
      return "Switcher not working!";
   }
}

console.log( switcher( "off" ) );
// Switched off!

تعریف اشیاء

شما می‌توانید از توابع به عنوان یکسری setter استفاده کنید که مقدار داده‌ای یک شئ را تعریف می‌کنند. تابع setBirthday() در زیر کمک می‌کند تا بتوانید یک مقدار را روی name و age قرار دهید:

// Object literal setter with ES5 syntax
var setBirthday = function( name, age ) {
   return {
      name: name,
      age: age
   }
}

console.log( setBirthday( "John", 30 ) );
// Object { name: "John", age: 30 }

با استفاده از تعریف توابع به صورت arrow تمام این فرایند تنها در یک خط انجام می‌شود:

// Object literal setter with ES6 syntax
var setBirthday = ( name, age ) => ({ name: name, age: age });

console.log( setBirthday( "Jane", 32 ) );
// Object { name: "Jane", age: 32 }

اعمال تغییرات

شما می‌توانید از توابع به عنوان ابزاری برای تغییر داده‌های داخل یک آرایه نیز استفاده کنید. برای مثال به آرایه persons نگاهی بیاندازید. در این آرایه سه نمونه کلی با خاصیت‌های name و age وجود دارد:

var persons = [
   { name: "John", age: 30 },
   { name: "Jane", age: 32 },
   { name: "James", age: 34 }
];

متد map() در جاوااسکریپت به شما این کمک را می‌کند که از یک تابع روی تمام المان‌های یک آرایه استفاده کنید. برای استفاده از چنین حالتی در ES5 شما می‌توانید خاصیت name هر شخص را به صورت زیر برگشت دهید:

// Array manipulation with ES5 syntax
var haveBirthday = persons.map( function(person) {
   return person.name;
});

console.log( haveBirthday );
// Array(3) [ "John", "Jane", "James" ]

از طرف دیگر برای آنکه بتوانید چنین قابلیتی را در ES6 به کار بگیرید می‌توانید از روش زیر استفاده کنید:

// Array manipulation with ES6 syntax
var haveBirthday = persons.map( person => person.name );

console.log( haveBirthday );
// Array(3) [ "John", "Jane", "James" ]

چه زمانی نباید از توابع Arrow استفاده کنید

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

مهمترین مورد آن این است که شما نمی‌توانید از توابع Arrow برای ایجاد سازنده استفاده کنید. اگر شما از کلمه کلیدی new همراه با این دست توابع استفاده کنید، با خطا مواجه خواهید شد. دلیل این خطا هم آن است که جاوااسکریپت توابع arrow را مانند متدهای یک شئ می‌داند، به همین دلیل نیز توابع Arrow نمی‌توانند متدهای منحصر به فرد خودشان را داشته باشند.

شما نمی‌توانید از شکل قدیمی کلمه کلیدی this در توابع arrow استفاده کنید.

در پایان

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

منبع