[JS] 특정 반복문안에서 await이 작동하지 않는 현상

요약

자바스크립트의 map, foreach의 내부에서는 await을 지원하지 않으며 기본 for문 형태 내부에서만 await 처리가 가능하다.

문제인식

Node Express 서버 개발중 DB 테이블에서 특정 요소의 데이터 변경 로직을 구현하기 위해 변경할 요소의 ID의 행을 삭제하고 다시 새로운 값을 추가한 요소의 ID의 행을 생성해야하는 로직이 필요했다.

이 때 중요한 점은 순서이며 만약 삭제보다 생성이 먼저 실행될 경우 저장되어야할 새로운 데이터가 들어온뒤 다시 삭제되는식으로 로직이 꼬이게된다.

그렇기 때문에 항상 삭제 후 생성이 순서대로 이루어질 수 있게 삭제와 생성에 await을 걸어주었다.

그러나 실행결과는 await이 무시된채로 비동기적으로 생성과 삭제가 뒤죽박죽 실행되었다.

실행 코드는 아래와 같다.

// 삭제 후
await program_broadcast_rounds.destroy({ where: { program_id: program_id }, transaction: t})
// 생성
info.broadcast_rounds.map((el) => {
  await program_broadcast_rounds.create({
        program_id: program_id,
        round: el.round,
        broadcast_date: el.broadcastDate === "" ? null: el.broadcastDate,
        content: el.content,
        guest: el.guest
	}, { transaction: t })
})

원인

자바스크립트의 map, foreach는 await 비동기처리를 지원하지 않으며 기본 for문 형태만이 await 처리가 가능하다.

해결

반복 로직을 map에서 기본 for문으로 변경한뒤 정상적으로 await이 동작하여 삭제와 생성이 순서대로 동작했다.

// 삭제 후
await program_broadcast_rounds.destroy({ where: { program_id: program_id }, transaction: t})
// 생성
for(let el of info.broadcast_rounds){
	await program_broadcast_rounds.create({
        program_id: program_id,
        round: el.round,
        broadcast_date: el.broadcastDate === "" ? null: el.broadcastDate,
        content: el.content,
        guest: el.guest
	}, { transaction: t })
}

Reference

https://stackoverflow.com/a/64978715/21097157