آشنایی با تابع Compose در جاوا اسکریپت

یکی از مفاهیم کمتر مورد علاقه من در جاوا اسکریپت باید توابع compose و pipe باشد، منظورم این است که آنها توابع عالی هستند و قطعا در زمان زیادی صرفه جویی می کنند، اما در حین یادگیری آن، به نظر می رسید که یک دسته از توابع یکدیگر را برمی گرداند. درک اینکه واقعاً چه اتفاقی می افتد دشوار بود.

در این مقاله، در حالی که من به یک کودک نوپا توضیح می دهم، خط به خط تابع نوشتن را مرور خواهیم کرد.

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

تابع نوشتن چیست؟

تابع compose یک تابع مرتبه بالاتر است که دو یا چند تابع را به عنوان آرگومان می گیرد و یک تابع جدید را برمی گرداند که این توابع را به ترتیب راست به چپ اعمال می کند. اساساً، یک تابع compose دسته‌ای از توابع را به عنوان آرگومان دریافت می‌کند و سپس آنها را به تابع دیگری در داخل خود می‌فرستد که با استفاده از روش ReduceRight در جاوا اسکریپت آنها را از راست به چپ اعمال می‌کند. درست در آن شیرجه بزنیم

با توجه به یک تابع نوشتن معمولی.

function compose(...funcs) {
  return function(arg) {
    return funcs.reduceRight((accum, fn) => {
      return fn(accum);
    }, arg);
  };
}

سطر به خط آن را بشکنیم و هضم کنیم

function compose(...funcs) {

این شروع تابعی به نام compose است (الزامی نیست که تابع compose نامیده شود). هر تعداد آرگومان (توابع) را می گیرد و با استفاده از عملگر spread(…) در یک آرایه ذخیره می کند.

return function(arg) {

در اینجا تابعی را برمی گردانیم که یک آرگومان واحد را دریافت می کند، آرگومان دریافتی عنصری است که این توابع روی آن اجرا می شوند.

return funcs.reduceRight((accum, fn) => {

این خط یک متد reduceRight را در آرایه funcs شروع می کند (به یاد داشته باشید که آرایه به صورت مجازی با استفاده از spread ایجاد شده است.[…] عملگر)، که تابع callback را برای هر عنصر در آرایه، از سمت راست شروع می کند. اگر متوجه نشدید، نگران نباشید، من همچنان در حین خواندن توضیح خواهم داد که عملکرد کاهش چگونه کار می کند.

return fn(accum);

این خط هر تابع را در تابع به متغیر accum اعمال می کند. accum در ابتدا روی مقدار arg (آگومان ارسال شده به تابع برگشتی) تنظیم می شود و هر بار که تابعی در func به آن اعمال می شود، به روز می شود.

}, arg);
  };
}

در نهایت مقدار اولیه accum را روی مقدار arg قرار می دهیم.

تابع reduceRight

در جاوا اسکریپت، reduceRight متد یک تابع فراخوانی را به عنوان اولین آرگومان خود می گیرد که برای اعمال یک عملیات معین به هر عنصر در آرایه و کاهش آرایه به یک مقدار استفاده می شود. تابع callback دو آرگومان می گیرد: انباشت کننده (که به عنوان آخرین عنصر در آرایه شروع می شود) و مقدار فعلی (که به عنوان عنصر دوم به آخرین در آرایه شروع می شود).

در compose تابع، تابع فراخوانی است که با استفاده می شود reduceRight یک تابع پیکان با دو پارامتر است: accum و fn. accum انباشته ای است که از یک تکرار به تکرار دیگر منتقل می شود و fn مقدار فعلی است که توسط reduceRight روش.

تابع callback نتیجه اعمال را برمی گرداند fn به accum. این بدان معنی است که هر تابع در funcs بر روی نتیجه قبلی اعمال می شود و نتیجه نهایی خروجی آخرین تابع در آرایه پس از اعمال آن به نتیجه قبلی است.

نحوه اجرای تابع compose

اجازه دهید شما را از طریق یک callstack مثال برای تابع compose راهنمایی کنم تا نحوه عملکرد آن را نشان دهم.

فرض کنید توابع زیر را داریم:

function addOne(x) {
  return x + 1;
}

function double(x) {
  return x * 2;
}

function square(x) {
  return x * x;
}

و ما compose را به این صورت می نامیم:

const composedFunction = compose(square, double, addOne);
const result = composedFunction(2);
console.log(result); // Output: 36

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

• ما compose را با آرگومان ها صدا می زنیم square، double، و addOne

const composedFunction = compose(square, double, addOne);

• در داخل تابع compose، the reduceRight روش بر روی فراخوانی می شود funcs آرایه ([square, double, addOne]). مقدار اولیه آکومولاتور (accum) به مقدار آرگومان ارسال شده به تابع برگشتی (arg) که در این حالت 2 است.

result = 2;

• اولین تکرار از reduceRight روش شروع می شود، با fn تنظیم کنید addOne. تابع با فراخوانی می شود accum به عنوان آرگومان، و مقدار 3 را برمی گرداند. این مقدار جدید می شود accum.

accum = addOne(accum); // result = 3

• تکرار دوم از reduceRight روش شروع می شود، با fn تنظیم کنید double. تابع با فراخوانی می شود accum به عنوان آرگومان، و مقدار 6 را برمی گرداند. این مقدار جدید می شود accum.

accum = double(accum); // result = 6

• سومین و آخرین تکرار از reduceRight روش شروع می شود، با fn تنظیم کنید square. تابع با فراخوانی می شود accum به عنوان آرگومان، و مقدار 36 را برمی گرداند. این مقدار نهایی می شود acuum.

accum = square(accum); // result = 36

تابع برگردانده شده از compose با آرگومان 2 فراخوانی می شود. این تابع هر تابع در آرایه funcs را به ترتیب از راست به چپ به آرگومان اعمال می کند. اولین، addOne با آرگومان 2 فراخوانی می شود که 3 را برمی گرداند. double با آرگومان 3 فراخوانی می شود که 6 را برمی گرداند. square با آرگومان 6 فراخوانی می شود که 36 را برمی گرداند

بنابراین، به طور خلاصه، تابع compose هر تعداد توابع را به عنوان آرگومان می گیرد و یک تابع جدید برمی گرداند که این توابع را به ترتیب راست به چپ اعمال می کند. تابع برگشتی یک آرگومان واحد می گیرد و هر تابع در آرایه ارائه شده را از سمت راست شروع می کند. با انجام این کار، می‌توانیم یک تابع جدید ایجاد کنیم که از چندین تابع کوچکتر تشکیل شده است، که می‌تواند کد ما را ماژولارتر و خواندن آسان‌تر کند.

طبق معمول از خواندن شما سپاسگزارم و امیدوارم برای وقت خود ارزش قائل شده باشید. من را دنبال کنید @frontend_jedi برای خواندن مطالب آموزشی بیشتر. من را در توییتر دنبال کنید @Frontend_Jedi بیایید با هم ارتباط برقرار کنیم و رشد کنیم

آیا شما یک برنامه نویس هستید یا یک برنامه نویس؟ تفاوت را نمی دانید؟ هوات رو دارم. برای توضیح بهتر تاپیک را بخوانید.

#جاوااسکریپت #برنامه نويسي #100DaysOfCode #تکنولوژی سیاه توییتر #js #توسعه دهندگان #استخدام تکنسین

18:50 بعد از ظهر – 13 ژوئیه 2022