เชื่อว่าใครก็ตามที่เขียนโปรแกรมมาซักระยะหนึ่งแล้วก็คงจะเคยปวดหัวกับการจัดการข้อมูลที่อยู่ใน array หรือ json ที่มีจำนวนมากๆมาแล้วอย่างแน่นอน ซึ่งถ้าเราจัดการกับมันด้วยท่าปกติแล้ว เราก็อาจจะใช้ for loop วนเข้าไปจัดการกับข้อมูลทีละตัวแล้วทำให้มันออกมาเป็นรูปแบบที่เราต้องการ วันนี้เราจะมารู้จักกับสิ่งที่จะทำให้การจัดการข้อมูลนั้นง่ายขึ้นในบางกรณี นั่นก็คือ Map และ Reduce นั่นเอง แต่ละตัวในภาษา JavaScript ทำงานยังไงและต่างกันยังไงมาดูกันเลย!

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

let receipt = [

{name:"sausage", price:42}, 

{name:"coffee", price: 32}, 

{name:"orange", price: 20}

]

ถ้าเราอยากรู้ว่าใบเสร็จนี้เราซื้ออะไรไปบ้างด้วยท่า foreach เราอาจจะสร้าง list เปล่าขึ้นมา 1 ตัว แล้วค่อยๆ push เพิ่มชื่อสินค้าเข้าไปแบบนี้

items = []

receipt.forEach(function (receipt) {

  items.push(receipt.name)

})

console.log(items) // [sausage, coffee, orange]

เราก็จะได้ list ของชื่อสินค้าออกมาตามที่เราต้องการ

แต่เราสามารถใช้ Map เพื่อทำสิ่งนี้ได้

items = receipt.map(function (receipt) {
  return receipt.name
});

console.log(items) // [sausage, coffee, orange]

จะเห็นว่าผลลัพธ์ที่ออกมานั้นเหมือนกัน แต่สำหรับ .map() เราไม่จำเป็นต้องสร้าง list ขึ้นมาเพื่อค่อยๆ push ข้อมูลเข้าไปทีละตัวๆ แต่เราสามารถนำตัวแปรมารับค่าที่ return ได้เลย โดยที่ map นั้นจะ return ออกมาเป็น list ได้ทันที

แล้ว Reduce ล่ะ?

Reduce เองก็เป็นทางเลือกในการจัดการข้องมูลเช่นเดียวกับ map แต่ reduce จะเหมาะกับการใช้หาผลลัพธ์ของการดำเนินการที่เหมือนกันกับข้อมูลไปเรื่อยๆ และจะ return ค่าๆนั้นออกมาในตอนสุดท้าย

เช่น ถ้าเราอยากได้ผลรวมของราคาสินค้าที่ในใบเสร็จนั้นๆก็สามารถทำได้แบบนี้

let total = receipt.reduce(function (sum, receipt) {
  return sum + receipt.price
}, 0)

console.log(total) //94

โดยรวมแล้วจะบอกว่า map และ reduce จะสามารถใช้แทน for loop ในด้านการจัดการข้อมูลใน array ได้เลยก็คงจะไม่ใช่ขนาดนั้น เพราะ for loop นั้นเรียกได้ว่าเป็นพื้นฐานที่แทบจะจัดการได้ในทุกกรณี แต่การใช้ map และ reduce ในบางกรณีนั้นสามารถทำได้ดีกว่า for loop แบบธรรมดา เช่นที่อธิบายในตัวอย่างของ .map() และในด้านการเขียนโค้ดที่ดูอ่านง่าย ถ้าใครยังไม่เคยใช้ map หรือ reduce ในโค้ดล่ะก็ อยากให้ลองเอาไปใช้ซักรอบอาจจะติดใจก็ได้นะ

ขอบคุณข้อมูลดีๆจาก

https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d