[JS] map/forEach 내에서의 async/await (Promise.all)

 

  얼마전에 겪은 일인데, Firestore의 DB를 불러와 async await 을 forEach에서 사용하려고 작동시켜 보았는데 제대로 작동하지않아 거의 반나절동안 삽질을 한 기억 때문에 까먹지 않으려고 작성을 해보았습니다.

일단 async await 과 forEach, map에 관해 어느정도 알고있다는 전제 하에 글을 쓰겠습니다.
이 코드를 짜는 당일날 console 에 자꾸 [] 와 같은 빈배열이 들어오고 눌러보면 데이터에 값이 들어가는걸로 보아 비동기처리가 잘 되지않아 구글에 검색을해보니 forEach와 map은 async await 이 작동되도록 반복문이 기달려주지 않는다는 것을 알게 되었습니다.

제가 삽질한 코드와 코드의 수정과정을 보여드리겠습니다.

삽질한 코드

const snapshot =  firebase
      .firestore()
       .col('example')

const array

snapshot.forEach( async (value)=>{

const getValue = await value.get()
    array.push(getValue)

})
console.log(snapshot)  // []

기억은 잘 안나지만 대충 이런 느낌이었던 것 같습니다.

비동기처리가 되지않아 나중에 snapshot 배열에 값이 들어왔습니다.

for(... of ...) 방식

이것을 해결하기 위해 쳐보니 일단 for(... of ...) 방식이 쉬워보이길래 해보았습니다.

 for (value of snapshot){
  const getValue = await value.get()
    array.push(getValue)
 }

이 방법으로 해결은 되었지만 직렬로 처리가되어 매우 비효율적으로 성능이 나오지않았습니다.

Promise.all()

이것을 해결하기위해 Promise.all을 사용하게 되었습니다.

await Promise.all(snapshot.forEach( async (value)=>{

const getValue = await value.get()
    array.push(getValue)

}))
console.log(snapshot)  // []

예제가 기억나는대로 써가지고 잘 작동하지않을수도 있습니다. 읽어주셔서 감사합니다.