ری اکت رو قورت بده - ۴

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

نکته های ۲۹ و ۳۰ خیلی مربوط به ری اکت و ری اکت نیتیو نیست و در اصل نکات جاواسکریپتی هستند اما به دلیل اینکه تو کدهامون خیلی استفاده میشن اینجا بهشون اشاره میکنم:

۲۹- فرض کنیم آرایه ای داریم که شامل یکسری عدد صحیح هست. برای اینکه بخواهیم مجموع همه اعدادش رو به دست بیاریم :

• از حلقه for استفاده کنیم و یک متغیر محلی تعریف کنیم و با استفاده از حلقه هر عدد این لیست رو به متغیر محلیمون اضافه کنیم.
• استفاده از تابع reduce

استفاده از حلقه for توی اکثر زبان ها وجود داره و به شدت استفاده میشه ولی استفاده از تابع reduce موجود در زبان جاواسکریپت (و موجود در چند زبان دیگر) به ساده و تمیز شدن کد کمک میکنه.

همچنین توابع map & filter هم پرکاربرد هستند.

• تابع map زمانی استفاده میشه که بخواهیم کاری رو تمام اعضای لیست انجام بدیم
• تابع filter زمانی که لازم هست یکسری از اعضا رو حذف کنیم و یکسری دیگه رو بخواهیم نگه داریم(از اسمش مشخصه دیگه فیلتر میکنه)
• تابع reduce روی یک آرایه و یا Object که شامل چندین عضو هست اعمال میشه و اونهارو به ۱ عضو میرسونه !! معنی کلمه هم به همین اشاره میکنه (کاهش - تاه کردن - جمع کردن)

از تابع map & filter در نکات بعدی و قسمت های بعدی استفاده خواهد شد اما تو این قسمت میخوام تابع reducer رو بررسی کنم.

این تابع در ورودی ۲ مقدار میگیرد . اولی یک تابع و دومی یک ورودی که به عنوان مقدار اولیه معرفی میشه.

ورودی اولیه که یک تابع هست به این شکل تعریف میشود:

نکته:
توی بلاک کد منطق مربوط به کدمون رو مینویسیم . ازین بلاک تابع یک مقداری باید return بشه!
در صورتی که در هر سیکل عمل return انجام نشه مقدار undefiend برمیگردونه!!

نکته :
تابع reducer از این جهت که روی همه اعضا کار میکنه پس Iterative هست و از این جهت که در هر سری خودش رو صدا میزنه (مقادیر قبلی خودش و ...)‌ پس recursive  هست . توابع recursive از لحاظ کارایی و اجرا ضعیف تر از Iterative هست.

تابع reducer به نسبت map & filter قدرت بیشتری داره و میتونه خودش کار map & filter رو هم انجام بده.

این مقاله رو هم میتونید مطالعه کنید:

۳۰- یکسری توابع مثل every & some هم توی جاواسکریپت وجود داره که خیلی ازشون استفاده ای نمیکنیم اما کار باهاشون به راحتی همین filter & map هست و باعث میشه که کد های بهتر و حرفه ای داشته باشیم:

کار این توابع به این شکل هستش که:‌

تابع every اعضای آرایه رو به ازای شرط موجود در بدنه بلاک کد بررسی میکنه و اگر اون شرط برای همه اعضای اون آرایه برقرار بود در نتیجه true برمیگردونه و در غیر این صورت false .

تابع some هم مثل every کار میکنه اما فقط کافیست که به ازای یک آیتم ، شرط برقرار باشه ( و یا برعکس به ازای یک آیتم شرط برقرار نباشه) تا در خروجی true & false برگردونه.

این ۲ تابع اومده که کثیف کاری for & while برای این کار رو تمیز انجام بده. پس سعی کنیم از این ۲ تابع هم در کنار map & filter & reduce توی کدهامون استفاده کنیم تا حرفه ای و تمیزتر باشه کدهامون .

۳۱- تو قسمت قبلی در مورد موضوع object destructure صبحت کردم . تو این نکته میخوام به سه تا از ریزه کاری های تکمیلی این موضوع اشاره کنم:

• میتونیم از rest operator هم استفاده کنیم. این object رو در نظر بگیرید:

حالا به روش کارش دقت کنید:

