ทำไมใช้ async await ใน forEach แล้วไม่ await?

เชื่อว่าทุกคนเคยใช้ async await ใน forEach บ้างแหละ จะไม่มีผลกระทบไรเลย หากผลลัพธ์ที่เราต้องการ ไม่สนใจลำดับขั้นตอนในการแสดงผล

แต่ถ้าเราต้องการแสดงผลที่เป็นลำดับขั้นตอน ลองมาดูโค้ดกับผลลัพธ์ข้างล่างนี้ก่อนครับ ว่าใช้ async await ใน forEach แล้วเป็นยังไง

เราคาดหวังว่ามันจะแสดงผลดังนี้
1
2
3
done

แต่!! สิ่งที่ไม่คาดคิด มันดันแสดงผลแบบนี้ ผลลัพธ์
done
1
2
3

ผีหลอก!!!
การทำงานของ forEach จะทำงานแบบ synchronous ไม่ทำงานเป็นลำดับขั้นตอน งานไหนเสร็จก็จะเอามาแสดงก่อน

แล้วถ้าอยากให้แสดงผลเป็นลำดับขั้นตอน? ผู้เขียนก็ขอแนะนำ for...of หรือ for...in

เราคาดหวังว่ามันจะแสดงผลดังนี้
1
2
3
done

ผลลัพธ์
1
2
3
done

ok เป็นลำดับขั้นตอนล่ะ
for...of หรือ for...in ทำงานแบบ asynchronous จะทำงานตรงนั้นให้เสร็จก่อน แล้วค่อยไปงานต่อไป

ใช้ map ก็ได้นะ ต้องใช้คู่กับ promise

เราคาดหวังว่ามันจะแสดงผลดังนี้
1
2
3
done

ผลลัพธ์
1
2
3
done

ok เป็นลำดับขั้นตอนล่ะ

สรุป

1. หากเราไม่สนใจการแสดงผลเป็นลำดับขั้นตอนก็ยังสามารถใช้ forEach ได้ เพราะการทำงานของ forEach จะทำงานแบบ synchronous ไม่ทำงานเป็นลำดับขั้นตอน งานไหนเสร็จก็จะเอามาแสดงก่อน

2. หากเราสนใจการแสดงผลเป็นลำดับขั้นตอน แนะนำให้ใช้ for in หรือ for of แต่ถ้าจะ map ต้องใช้คู่กับ promise

หวังว่าบทความนี้จะเป็นประโยชน์กับ dev ทุกคนนะครับ
หากผิดพลาดตรงไหน แจ้งได้เลยครับ

อ้างอิง

Why does async/await in a .forEach not actually await? - Corey Cleary