Skip to main content
เทคโนโลยี

เปรียบเทียบ .forEach, .map, และ filter แต่ละตัวทำงานยังไง ต่างกันตรงไหน ใช้งานยังไง ไปดูกัน

By พฤษภาคม 13th, 2022No Comments

เชื่อว่าเพื่อน ๆ น่าจะเคยใช้เจ้า .forEach, .map, และ filter กันมาบางแล้ว แต่สำหรับคนที่ยังไม่รู้ว่ามันคืออะไรก็สามารถเข้าไปอ่านกันได้ที่บทความนี้ได้เลยครับ แต่เพื่อน ๆ เคยสงสัยกันไหมครับว่า .forEach, .map, และ filter มันต่างกันยังไง ในเมื่อทั้งหมดก็ลูปใน Array เหมือนกัน ใช้แทนกันได้ไหม แล้วควรใช้ตอนไหนดี เรามาค่อย ๆ ดูไปพร้อม ๆ กันในบทความนี้กันครับ

เขียนโดย
Thanawat Udchachon
Internship @ borntoDev

ทวน .map กันสักนิด

เรามาทวนกันสักนิดก่อนจะไปกันต่อ .map เป็น Array Method ตัวหนึ่งที่จะวนค่าทุกค่าใน Array ไปเข้า Function แล้ว return ออกมาเป็น array ใหม่ เช่น เรามีข้อมูลอยู่ชุดหนึ่ง ซึ่งในที่นี้จะขอดึงโค้ดมาจากบทความก่อนหน้านี้เลยนะครับ

let receipt = [

{ name: "sausage", price: 42 },

{ name: "coffee", price: 32 },

{ name: "orange", price: 20 }

]

เราสามารถ console.log ค่าเหล่านั้นด้วย .map ได้โดย

items = receipt.map(function (receipt) {
    return receipt.name
});

console.log(items) // [sausage, coffee, orange]

แล้วมันต่างจาก .forEach ยังไง

สำหรับ .forEach เราสามารถ console.log ค่าเหล่านั้นได้โดย

items = []

receipt.forEach(function (receipt) {

    items.push(receipt.name)

})

console.log(items) // [sausage, coffee, orange]

จะเห็นได้ว่าของ .forEach นั้นจะต้องมีการสร้าง items ขึ้นมาก่อนสำหรับการรองรับ array ที่จะถูก push ขึ้นมา ซึ่งถ้าเราเอา .forEach ไปเขียนในแบบที่เราเขียนกับ .map เราก็จะได้ undefined ออกมา

items = receipt.forEach(function (receipt) {
    return receipt.name
});

console.log(items) // undefined

ทำไมล่ะ

ทั้ง forEach และ .map เป็น method ที่จะทำ function ใด ๆ เมื่อผ่าน element แต่ละตัวใน Array ทั้งคู่ ซึ่งจะเห็นได้ว่าโค้ดต่อไปนี้ได้ค่าออกมาเหมือนกัน

receipt.map(receipt => console.log(receipt))
// { name: 'sausage', price: 42 }
// { name: 'coffee', price: 32 } 
// { name: 'orange', price: 20 } 

receipt.forEach(receipt => console.log(receipt))
// { name: 'sausage', price: 42 }
// { name: 'coffee', price: 32 } 
// { name: 'orange', price: 20 }

แต่จุดที่แตกต่างคือ forEach จะทำ function อย่างเดียว ไม่ return ค่าใด ๆ กลับมา จะเห็นได้ว่าถ้าเราสร้างตัวแปรเก็บ function ของ forEach แล้วมา console.log ออกมาดูเราจะได้ undefined ออกมา

let returnForEach = receipt.forEach(receipt => console.log(receipt))
// { name: 'sausage', price: 42 }
// { name: 'coffee', price: 32 }
// { name: 'orange', price: 20 }

console.log(returnForEach) // undefined

แต่กลับกัน .map จะมีการสร้าง Array ใหม่โดยถ้าเปรียบเทียบกับ for loop ก็เหมือนกับการ push Value ที่ได้จากการ return เมื่อผ่าน element แต่ละตัวใน Array ด้วย callback function ซึ่งถ้าไม่มีอะไร return ออกมา ข้อมูลนั้นก็จะเป็น undefined (ฉะนั้นเวลาใช้ .map ก็อย่าลืม return ออกมาด้วยนะครับ เพราะตรงนี้จะไม่ error แสดงออกมาอาจจะทำให้หา error ได้ยาก)

let returnMap = receipt.map(receipt => console.log(receipt))
// { name: 'sausage', price: 42 }
// { name: 'coffee', price: 32 }
// { name: 'orange', price: 20 }

console.log(returnMap) // [ undefined, undefined, undefined ]

ภาพแสดงการทำงานของ ForEach

 

ภาพแสดงการทำงานของ Map

 

แล้วควรใช้ .map หรือ .forEach ตอนไหน

เราสามารถใช้ .forEach เมื่อต้องการให้มีการทำงานอะไรบางอย่างในแต่ละค่าใน Array เช่น เราต้องการ console.log ทุก element ออกมา หรือวน element ใน Array เพื่อนำไปบันทึกลงใน Database ซึ่งไม่จำเป็นต้องเก็บ element ที่เราวนได้จาก Array นั้นไว้ครับ และด้วยความที่มันไม่ได้ return อะไรออกมา มันจึงไม่สามารถเอาไป chain ให้ทำงานต่อกันได้ครับ

และเราสามารถใช้ .map เมื่อต้องการสร้าง array ใหม่ โดยที่ element แต่ละตัวใน Array ใหม่ มาจาก element แต่ละตัวใน Array เก่าที่ผ่านกระบวนการบางอย่างมาแล้ว เช่น เราต้องการสร้าง Array ใหม่ที่ค่าทุกค่าใน Array มีเป็น 2 เท่าของ Array เดิม ([1, 2, 3, 4, 5] → [2, 4, 6, 8, 10]) ครับ และด้วยความที่มัน return ค่าออกมา มันจึงสามารถเอาไป chain ให้มันทำงานต่อกันได้ครับ

แต่สิ่งที่น่าสนใจคือ ในด้าน Performance สำหรับการวนค่าทุกค่าใน Array เพื่อไปสร้างใน Array ใหม่ forEach กลับสามารถทำงานได้เร็วกว่า .map ครับ

 

ทวน .filter กันสักหน่อย

เรามาทวนกันอีกสักหน่อยก่อนจะไปกันต่อ .filter ก็เป็น Array Method อีกตัวหนึ่งสำหรับการกรองตามชื่อมันเลย โดยที่มันจะวนค่าทุกค่าใน Array แล้วเอา element ที่ตรงกับ condition ที่เราต้องการ (ที่ callback function return ออกมาเป็น true) มาสร้าง Array ใหม่

items = receipt.filter(function (receipt) {
    return receipt.price > 30
});

console.log(items) // [ { name: 'sausage', price: 42 }, { name: 'coffee', price: 32 } ]

 

แล้วมันต่างจาก .map ที่มี if ยังไง

.filter จะเลือกเฉพาะ element ที่ตรงกับ condition ไปใส่ใน Array ใหม่ ส่วน .map ที่มี if ก็จะเป็นการเลือก element ที่ตรงกับ condition ไปใส่ใน Array ใหม่เช่นกัน แต่ย้อนกลับไปก่อนหน้านี้เราจะเห็นว่าหากไม่มีอะไรที่ return ออกมา .map จะนำ undefined ไปใส่ใน Array แทน

items = receipt.map(function (receipt) {
    if (receipt.price > 30)
        return receipt
});

console.log(items)
// [
// { name: 'sausage', price: 42 },
// { name: 'coffee', price: 32 },
// undefined
// ]

ภาพแสดงการทำงานของ Filter

 

แล้วควรใช้ .filter หรือ .map ที่มี if ตอนไหน

ในด้าน Performance สำหรับการสร้างวนค่าทุกค่าใน Array แล้วเอา element ที่ตรงกับ condition ที่เราต้องการมาสร้าง Array ใหม่ .map ที่มี if สามารถทำงานได้เร็วกว่า .filter แต่สิ่งที่ควรคำนึงคือ ถ้าเราต้องการนำข้อมูลใน Array นี้ไปใช้เราก็จะต้องหาวิธีในการจะกำจัด undefined ซึ่งก็จะเพิ่มการทำงานให้หนักขึ้นไปอีก แต่ทั้งนี้ ด้วยความที่ทั้งคู่มัน return ค่าออกมา มันจึงสามารถเอาไป chain ให้มันทำงานต่อกันได้ครับ

สรุปสุดท้ายสิ่งที่ผู้อ่านจะได้รับ

เป็นยังไงกันบ้างครับกับการทำงานของและ Array Method แต่ละ method ก็มีจุดประสงค์ในการในงานที่เหมาะสมของมัน อย่าลืมว่า Performance ไม่ใช่เหตุผลเดียวในการเลือกใช้ method ใด ๆ เพราะยังมีปัจจัยอื่น ๆ เช่น ความง่ายในการทำความเข้าใจในการอ่านหรือแก้ไขโค้ดด้วยครับ

 

อ้างอิงจาก

  1. เอ๋.. For, ForEach Map, Filter และ Reduce มันต่างกันยังไงนะ ทั้งๆ ที่มันก็คือ Looping เหมือนกันหนิ?, สืบค้นเมื่อ 22 เมษายน 2565 จาก: https://www.youtube.com/watch?v=1C8uJ_wk1Ss
  2. .map(), .filter() และ .reduce() สามทหารเสือในการจัดการกับ Array[…], สืบค้นเมื่อ 22 เมษายน 2565 จาก: https://medium.com/@rennerwin/map-filter-reduce-สามทหารเสือในการจัดการกับ-array-49b2cd966e79
  3. [JavaScript] จัดการ Array แบบง่ายๆ ด้วย Map, Filter, Reduce และผองเพื่อน สืบค้นเมื่อ 22 เมษายน 2565 จาก: https://medium.com/@camp191/javascript-จัดการ-array-แบบง่ายๆ-ด้วย-map-filter-reduce-และผองเพื่อน-bfc84e59ebae
  4. JavaScript map vs. forEach: When to Use Each One, สืบค้นเมื่อ 22 เมษายน 2565 จาก: https://code.tutsplus.com/tutorials/javascript-map-vs-foreach-when-to-use-each-one–cms-38365
  5. ทำความเข้าใจเรื่องของ Callback Function ใน JavaScript, สืบค้นเมื่อ 22 เมษายน 2565 จาก: https://milerdev.medium.com/ทำความเข้าใจเรื่องของ-callback-function-ใน-javascript-47fa365e18cc
  6. Javascript performance test – for vs for each vs (map, reduce, filter, find)., สืบค้นเมื่อ 22 เมษายน 2565 จาก: https://towardsdatascience.com/javascript-performance-test-for-vs-for-each-vs-map-reduce-filter-find-32c1113f19d7
  7. https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript–cms-26209, สืบค้นเมื่อ 22 เมษายน 2565 จาก: https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript–cms-26209

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า