یه syntax ساده و مختصری برای ایجاد تابع وجود دارد که معمولا از Function Expression ها بهتر است.
این “arrow functions” نامیده می شود ، زیرا به این شکل است:
۱ |
let func = (arg1, arg2, ...argN) => expression |
اینجا تابع func پارامتر های arg1 تا argN رو قبول میکنه سپس محاسباتی رو انجام داده و در در صورت نیاز نتیجه رو برمیگرداند.
به عبارتی دیگر ، یک ورژن کوتاهتر:
۱ ۲ ۳ |
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(۱, ۲) ); // ۳ |
همانطور که گفتیم (a, b) => a + b
دو پارامتر a, b رو به عنوان پارمتر ورودی گرفته و مجموعش رو برمیگردونه.
اگر شما فقط یک پارامتر دارید میتونید اون رو بدون پرانتز بنویسید:
۱ ۲ ۳ ۴ |
let double = n => n * ۲; // roughly the same as: let double = function(n) { return n * 2 } alert( double(۳) ); // ۶ |
اگر هیچ پارامتری نداشتید باید پرانتز باز و بسته رو به صورت خالی بنویسید:
۱ ۲ ۳ |
let sayHi = () => alert("Hello!"); sayHi(); |
Arrow function رو میشه مثل Function Expression نوشت.
برای مثال یه تابع رو به صورت پویا میشه اینجوری نوشت :
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
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(۱, ۲) ); // ۳ |
در باره 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."); } ); |
برچسب ها:آموزش arrow functions در جاوااسکریپتآموزش اصول es6آموزش اصول اولیه arrow functionsآموزش اصول اولیه arrow functions در javascriptآموزش اصول اولیه arrow functions در جاوا اسکریپتآموزش اصول اولیه arrow functions در جاوااسکریپتآموزش توابع پیکان در es6آموزش توابع پیکان در جاوااسکریپتاصول اولیه arrow functionsاصول اولیه arrow functions es6اصول اولیه arrow functions در جاوااسکریپتتوابع پیکان javascript