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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۲ تیر ۱۳۹۶

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

var reflex = function(value) {
	return value;
}

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

var reflex = value => value;

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

var sum = function(num1, num2) {
	return num1 + num2;
}

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

var sum = (num1, num2) => num1 + num2;

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

var getName = function() {
	return 'Mohammad';
}

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

var getName = () => 'Mohammad';

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

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

var avg = function(num1, num2, num3) {
	var avg = (num1 + num2 + num3) / 3;
	return avg;
}

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

var avg = (num1, num2, num3) => {
	var avg = (num1 + num2 + num3) / 3;
	return avg;
}

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

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

یا علی

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

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

نیاز به لاگین

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