เชื่อว่าใครก็ตามที่เขียนโปรแกรมมาซักระยะหนึ่งแล้วก็คงจะเคยปวดหัวกับการจัดการข้อมูลที่อยู่ใน 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
