[JAVASCRIPT] forEach문(for문) 에서 async 적용하는 방법

떠돌이개발자Aug 3, 2023

ㄴㅁㅇ

forEach문(for문)은 async await 적용되지 않는다는 걸 알았습니다..
기석M의 도움으로 map과 Promise.all()을 사용하여 코드를 수정했습니다..
map을 통해 각 Promise를 배열로 저장하고 Promise.all로 실행하여 병렬 처리합니다.
비동기, 동기 코드에 대해 더 공부를 해야겠다고 느꼈습니다…

forEach 함수는 async 함수를 안기다린다.

원래코드

// retVal의 size는 2, 내가 기대하는 콘솔 결과값은 1,1,2 였으나 1,2,1이 출력됨

await retVal.forEach(async (item) => {
  if (item.type === 'DEPT') {
	const arr = await this.searchDeptEmp(item);
	totArr.push(...arr);
  } else {
	totArr.push(item);
  }
  console.log(1);
});

const data = {
  type: 'DEPT',
  selItem: totArr,
};
console.log(2);

수정코드

const syncDatas = retVal.map(async (item) => {
  let rtnItem;
  if (item.type === 'DEPT') {
  const arr = await this.searchDeptEmp(item);
   rtnItem = arr;
  } else {
   rtnItem = [item];
  }
   return rtnItem;
});

const totArr = await Promise.all(syncDatas);

forEach 함수의 콜백이 비동기 함수일 때 경험한 문제

문제가 생긴 코드는 아래와 같다. 이 코드는 wantedGenres 배열의 각각의 값에 대해 MongoDB에서 일치하는 오브젝트를 찾아 genres 배열에 넣고자 하는 코드이다. 예상하기에는, forEach의 콜백 함수에서 genres에 모두 삽입이 완료된 후 결과가 출력될 것으로 보였다. 그러나 실제 실행 결과에서는, 최종 결과가 먼저 출력된 후 삽입이 일어났다.

let genres = [];
wantedGenres.forEach(async (value, index) => {
    const g = await Genre.findOne({ name: value }); // MongoDB에서 오브젝트 조회
    genres.push(g);
    console.log(`Push ${index}: ${genres}`);
});

console.log(`Done: ` + genres);

// wantedGenres = ['로맨스', '판타지']

// 예상 결과
// Push 0: [{...name: '로맨스'...}]
// Push 1: [{...name: '로맨스'...}, {...name: '판타지'...}]
// Done: [{...name: '로맨스'...}, {...name: '판타지'...}]


// 실행 결과
// Done:
// Push 0: [{...name: '로맨스'...}]
// Push 1: [{...name: '로맨스'...}, {...name: '판타지'...}]

이와 같은 문제는 forEach 함수는 콜백 함수로 비동기 함수를 받더라도 실행을 기다려주지 않기 때문이다. 콜백 함수가 실행되는 도중에 마지막 console.log()가 실행되었기에 이런 결과가 나타난 것이다.

forEach expects a synchronous function forEach does not wait for promises. Kindly make sure you are aware of the implications while using promises(or async functions) as forEach callback.
#MDN Web Docs

찾아본 결과 MDN Web Docs에서도 forEach()는 Promises를 기다리지 않는다고 명시되어 있다.

해결 방안

이를 간단하게 대체할 방법을 찾던 도중 이에 대해 잘 다룬 글이 이미 존재하였다. 자세한 정리를 아래 글로 이동해 확인할 수 있다.

배열에 비동기 작업을 실시할 때 알아두면 좋은 이야기들 (velog.io)

배열에 비동기 작업을 실시할 때 알아두면 좋은 이야기들

프론트엔드 인턴 면접에서 비동기 작업 관련 질문 대답 못한 뒤 외양간 뚝딱뚝딱 고치는 이야기.

velog.io

대안 1: for…of 문

배열의 각 항목에 대해 비동기 작업를 반복 실행하도록 할 때는 for…of 문이 대안이 될 수 있다. for…of 문을 아래와 같이 사용할 경우 비동기 작업을 기다리면서 순차적으로 실행할 수 있다. 그런데 이 방법은 forEach()를 사용했을 때와 달리 병렬로 처리되지 않으므로 소요 시간이 길어질 수 있음에 주의해야 한다.

genres = [];

for (const value of wantedGenres) {
    const g = await Genre.findOne({ name: value });
    genres.push(g);
}

참고로 아래와 같이 entries()를 활용하면 for…of 문에서도 값과 함께 인덱스에도 접근할 수 있다.

genres = [];
// entries()는 인덱스/키 쌍의 새로운 배열을 반환한다
for (const [index, value] of wantedGenres.entries()) {
    const g = await Genre.findOne({ name: value });
    genres.push(g);
}

대안 2: Promise.all()

비동기 작업의 소요 시간이 크면, 순차적으로 반복하는 대신 병렬로 처리하는 걸 고려할 수 있다. 각 비동기 함수를 Promise 배열로 만들고, Promise.all()을 통해 실행하면 비동기 함수들을 동시에 실행할 수 있다. 아래 코드는 map()을 통해 각 Promise를 배열로 저장하고 Promise.all()을 통해 실행하게 된다.

let genres = [];

const promises = wantedGenres.map(async (value, index) => {
    const g = await Genre.findOne({ name: value });
    genres.push(g);
});
await Promise.all(promises);

아래 글에서 for…of 문과 Promise.all()의 직렬 처리, 병렬 처리를 확인할 수 있다.

[JS] Promise.all()은 병렬일까 직렬일까? (tistory.com)