.map(), .filter() และ .reduce() สามทหารเสือในการจัดการกับ Array[…]

หมดยุคของ for loop

การเขียนภาษา JavaScript (หรือภาษาอื่นๆ) นั้นแน่นอนว่าเราจะหลีกเลี่ยงกับการทำงานกับ Array ไม่ได้ ซึ่งตอนนี้เราก็มาถึงยุคที่ for loop นั้นตกกระป๋องไปเป็นที่เรียบร้อย เพระว่าเดี๋ยวนี้ JavaScript เค้ามี functions สามทหารเสือในการจัดการกับ Array อย่าง map, filter และ reduce กันครับ

.map()

มาเริ่มต้นกับ function แรกอย่าง map กันก่อน ซึ่ง map นั้นเรียกว่าเป็น function ที่เข้าใจได้ง่ายที่สุด ไม่มีอะไรซับซ้อนเลยแม้แต่นิดเดียว โดยหน้าที่ของมันคือการวนค่าทุกค่าใน array ตาม function ที่เราต้องการ และทำการสร้าง array ใหม่ออกมาพร้อมกับค่าใหม่

นำค่าทั้งหมดใน array มาคูณ 2 ด้วย map

.filter()

สำหรับ filter นั้นชื่อก็บ่งบอกอยู่แล้วว่าเราต้องการที่จะกรองค่าหรือฟิลเตอร์ค่าออกมาตามเงื่อนไขที่เราต้องการ โดย filter นั้นรับ array มาวนเหมือนกับ map แต่ว่าเราจะต้องมีการส่ง condition หรือเงื่อนไขว่าเราต้องการที่จะให้ return ค่าอะไรออกมา ซึ่ง filter ก็จะทำการสร้าง array ใหม่เช่นเดียวกัน

กรองค่าที่เป็นเลขคู่ด้วย filter

.reduce()

สุดท้ายแต่ไม่ท้ายสุดกับ reduce ซึ่งถือว่าเป็น function ที่น่าจะทำให้ใครหลายๆ คนอาจจะงงในช่วงแรก โดยหลักๆ แล้ว reduce จะทำการ accumulate หรือ การนำค่าใน array มารวมกันให้เหลือเพียงค่าเดียวก่อนที่จะ return ออกมา จะอธิบายด้วยคำพูดอาจจะไม่เห็นภาพ เอาเป็นว่าเรามาลองดูตัวอย่างน่าจะเข้าใจง่ายกว่า

หาผลรวมของ array ด้วย reduce

reduce นั้นจะต้องมีการทำงานร่วมกับ ค่า accumulate (ค่ารวม) และ current (ค่าล่าสุดที่รับเข้ามา) ซึ่งจะแตกต่างจาก map และ filter อีกอย่างหนึ่งก็คือ reduce ต้องมีการกำหนดค่าตั้งต้น โดยในที่นี้ก็คือ เลข 0 นั่นเอง

นอกจากนี้ reduce ยังสามารถที่จะเอามาแทน function อย่าง map และ filter ได้อีกด้วย แต่ถ้าใครคิดว่ามันยากไปก็ใช้ map กับ filter เหมือนเดิมก็ได้นะครับ

ใช้ reduce มาแทน map และ filter

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

Chaining — จับทุกอย่างมาต่อกัน

ในการเขียนโค้ดจริงๆ เราคงต้องเจอกับบางโจทย์ที่จะต้องใช้ทั้ง 3 functions พร้อมๆ กัน ด้วยความที่แต่ละ function นั้นมีการ return ค่ากลับมาเป็น array ตัวใหม่ ทำให้เราสามารถที่จะนำมาใช้งานต่อๆ กันได้

นำ map, filter และ reduce มาใช้ต่อกัน

map, filter และ reduce นอกจากจะสะดวกแล้ว ยังทำให้การเขียนโค้ดนั้นดูสะอาดและเข้าใจง่ายมากขึ้นด้วย แต่ต้องจำไว้ว่าผลลัพธ์ที่ถูกส่งออกมาไม่ได้เป็นการ mutate ค่าใน array เก่าแต่อย่างใด ซึ่งเราก็ต้องนำค่าเหล่านั้นไปเก็บไว้ครับ

อย่างไรก็ตาม ทั้ง map, filter และ reduce นั้นเราสามารถที่จะส่งค่าเข้าไปได้มากกว่าที่เราเห็นในบทความนี้ สามารถดูข้อมูลเพิ่มเติมของแต่ละ function ได้ที่นี่เลย

map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

reduce: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce