forEach กับ Map ใน JavaScript ต่างกันยังไงกันนะ

สำหรับใครที่เขียนโปรแกรมด้วยภาษา JavaScript แล้ว ก็คงเคยเจอกับการใช้งานของฟังก์ชัน forEach และ map มาก่อน ซึ่งทั้งสองอย่างสามารถ Loop สิ่งที่อยู่ข้างในได้เหมือนกัน แล้วมันต่างกันยังไงละ มาดูกัน

forEach

เริ่มจาก forEach เข้าง่ายๆ ว่าเวลาที่เรียกใช้งาน มันจะไม่ทำงาน return ค่าใดๆ ออกมา หมายความว่ายังไง มาดูตัวอย่าง

ผมมี array อยู่อันนึง ตั้งชื่อว่า someArr และมีข้อมูลอยู่ใน array ดังนี้

const someArr = ["🥳", "🤩", "🤪", "🤯", "🤠"];

แล้วใช้ forEach ในการ Loop ข้อมูลใน array ดังนี้

someArr.forEach((item) => {
  console.log(item);
});

ค่าที่ได้ก็จะเป็น

🥳
🤩
🤪
🤯
🤠

จากนั้นผมลองเปลี่ยนโค้ดให้มัน return ค่าออกมาดู

const newArr = someArr.forEach((item) => {
  return item;
});

console.log(newArr);

แล้วผลลัพธ์ที่ได้ก็จะเป็น

undefined;

Map

มาลองใช้ Map กันดูบ้าง ใช้ array ชุดเดียวกันเลย

const someArr = ["🥳", "🤩", "🤪", "🤯", "🤠"];

แล้วก็ สร้างตัวแปร newArr เพื่อมารับค่า

const newArr = someArr.map((item) => {
  return item;
});

แล้วมาดูผลลัพธ์กันสักหน่อย

["🥳", "🤩", "🤪", "🤯", "🤠"];

Conclusion

• forEach จะทำการเรียกฟังก์ชันที่กำหนดไว้ในแต่ละอันของ array โดยไม่มีการ return ค่าออกมา
• Map จะทำการเรียกฟังก์ชันที่กำหนดไว้ในแต่ละอันของ array และ return ค่าออกมาเป็น array ใหม่

ก่อนจะเชื่อทั้งหมดนี้ ไปลองเล่นกันดูได้ที่ MDN Map และ MDN forEach