[JavaScript] Array .reduce() ใช้งานยังไง?

 .reduce() เป็น built-in function ของ Array ใน JavaScript ใช้งานเพื่อที่จะจัดการกับ array ก้อนนั้นเพื่อให้ได้ค่า ๆ นึงออกมา ยกตัวอย่างเช่น การทำ function sum เพื่อบวกรวมตัวเลขที่อยู่ใน array ทั้งหมดออกมาเป็นค่า sum ค่าเดียว โดย function นี้จะมี syntax หน้าตาแบบนี้

arr.reduce(callback
( 
accumulator, //ผลจากแต่ละรอบ loop 
currentValue, //ค่าของสมาชิก array ปัจจุบัน
[, index //(optional) index ของ array ปัจจุบัน
[, array]]  //(optional) เป็น callback ของก้อน array ที่เรานำมาใช้เรียก .reduce โดยปกติมักไม่ได้ใช้ค่านี้
)
[, initialValue] //(optional) ค่าตั้งต้นของ function ซึ่งถ้าเราไม่ใส่ function จะใช้สมาชิกตัวแรกของ array เป็นค่าตั้งต้น
                 //สังเกตดี ๆ คือค่าตั้งต้นนี้จะอยู่นอก callback function
)

ขอใช้ตัวอย่าง function sum จากบทความ "Rest parameters คืออะไร" มาเป็นตัวอย่างอีกครั้งละกัน ตัวอย่างแรกลองเขียน callback function ทั่วไปก่อน

function sum(...args) {
    return args.reduce(function(accumulator, currentValue) {
    	return accumulator + currentValue;
    });
}
console.log(sum(1, 2)); //3
console.log(sum(1, 2, 3)); //6
console.log(sum(1, 2, 3, 4, 5)); //15

ถัดไปจะลองปรับเป็น Arrow function ดู และจากตรงนี้ไปจะเขียนแบบ Array function อย่างเดียวนะครับ

function sum(...args) {
    return args.reduce((accumulator, currentValue)=> accumulator + currentValue);
}
console.log(sum(1, 2)); //3
console.log(sum(1, 2, 3)); //6
console.log(sum(1, 2, 3, 4, 5)); //15

ตัวอย่างถัดไป สมมติเรามีข้อมูลของลูกค้าจำนวนหนึ่ง เราอยากจะ group ลูกค้าตามอายุว่าแต่ละช่วงอายุมีใครบ้าง โดยเราจะลองแบ่งเป็น 3 ช่วงอายุคือ 

1. อายุ <= 20 ปี
2. อายุ 21-30 ปี
3. อายุ > 30 ปี

let people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 16 },
  { name: 'Jane', age: 20 },
  { name: 'Bo', age: 23 },
  { name: 'Noon', age: 25 },
  { name: 'Jane', age: 28 },
  { name: 'John', age: 45 },
  { name: 'Doe', age: 51 },
];

let ageRange = people.reduce((acc, obj) => {
	if (obj.age <= 20) {
        acc.lte20.push(obj);
    } else if (obj.age >= 21 && obj.age <= 30) {
    	acc.btw21n30.push(obj);
    } else {
    	acc.gt30.push(obj);
    }
    return acc;
}, {//ใส่ค่าตั้งต้นด้วยว่าเป็นยังไง
    lte20: [], //<= 20
    btw21n30: [], //21-30
    gt30: [], //> 30
}
);

console.log(ageRange);
// {
//  lte20: [
//    	{ name: 'Max', age: 16 },
//      { name: 'Jane', age: 20 }
//  ],
//  btw21n30: [
//      { name: 'Alice', age: 21 },
//    	{ name: 'Bo', age: 23 },
//    	{ name: 'Noon', age: 25 },
//      { name: 'Jane', age: 28 }
//  ],
//  gt30: [
//	    { name: 'John', age: 45 },
//	    { name: 'Doe', age: 51 }
//	]
// }

นอกจากตัวอย่างด้านบน .reduce ยังทำอะไรได้อีกมาก ขึ้นอยู่กับจินตนาการและความคิด รวมถึงประสบการณ์ แนะนำให้ลองหาตัวอย่างดูเยอะ ๆ แล้วทำให้เราเห็นอะไรได้กว้างขึ้นครับ

อ้างอิง: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce