توضیحی در مورد فانکشن reduce جاوااسکریپت. بخش اول

سلام مهدی رباط جزی هستم و قصد دارم در این مقاله مختصر با هم با Higher Order Function Reudce در جاوااسکریپت یه مقدار کار کنیم تا کمی با کار برد های فراوان این فانکشن قدرتمند آشنا شویم. این تابع بر روی آرایه ها اعمال میشود و توانایی هایی بسیار گسترده دارد ، البته باید اقرار کنم که در زمان یاد گیری ، درک و به کاربردن آن در کد ها یه مقدار بدقلق است اما بعد از یادگیری کار را بسیار ساده میکند "روش یادگیری فقط تمرین مستمر"

• خوب بریم سراغ یک مثال بسیار ساده برای به دست آوردن جمع اعضا آرایه :

const  myArray = [1,2,3,4,5,6]
const sumArrayNumbers = ( accumulator ,  val ) =>{
  console.log(&quot acc => &quot , accumulator)
  console.log(&quot val  => &quot , val)

  return accumulator + val
}
const result = myArray.reduce(sumArrayNumbers)
console.log(result)

//  result : 21

در این مثال فانکشن reduce توانست بدون هیچ احتیاجی به تعریف متغیری مثل let sum = 0 جمع مقادیر این آرایه را بدست آورد ، فانکشن sumArrayNumbers را داریم که معمولا به صورت callback نوشته میشود اما در این مثال ما به صورت فانکشن جدا نوشتیم.

مقادیر ورودی آن یک انباشته کننده <<accumulator>> و یک مقدار جدید است <<val>> اگر این کد را خودتان بنویسید و لاگ های درون فانکشن sumArrayNumbers را ببینید میتوانید متوجه نحوه کارکرد reduce شوید

همانطور که میبینید reduce یک حلقه ایجاد میکند و جمع مقادیر را هر دفعه داخل انباشت کننده "accumulator" میریزد و دفعه بعد accumulator برابر جمع مقادیر قبلی خواهد بود

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

const  myArray = [ 25 , 27 , 13 , 44 , 51 , 16
const maximum = ( accumulator ,  val ) => {
if ( val  >  accumulator ) {
       accumulator = val ;
     }
 return accumulator;
}
const  result  =  myArray.reduce ( maximum )
console.log(result)

همانطور که در مثال قبل دیدیم مقدار خروجی فانکشن پاس داده شده به reduce ، مقدار بعدی accumulator خواهد بود فقط اینبار یک شرط وجود دارد اگر accumulator کم تر از مقدار val بود مقدار جدید درون acc خواهد رفت در غیر این صورت acc برابر با مقدار قبلی خواهد بود

نکته بعدی این است که reduce همانند فانکشن هایی مثل map یا filter همیشه آرایه برنمیگرداند و این یک نقطه قوت برای این متد قدرتمند است .

• مثال سوم : پیدا کردن کوچک ترین مقدار یک آرایه ای از اعداد این بار با استفاده از callback

const  myArray = [ 25 , 27 , 13 , 44 , 51 , 16] ;
const  result  =  myArray.reduce ( ( accumulator ,  val ) => {  
    if ( val  < accumulator ) {
       accumulator = val ;
     }
  return accumulator;
} )
console.log(result)

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

نحوه کارکرد:

فانکشن reduce قابلیت های بسیار بیشتری دارد که در مقاله های بعدی میبینیم این مثال های بسیار ساده برای شروع کار و آشنایی شما با فانکشن reduce بود وگرنه شما می توانستید برای مثال 2 و 3 از این روش استفاده کنید ، بسیار سریع تر با Math Object

const  myArray = [ 25 , 27 , 13 , 44 , 51 , 16]
console.log(Math.max(...myArray))
console.log(Math.min(...myArray))

اگر این مقاله را دوست داشتید خوشحال میشم که با لایک و کامنت انرژی بفرستید