Higher-Order Functions در جاوا اسکریپت


آیا شما شنیده اید که همکاران و دوستان شما در مورد Higher-Order functions (توابع مرتبه بالاتر) در JavaScript صحبت می کنند؟ اگر در این گفتگو گیج شدید، نگران نباشیددر این مقاله با توابع Higher Order و چرایی مفید بودن آنها آشنا می شویم.
ساده ترین تعریفی که میتونیم از Higher-Order functions داشته باشیم :
تابعی که یک تابع دیگر را بپذیرد یا return کند، higher-order function نامیده می شود
این توابع higher-order هستند زیرا به جای strings, numbers یا booleans بر روی یک تابع کار می کنند.
Higher-Order function یک تابع است که یک تابع را به عنوان argument دریافت می کند و یک تابع را در خروجی return می کند.
این مفهومی است که از functional programming متولد شده است. این ممکن است مفاهیمی بیگانه و ناآشنا برای کسانی باشد که بیشتر به دنیای برنامه نویسی شی گرا عادت دارند. JavaScript ، زبانی است که اخیراً استفاده از بسیاری از مفاهیم functional programming را آغاز کرده است. Higher-Order functions یکی از آنهاست.
چرا Higher Order Functions؟
قبل از شروع به یادگیری چیزی ، باید درک کنیم که چرا این موضوع و مفهوم مهم است. شاید شما کنجکاو باشید ، Higher-Order functions چه هدفی را ارائه می دهند؟
کد ساده و زیبا
Higher-Order functions به شما اجازه می دهد تا کدهای ساده تری و clean تری رو بنویسید.این توابع اجازه می دهند تا شما توابعی کوچکتر با کدهای ساده با خوانایی بالا بنویسید.
Bug های کمتر
با کد ساده با خوانایی بالا شما با اشکالات کمتری روبرو می شوید.
راحتی Test و Debug
با توابعی که فقط یک کار را انجام می دهند ، شما با کد هایی روبرو می شوید که آزمایش آن آسان است. کد ها تست پذیری بالا و آسانی دارند در نتیجه منجر به اشکالات کمتری می شود. بنابراین debugging در این توابع نیز آسان است.
Built-in Higher Order Functions در جاوا اسکریپت
جاوا اسکریپت با برخی از Higher-Order functions ساخته شده است. شما ممکن است قبلاً از آنها استفاده کنید ، بدون این که متوجه شوید که اینهاHigher-Order functions هستند. بیایید به برخی از آنها نگاهی بیندازیم تا نحوه کار آنها را بفهمیم.
Array.prototype.map
map() method یک آرایه جدید از طریق نتایج فراخوانی تابع برای هر element ایجاد میکند.()map یک callback function را برای هر element از آرایه فراخوانی میکند و یک آرایه جدید از نتایج این فراخوانی ها ایجاد میکند.
callback function سه arguments را دریافت می کند:
- value of the element
- index of the element
- array object
ممکن است که شما قبلا از ()map استفاده کرده باشید.در واقع این method یک higher-order function است زیرا یک callback function را به عنوان argument ورودی می گیرد
1 2 3 4 5 6 7 |
let numbers = [1, 4, 9]; let triples = numbers.map((item) => { return item * 3; }); // numbers is still [1, 4, 9] // triples is [3, 12, 27] |
در مثال بالا ما یک آرایه از اعداد داریم و یک آرایه جدید با استفاده از ()map که یک function را به عنوان argument گرفته است، ایجاد میکنیم.item درون argument به صورت خودکار از هر عنصر آرایه اصلی تخصیص می یابد.
Array.prototype.filter
متد ()filter یک مثال دیگه از higher-order function هایی است که در جاوا اسکریپت وجود داره.این method یک آرایه جدید با تمام آیتم هایی که تست موردنظر callback function رو پاس کردن، ایجاد میکنه. callback function به متد ()filter آرگومان های زیر رو میپذیره:
- value of the element
- index of the element
- array object
آیتم های آرایه ای که تست callback رو پشت سر نمیگذرونند، به راحتی skip میشن و در آرایه جدید قرار نمیگرند.به مثال زیر توجه کنید تا کار ()filter رو در عمل ببینید.
1 2 3 4 5 |
function isAboveMyRange(value) { return value >= 25; } var filtered = [12, 5, 8, 130, 44].filter(isAboveMyRange); // filtered is [130, 44] |
value هایی که تست رو پاس نکرده باشند در آرایه فیلتر شده قرار نمیگیرند.filter() function تابع isAboveMyRange رو به عنوان پارامتر ورودی دریافت میکنه.
Array.prototype.reduce
متد ()reduce یک مثال دیگه از higher-order function هایی است که در جاوا اسکریپت وجود داره.این method بر روی هر کدوم از آیتم های آرایه callback function رو اجرا میکنه و نتیجه رو در یک مقدار قرار میده.()reduce دو تا پارامتر ورودی میگیره:
- The reducer callback function (making this method a higher-order function)
- Optional initial value
1 |
arr.reduce(callback[, initialValue]) |
reducer function یا همون callback چهار پارامتر میگیره:
- accumulator
- currentValue
- currentIndex
- sourceArray
اگر initialValue که به صورت اختیاری است،پاس داده شده باشه،accumulator برابر initialValue خواهد بود و currentValue برابر با اولین آیتم آرایه خواهد بود.اگر initialValue مشخص نشده باشه،accumulator برابر با اولین آیتم آرایه و currentValue برابر با دومین آیتم آرایه خواهد بود.به مثال زیر توجه کنید تا موضوع رو بهتر درک کنید
1 2 3 4 |
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { return accumulator + currentValue; }, 0); // sum is 6 |
در این مثال ما initialValue رو برابر با صفر قرار دادیم و به ()reduce پاس دادیم، بنابراین accumulator برابر با مقدار صفر در ابتدا خواهد بود.هر دفعه ای که reduce() function هر کدام از مقادیر آرایه رو فراخوانی می کند، accumulator نتیجه عملیات قبلی که از تابع return شده رو نگه داری میکنه و currentValue برابر با مقدار آیتم جاری آرایه است.در نهایت نتیجه در متغیر sum ذخیره می شود.
شما می توانید Higher-Order functions خودتان را بسازید.
ما نمونه هایی از Higher-Order functions ساخته شده با JavaScript را دیدیم. اما این همه چیز نیست شما همیشه می توانید بر اساس نیاز خودHigher-Order functions خود را ایجاد کنید.
نتیجه گیری
در این مقاله ، ما یاد گرفتیم که Higher-Order functions چیست و همچنین برخی از Higher-Order functions را در جاوا اسکریپت آموختیم. شما ممکن است قبلاً بدون آنکه اهمیت آنها را بفهمید مشغول نوشتن Higher-Order functions یا استفاده از آنها شده باشید.
Higher-Order functions درست مانند توابع معمولی هستند ، اما می توانند یک تابع را به عنوان یک argument بپذیرند و یا یک تابع را به عنوان خروجی برگردانند. اگر از این مقاله لذت بردید ، لطفاً این را به اشتراک بگذارید.
اگر قصد یادگیری جاوا اسکریپت(javascript) به صورت تخصصی و حرفه ای را دارید، پیشنهاد می کنم آموزش مقدماتی تا پیشرفته جاوا اسکریپت (javascript) را مشاهده کنید. ممنون که تا انتهای مقاله Higher-Order Functions در جاوا اسکریپت همراه ما بودید.
[منبع]
مطالب زیر را حتما مطالعه کنید
آموزش کار با timing event ها
معرفی DOM به زبان ساده
constructor function در جاوااسکریپت
factory function در جاوا اسکریپت
this در جاوا اسکریپت (JavaScript)
تفاوت for in و for of
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام
ممنون بابت مقاله های خوبتون
فقط این نوشته مثل مقاله های قبلی خیلی روون و خوانا نبود
لطفا مثل نوشته های قبلی ادامه بدید عالیه با تشکر
سلام.
خواهش میکنم
سعی میکنیم در نوشته های بعدی جنبه خوانایی رو بیشتر بالا ببریم