آموزش ویژگی های ECMAScript 6 (جلسه 6) : معرفی Arrow function - قسمت 1

همونطور که اطلاع دارید در جلسه قبل در مورد کلمات کلیدی let و const توضیحاتی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه قصد داریم در مورد Arrow function توضیح بدیم. Arrow function در زبانهای معروف و پرکاربرد دیگه بصورت فراوان مورد استفاده قرار میگیره و کمبود اون در Javascript احساس میشد. مثلا کسانی که با C# کار کرده باشن، با Arrow function ها که از => یا همون پیکان برای تعریف توابع استفاده میکنن، آشنایی دارند. خوشبختانه این ویژگی در ES6 به Javascript اضافه شد و میتونیم به راحتی از اون استفاده کنیم. در زیر با استفاده از مثالهای متنوع این ویژگی جدید رو بهتون آموزش میدیم. همونطور که میدونین ما توابع بی نام یا Anonymous رو زیاد مورد استفاده قرار میدیم. Arrow Function یک جایگزین کوتاه برای اونا هستن. کد زیر که یک کد ES5 هست رو، در نظر بگیرید:

در بالا ما از حالت عادی تابع استفاده کردیم. حالا اگر بخوایم از Arrow function استفاده کنیم، کد بالا بصورت زیر در میاد:

کد بالا یک کد ES6 هست و در اون از Arrow function استفاده میشه. میبینید که حجم کدها خیلی کمتر شده و خوانایی اون بیشتر و بهتر شده است. همونطور که میبینید دیگه از کلمه function استفاده نمیکنیم و بجای اون بعد از پارامتر value از علامت Arrow یا فلش => استفاده کردیم. همونطور که دیدید {} و return رو هم از کد بالا حذف کردیم. زمانی که فقط یک دستور درون تابع وجود دارد دیگه نیاز نیس از {} استفاده کنید. زمانی که یک دستور دارید و میخواید در اون دستور چیزی رو برگشت بدین، نیازی نیست که از return استفاده کنید و اینکار بصورت ضمنی انجام خواهد شد. اگر تعداد پارامترها 0 یا 2 یا بیشتر باشد، باید حتما از پرانتز استفاده کنید. مثلا اگر دو پارامتر داشته باشیم، کد بصورت زیر میشه:

همونطور که دیدید یک متغیر sum تعریف کردیم و یک تابع بی نام یا Anonymous رو برای اون قرار دادیم و کار این تابع، جمع کردن دو عدد با یکدیگر است. خب اگر بخوایم این تابع رو بصورت Arrow Function در بیاریم، کد بالا بصورت زیر خواهد شد:

میبینید که سه خط کد رو به یک خط کد تبدیل کردیم. چون دو پارامتر داریم، پس باید حتما از پرانتز استفاده کنیم و چون میخوایم مقداری رو برگشت بدیم، دیگه نیازی به نوشتن return نیس و این کار بصورت ضمنی انجام میشه. حالا حالتی رو در نظر میگیریم که هیچ پارامتری برای تابع وجود نداشته باشد. کد زیر رو در نظر بگیرید:

همونطور که میبینید این تابع هیچ پارامتری رو دریافت نمیکنه و فقط یک نام رو برگشت میده. حالا اگر بخوایم این تابع رو بصورت Arrow function در بیاریم، بصورت زیر خواهد شد:

میبینید که در حالاتی که پارامتر نداریم نیز باید از پرانتز استفاده کنیم. پس زمانی که تعداد پارامترها 0 یا 2 یا بیشتر باشد، استفاده از پرانتز ضروری است. یک تفاوت اصلی که Arrow function ها با توابع عادی دارند این هست که در اونا به شئ arguments دسترسی نداریم.

در حالاتی که تعداد دستورهای درون تابع از یک خط بیشتر شود، شما حتما باید از {} استفاده کنید و از کلمه return نیز برای برگشت دادن مقادیر مورد نظرتون استفاده کنید. برای مثال کد زیر رو در نظر بگیرید:

اگر بخوایم این تابع رو بصورت Arrow function در بیاریم، خروجی بصورت زیر خواهد شد:

به همین سادگی. در جلسه بعد دیگر تفاوتهای اصلی Arrow function با توابع عادی رو بیان میکنم.

موفق و پیروز باشید.

یا علی