قسمت دوم

دوستان عزیز این مقاله ترجمه‌ای است بر مقاله Modern javascript cheatsheet است که به زبان خودمانی و ساده امکانات جاوا اسکریپت ES6 رو در چند قسمت به شما ارائه خواهم داد.

در قسمت قبل به تعریف متغییر، حوزه دسترسی به آنها و نحوه استفاده و عملکرد انها پرداختیم.

در این قسمت به مبحث Arrow function ها خواهیم پرداخت.

در قسمت قبل با متغییر ها آشنا شدیم. در این قسمت قصد داریم در مورد Arrow function ها صحبت کنیم.

Arrow function در جاوا اسکریپت:

Arrow function ها در آپدیت جدید جاوا اسکریپت معرفی شدند.

Arrow function ها راه و روش دیگه‌ای رو برای تعریف و استفاده از توابع ارائه کرده‌اند.

در زیر مزایای Arrow function ها آورده شده :

  • مختصرتر و کوتاه‌تر هست (تعداد خطوط کدنویسی رو کاهش داده)
  • this از بیرونی ترین بلاک کد گرفته می‌شود
  • یه return مخفی داخل خودش داره

نمونه کد:

  • کوتاهی کد و return درونی:

روش مرسوم جاوا اسکریپت:

همون تابع با Arrow function نوشته شده به همراه یه return درونی:

  • ارجاع this

در یه this، Arrow function معادل با مقدار this از بلاک کد بیرون Arrow function می‌باشد.

اساساً، با استفاده از Arrow function در جاوا اسکریپت شما لازم نیست قبل از فراخوانی یه تابع درون یک تابع دیگه از ترفند “that = this” استفاده کنید.

نمونه کد:

نکته: در نمونه کد بالا مقدار this از بلاک کد myFunc گرفته شده است.

توضیحات مفصل:

مختصر بودن:

Arrow function ها در بسیاری از موارد بسیار مختصرتر از روش مرسوم در جاوا اسکریپت هستند. اجازه بدید همه حالت های مختلف رو بررسی کنیم.

  • return درونی در مقابل return دستی

یه return دستی، یه تابع هست که کلیدواژه return تو بدنه اون استفاده شده باشه.

نمونه کد (return دستی):

در روش مرسوم نوشتن تابع return همیشه دستی بود. اما با Arrow function شما میتونید return درونی انجام بدید. بدین معنی که شما برای برگردوندن یه مقدار نیاز به استفاده از کلیدواژه return ندارید.

برای انجام یه return درونی، کد باید تو یه عبارت یک خطی نوشته بشه.

نمونه کد:

از اونجایی که تابع فقط یه مقدار رو برمیگردونه، ما میتونیم یه return درونی انجام بدیم.

نمونه کد:

برای انجام این کار (کد بالا)، فقط نیازه تا ما براکت ها { } و کلمه کلیدی return رو از کد حذف کنیم. به همین خاطر هست که implicit return (یا return درونی) نامیده میشه. کلمه کلیدی return در کد وجود نداره، اما این تابع مقدار x * 2 رو بر خواهد گردوند.

نکته: در جاوا اسکریپت اگه تابع شما مقداری رو بر نگردونه، این کار (return) رو به صورت دستی یا درونی نیز انجام نخواهد داد.

اگه شما می خواید یه شی رو به صورت درونی بازگشت بدید باید پرانتز () ابتدا و انتهاش قرار بدید. این کار از تداخل کد با بقیه بلاک کد جلوگیری بشه:

  • فقط یک آرگومان

اگه تابع شما فقط یه پارامتر میگیره، میتونید از پرانتزهای اطراف صرف نظر کنید. اگه کد double قبل رو برگردونیم:

چون این Arrow function فقط یه پارامتر میگیره، پرانتزهای اطراف پرارمتر میتونن حذف بشن.

  • بدون آرگومان

وقتی آرگومانی برای یه Arrow function نداشته باشید، باید از پرانتزها استفاده کنید. این کار باعث میشه که کد شما Syntax صحیحی داشته باشه.

این کد بدون پرانتز نامعتبر بوده و کار نخواهد کرد.

ارجاع this

برای درک این مطلب بهتره با چگونگی عملکرد this در جاوا اسکریپت بیشتر آشنا بشید.

در یه this، Arrow function معادل با مقدار this از بلاک کد بیرون Arrow function می‌باشد. بدین معنی که یه Arrow function یه this جدید نمیسازه، بلکه اونو از بیرون Arrow function میگیره.

بدون Arrow function، اگه شما بخواید به یه متغییر از this در یه تابع درون یه تابع دیگه دسترسی داشته باشید. باید از حقه that=this یا self=this استفاده کنید.

برای نمونه، استفاده از تابع setTimeout درون تابع myFunc :

توضیح نویسنده:

در بالای کد از حقه that=this استفاده شده است. چون تابع درون تابع جاوا اسکریپت setTimeout یه this جدید میسازه. میبینید که در خطی آخر کد از this استفاده شده و مقداری وجود نداره.

با استفاده از this ،Arrow function از بیرون Arrow function گرفته میشه.

خب دوستان این قسمت هم به پایان رسید. انتقادات، پیشنهادات و نظرات خودتون رو برای ما ارسال کنید. امیدوارم مطلب مفیدی بوده باشه.

 

نوشته شده توسط : میثم راه‌پیما