فوت و فن برنامه نویسی Functional با جاواسکریپت

تو این مقاله میخوام در مورد نکاتی توضیح بدم که برنامه نویسی Functional رو خیلی بهتر و راحتتر میکنه. برنامه نویسی به روش functional به ما قدرت بیشتری میده و اگه کسی به این موضوع مسلط باشه حتما میتونه به خوبی از پس هر مساله ای بر بیاد.
این که یک Task (و یا کد) رو بتونیم به قسمت های کوچک تقسیم کنیم و برای هر کدوم تابع بنویسیم علاوه بر اینکه به فرآیند debug کردن خیلی خیلی کمک میکنه ، باعث میشه کدهای تمیز تر و بهتری بزنیم.
نکته مثبت دیگه هم که وجود داره کمک به حذف تکرار های متعدد هست و همچنین مارو از تعریف متغیر و ثابت و ... نجات میده ( که به نوبه خودش کمک میکنه به افزایش کارایی و سرعت برنامه)
البته دنیای برنامه نویسی به سبک functional خیلی وسیع تر از این حرفهاست . اما به کار گرفتن این روشها قدرت بیشتری به همه توسعه دهندگان این زبان جاواسکریپت. فرقی نمیکنه که با Node , Vue , React, Angular و ... کار میکنید، این نکات برای شما هم سومند هست.

توابع مرتبه بالا یا HOF

اینها توابعی هستند که به جای متغیر ، یک تابع در ورودی میگیرند و یک تابع دیگه رو برمیگردونند. به این مثال توجه کنید:

تابع withCount یک تابع در ورودی میگیره و با متغیر count شمارش میکنه که این تابع چند بار در خروجی return میشه. تو دل این تابع مرتبه بالا، همه پارامترهای ورودی بدون هیچ تغییری به تابع پاس داده میشه.

در ادامه یک تابع add ساده با arrow function نوشتیم که ۲ مقدار رو باهم جمع میکنه . و این تابع رو به عنوان تابع ورودی به تابع مرتبه بالای withCount میدیم. در انتها هم تابع جمع رو صدا میزنیم . نتیجه:

call count: 1
2
call count: 2
3
call count: 3
4

همچنین میتونید به سایر مقاله های من در ویرگول سری بزنید:

داده های غیر قابل تغییر

همونطور که میدونید وقتی نوع reference type رو کپی میکنیم و یکی رو تغییر میدیم دیگری هم تغییر میکنه . برای جلوگیری از این کار روش های مختلفی وجود داره . من تو این مثال از توابع کمک گرفتم و یک تابع جدید برای  push نوشتم که یک آرایه و یک آیتم رو در ورودی میگیره و آیتم رو به آرایه اضافه میکنه (بدون اینکه آرایه اصلی رو تغییر بده).

اصطلاح Currying

ترجمه این اسم به فارسی کمی مشکل هست اما با دقت کردن به مثالی که آوردم ، علت نامگذاری رو متوجه میشید.

یک تابع جمع نوشتیم که در بار اول یک مقدار و بار دومی که صدا زده میشه مقدار دیگری میگیره و در نهایت این ۲ مقدار رو باهم جمع میکنه و برمیگردونه . به این شکل میشه خیلی کارهای تکراری رو که بر پایه یک تابع دیگه هستند مدیریت کرد و یا چند ورژن از یک تابع رو داشته باشیم.

در انتهای کد هم همین تابع رو با روش arrow function به ساده ترین شکل ممکن نوشتم!

ما میتونیم نسخه addTwo رو هم داشته باشیم و به همین شکل به راحتی با یک بار نوشتن تابع add چند بار و در چند جای مختلف ازش استفاده کنیم.

برنامه جزئی

این یکی از محبوب ترین مورد های برنامه نویسی functional هست. یکی از پر مصرفترین شرایطی که میتونیم از این روش استفاده کنیم ، fetch هست. مثلا در این مثال ما با ۲ قسمت از api سایت github کار داریم. به جای اینکه برای هر کدوم از قسمت های جزئی ، از یک متد fetch استفاده کنیم از یک متد جامع تر استفاده میکنیم و برای قسمت های جزئی تر توابع مختلف مینویسیم.
برای اینکار لازمه آدرسی که داریم رو به چند بخش تقسیم کنیم که بتونیم روی هر بخش به طور خاص کاری انجام بدیم.

تابع getFromAPI سه مقدار در ورودی میگیره . دوتای اول مربوط به آدرس URL و آدرس سوم یک تابع callback.

من برای getGithubUsers دو تا تابعی که لازم داشتم رو نوشتم و شما میتونید هر کاری که دارید رو با این قسمت انجام بدید . به همین ترتیب با تابع getGithubRepos هم میشه هر کاری که خواستیم انجام بدیم. این روش به کوتاه شدن کد ما و خالی شدن NameSpace  کمک میکنه . همه چیز رو چند تا تابع مدیریت میکنند.

اصلاح Pointfree

به این کد دقت کنید:

این کد هیچ مشکلی به لحاظ لغوی و اجرایی نداره. و طرز کارش اینه که هر آیتم از آرایه رو بهش ورودی میدیم و در نتیجه اون رو ۲ برابر میکنه و یک لیست جدید برمیگردونه. اما این تابعی که به  map دادیم زیبا نیست . هیچ اسمی نداره و اگر مشکلی وجود داشته باشه کار دیباگ کردن رو سخت میکنه . بهتره که برای برنامه نویسی functional از این روش استفاده کنیم:

هرچند که در توسعه ری اکت و غیره به مراتب از روش اول استفاده میشه اما استفاده از روشی که اینجا گفته شد کار دیباگ کردن رو برامون خیلی راحت میکنه.

ترکیب

یکی از پیچیده ترین قسمت های توابع functional همین ترکیب توابع باهم هست که میتونه برنامه نویس رو در ابتدا گیج و سردرگم کنه. البته من به صورت عمقی به این موضوع اشاره نمیکنم.

در مثال اول ۲ تابع رو به صورت تو در تو استفاده کردیم و خروجی که g به ما میده رو به عنوان ورودی تابع f استفاده کردیم. خوب این مساله در دنیای واقعی کمتر اتفاق میوفته زمانی که با توابع پیچیده تری سر و کار داریم.

مثال دوم تابعی که یک متنی رو در ورودی بهش میدیم و در هر تابع کاری برای متن انجام میشه و در انتها با قرار دادن این ۳ تابع در هم میشه نتیجه لازم رو گرفت .
همین کار رو با نوشتن یک تابع compose و استفاده از reducer هم میشه انجام داد (این روش ممکنه که سخت به نظر بیاد اما نتایج مثبتی داره)

همیشه با تابع reduce کار میکردیم اما تابع مشابه دیگه ای هم به اسم reduceRight داریم که وظیفه مشابه reduce داره. برای مشاهده بیشتر از این تابع هم میتونید به این لینک مراجعه کنید.

امیدوارم که استفاده کرده باشید. هرچند که برنامه نویسی فانکشنال دنیای بزرگی داره ،‌اما من سعی کردم چند تا از روش های کاربردی (که بیشتر به درمون میخوره تو پروژه های مختلف) رو مطرح کنم.

میتونید رقیب جاواسکریپت رو هم یاد بگیرید:

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123/