مقدار age میشه ۲۹
و others به صورت یک Object بیرون کشیده میشه که بقیه متغیر ها توش قرار دارن (انگار که از mySelf مقدار  key رو استخراج کنیم و بقیه اش رو توی others بریزیم.

• نکته دومی که در این قسمت میخوام بهش اشاره کنم مقدار default value در عمل object destructure هستش .

درصورتی که مقدار age توی mySelf وجود نداشته باشه مقدار undefined میگیره ولی اگر براش مقدار پیش فرض درنظر بگیریم این اتفاق نمی افته.

• نکته سوم اینکه بعضی وقت ها لازم هست اسم متغیری که داریم میکشیم بیرون رو تغییر بدیم.
  مثلا ما توی کد اصلی که داریم نوشتیم یه متغیر age دیگه هم داریم و اینجا هم داریم age تعریف میکنیم که باعث دردسر برای خودمون میشه. چاره اینکار استفاده از تغییر نام همزمان با استخراج متغیر هست:

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

۳۲- شش نکته کوتاه از OOP در جاواسکریپت که موقع کار با کلاس های ری اکت باید بلد باشید :

• وقتی از یک کلاس یک obj میسازیم با obj معمولی که خودمون میسازیم یک فرق اساسی داره و اینکه type داره. (‌فعلا همین نکته رو داشته باشید تا بعدها که بیشتر در موردش توضیح میدم)
• متدهای static توی کلاس های جاواسکریپت هنوز به صورت proposal هستن و خیلی هم پرکابرد نیستند. (‌حداقل برای تازه کارها خیلی استفاده نمیشه) ولی استفاده ازشون خیلی راحته. با یک کلمه static قبل از اسم متد !
• تو کلاس جاواسکریپت چیزی به اسم public & private نداریم ولی توسعه دهندهاش توافق کردند که اگر متغیری قبل از اسمش underline داشته باشه یعنی private  هست و این موضوع تو استاندارد جدید (ورژن جدید) به این شکل هست که از # قبل از اسم متغیر استفاده بشه.
• با متد هایی مثل get & set که تو اکثر زبان های برنامه نویسی هستند ، حالا حالاها کاری نداریم و لازم نیست که از کلاس های جاواسکریپت خیلی چیزای پیچیده و خفن بدونیم (هرچند که دونستن همیشه کمک میکنه)
• همچنین دونستن مفهوم مهمی مثل prototype هم کاربردی در react نداره !
• موضوع استفاده از oop در جاواسکریپت هنوز به طور کامل حل نشده اما استفاده از کلاس ها در ری اکت کاملا مرسوم و متداول هستند. با توجه به اقدامات تیم سازنده ری اکت در خصوص ورژن جدید و معرفی هوک ها این برداشت میشه که استفاده از کلاس به مرور کارایی کمتری نسبت به توابع پیدا میکنه (شایدم یه روزی دیگه لازم نباشه اصلا کلاس کامپوننت بنویسیم). پس در کنار اینکه نگاهی درست و اصولی به کلاس ها در زبان جاواسکریپت داریم لازم هست که نگاهی هم به برنامه نویسی functional برای کامپوننت ها داشته باشیم.

۳۳- در سری قبل در مورد webpack نکاتی رو گفتم. این نکته رو هم بهش اضافه کنم که:
سروری که توی react  روی localhost برای ما اجرا میشه (‌وقتی که npm start و یا yarn start میکنید)‌ با زبان جاواسکریپت و Node.js نوشته شده و توسط webpack dev server توسعه و اجرا میشه !!!

کارهایی که دوست خوبمون webpack انجام میده خیلی زیاد و ارزشمند هست مخصوصا برای کسایی که تازه شروع کردند. خیلی سریع و بی دردسر همه چی رو فراهم میکنه این بزرگوار و ما در اکثر مواقع هیچ کاری باهاش نداریم و به ندرت پیش میاد که بخواهیم تنظیماتش رو تغییر بدیم.(برای افراد با تجربه، این موضوع اصلا درست نیست و دیدم کسایی که اگه eject نکن تو هر پروژه ای روزشون شب نمیشه ?)

همچنین میتونید ۳ قسمت قبلی این مجوعه رو هم مطالعه کنید:

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/