สำหรับใครที่เขียนโปรแกรมด้วยภาษา 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