توضیح اجمالی راجع به First class و توابع مرتبه بالاتر(Higher-Order Function)

همونطوریکه احتمالا میدونید جاوااسکریپت یکسری توابع first class داره که بهشون fist citizen هم گفته میشه معنیش اینه که یک سری توابعی وجود دارن که مثل value ها باهاشون برخورد میشه، یعنی چی ؟

تابع زیر رو در نظر بگیرید :

function fn1(){
console.log(&quotFirst class citizens&quot)};

1- میتونیم به عنوان مقدار یه متغیر باهاشون برخورد کنیم :

const variable = fn1;

دقت کنید که ما تابع fn1 رو صدا نزدیم فقط بهش ارجاع کردیم یا اصطلاحا fn1 رو call نکردیم. variable رو به
fn1 ارجاع دادیم)

2- میتونیم از این توابع به عنوان آرگومان ورودی توابع دیگه استفاده کنیم:

function fn2(fn){
console.log(fn());
};
fn2(fn1);

حتی توابع خود جاوا اسکریپت هم از این خصوصیت استفاده میکنن:

btn.addEventListener('click', function)

3- میتونیم ازشون به عنوان خروجی توابع دیگه استفاده کنیم:

funcntion fn3(){
return function () {
//do something
}};
const op=fn3();

خروجی اجرای fn در متغیر op خودش یک تابع خواهد بود که باید اجرا بشه ، یعنی یک تابع به op اطلاق داده شده پس :

const finally=op();

اما چرا؟

همونطوریکه اینجا هم توضیح دادیم توابع یا function ها خودشون نوعی از اشیا یا object ها توی جاوااسکریپت هستند و از اونجایی که خود object ها value محسوب میشن پس همین قاعده روی توابع هم قابل تعمیمه و اصلا بهمین خاطره که هر کاری که دوس داریم میتونیم روشون پیاده کنیم.

حتی بعنوان Property یاخصوصیات یک Object ازشون استفاده کنیم:

const counter={ 
    value: 23;
    Inc: function( ) { this.value++ };
}

به همین دلیله که همونطور که بالاتر هم اشاره کردم به توابع first class citizen هم گفته میشه.

بنابراین همونطور که متدهایی برای هرنوع Object وجود داره ، برای توابع هم متد هایی وجود داره مثلا:

counter.Inc.bin(some other obejct)

اما Higher-Order function :

تابعی که یک تابع دیگه رو به عنوان آرگومان ورودی میگیره و یا چیزی که return میکنه یک تابع دیگست. مثلا:

const greet=function(){ 
console.log('Hello') 
}
btn.addEventListener('click', greet)

در مثال بالا تابعaddEventListener تابع greet رو به عنوان ورودی میگیره

بنابراین به محض اینکه click انجام بشه addEventListener که خودش یک Higher-Order function هست میاد و تابع greet رو صدا میزنه و چون عملیاتی شدن greet منوط به صدا شدن توسط addEventListener هست به greet اصطلاحا call-back function هم گفته میشه

حالا که میدونیم Higher-order function ها چین میتونیم یه اختصاصیشو برای خودمون بنویسیم که نشون بدیم چطور کار میکنن

const oneWord=fucntion(str) { 
    return str.replaceAll(  '   ' , ' ' ).toLowerCase();
}

تابع یک تابع عمومی یا Generic function هست که میاد و هررشته ای با هر طولی که بهش بدیم رو به یک کلمه(رشته بدون فاصله) باحروف کوچیک تبدیل میکنه بعنوان مثال:

oneWord('Hi this is peyman') ====>>> hithisispeyman

تابع زیر هم میاد و اولین حرف رشته رو به حرف بزرگتر تبدیل میکنه

const firstUpper= fucntion (str) {
    const [first, ...others]=str.split('   ');
    return [first.toUpperCase(), ...others].join('   ');
}

خروجی:

firstUpper('hi this is peyman') =====>>> Hi this is peyman

حالا ما دوتا تابع عمومی داریم که هر کدوم یک کار خاص انجام میدن و میخوایم که یک Higher-order هم داشته باشیم:

const transformer= fucntion (str, fn) { } 

همونطور که توی تابع transformer میبینیم دوتا آرگومان میگیره که اولی رشته(str) هست و دومی یک تابع(fn) بنابراین به این تابع transformer یک تابع مرتبه بالا یا Higher-order function میگن

از اونجایی که نمیخوام بلاگ هام خیلی طولانی و خسته کننده بشه توی بلاگ بعدی از همین تابع استفاده میکنم تا توضیحاتی راجع به call back function هاو مفهوم abstraction بدم