ข้อเเตกต่างระหว่าง JavaScript map vs forEach ควรใช้อันไหนเมื่อไหร่ดี?

สำหรับบทความนี้เราจะมา discuss กันว่าระหว่าง map และ forEach ในภาษา JavaScript ถึงความแตกต่างเเละวิธีการเลือกว่าจะใช้อันไหนและเมื่อไหร่

JavaScript เป็นหนึ่งในภาษาหลักที่คนเขียนโปรเเกรมหรือเขียนเว็บน่าจะรู้จักกันดี และเเน่นอนว่า JavaScript ก็มีตัวช่วยที่จะทำให้นักพัฒนาสามารถทำงานได้ง่ายขึ้น ในทุกๆ การทำงาน หนึ่งในคำสั่งที่หลายๆ ครั้งเรานั้นได้ทำงานกับ Array เเละยังต้องการเข้าถึงแต่ละ element ของ array โดยการใช้ loop ในภาษา JavaScript นั้นก็มีตัวช่วยอยู่ซึ่งก็คือ map เเละ forEach ทั้งสองเป็น methods ที่นิยมใช้กันอย่างเเพร่หลาย โดยจุดประสงค์หลัก ก็คือการเข้าถึงเเต่ละ ข้อมูลที่อยู่ใน Array ซึ่งนั่นมันอาจจะดูคล้ายๆ กัน แต่ในความเป็นจริง ทั้งสอง method มีความแตกต่างกันอยู่

forEach Method

สำหรับ forEach สามารถเข้าถึงเเต่ละ element ของ array โดยการวน loop เข้าไป โดยที่ forEach จะไม่ return อะไรกลับมาด้วย เเต่ว่าถ้าหากคุณอยากจะรับ return จาก forEach คุณจะได้มาเป็น undefined แทน

ซึ่ง forEach อนุญาตให้คุณสามารถแก้ไขข้อมูลที่มีอยู่ใน array ได้โดยใช้ callback function ตัวอย่างการใช้งานจะเเสดงอยู่ด้านล่าง

map Method

map method มีความคล้ายกับ forEach ตรงที่ว่าเราสามารถเข้าถึงเเต่ละข้อมูลของ array ได้ เเต่จะมีความเเตกต่างกันอยู่ตรงที่ว่า map จะสร้าง array ใหม่ขึ้นมาอีกตัวผ่าน callback ที่เข้าถึง element ของ array ซึ่งเราสามารถเเก้ไข หรือเปลี่ยนเเปลงข้อมูลใน array ได้ทุกตัว โดยในเงื่อนไขที่ว่า map จะไม่ได้เเก้ไข array ต้นทาง เเต่จะสร้าง array ใหม่ขึ้นมาเเทน

จะเห็นได้ว่าเราจะได้ array ใหม่ return ออกมาหลังจาก map ถูกเรียกใช้งาน โดยที่ map ก็เข้าถึงทุกๆ element ของ array ได้ด้วย จะเห็นได้ว่า map นั้นได้ return array ออกมาใหม่ ซึ่งจะทำให้เราสามารถใช้ความสามารถในการทำ chaining ได้ด้วย โดยตัวอย่างจะใช้ map ในการคูณตัวเลขใน array ทุกตัว เเล้วเปลี่ยนจากตัวเลข เป็น string เเละสุดท้ายคือเพิ่ม $ เข้าไปนั่นเอง

สรุปความแตกต่างระหว่าง map กับ forEach

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

สำหรับบทความนี้ผมได้เขียนโดยได้เเรงบัลดาลใจมาจากบทความหนึ่ง ซึ่งผมก็เเปลจากภาษาอังกฤษมาเป็นภาษาไทยโดยหวังว่าจะช่วยให้ใครหลายๆคนได้รับมุมมองใหม่ๆในการพัฒนาโปรเเกรม ถ้าในบทความนี้มีข้อผิดพลาด หรือมีข้อสงสัยอะไรเพิ่เติมสามารถ comment เอาไว้ได้เลยครับ ขอบคุณครับ

Cr. JavaScript map vs. forEach: When to Use Each One (tutsplus.com)