자바스크립트 forEach 와 async await 을 같이 사용하면 안되는건가요?

forEach는 비동기 작업을 지원하지 않고, 프로미스가 resolve 될 때까지 기다리지 않고 다음 iteration으로 넘어가기 때문에 async/await와 같이 사용할 수 없습니다.

1

안녕하세요! forEach는 비동기 작업이 완료될때까지 기다리지 않습니다. 비동기 요청 순서가 상관없다면 promise.all, 각각의 요청을 기다릴 필요가 있다면 for await of 사용하시면 될것 같아요! - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for-await...of - https://velog.io/@hiro2474/understandfor-await-of

1
2
3
4
5
6
7
8
9
10
11
12
13
14
async function fetchAllComments() {
  const comments = [];

  const pages = await fetchPages();
  
  for await (const page of pages) {
         const comment = await fetchComment(page);
    comments.push(...comment);

         console.log(comment);
  };

  return comments;
}

예전에 비슷한 질문을 보았던 기억이 있어서 찾아왔습니다! 해당 질문과 답변 참고해 보세요! https://careerly.co.kr/qnas/1879

for of 쓰고 아래부분에 await 쓰시면 됩니다

fetchAllComments 호출 결과를 바로 찍어보면 알겁니다 객체기 때문에 나중에 배열에 push가 되겠지만 배열을 사용하는 시점에 따라 달라질 수 있습니다. await forEach가 되는게 아닌 이상 forEach 내부 함수가 완료되기전에 return 되어버림

그래서 저같은 경우엔 map 메서드를 사용합니다.

JavaScript의 'forEach' 메소드와 'async/await'를 함께 사용하는 것은 주의가 필요합니다. 이는 비동기적인 동작을 제대로 처리하지 못할 수 있기 때문입니다. 'forEach' 메소드는 콜백 함수를 동기적으로 실행하며, 비동기 작업을 기다리지 않고 다음 요소로 넘어가게 됩니다. 따라서 'forEach' 내부에서 'async/await'를 사용하더라도 비동기 작업이 순서대로 처리되지 않고 병렬적으로 실행될 가능성이 있습니다. 이로 인해 예상치 못한 동작이 발생할 수 있습니다. 위의 코드에서도 'pages.forEach' 내부의 콜백 함수가 비동기 함수인데, 이 부분에서 발생할 수 있는 문제는 다음과 같습니다: 1. 'forEach'의 콜백 함수는 비동기로 실행되므로 'forEach' 자체의 동작이 완료되기 전에 'return comments;' 문이 실행될 수 있습니다. 따라서 'comments' 배열이 비어있는 상태로 반환될 수 있습니다. 2. 'forEach'의 각 이터레이션에서 비동기 작업이 병렬로 실행되므로, 'console.log(comment);' 문이 실행되는 순서가 예상과 다를 수 있습니다. 이러한 문제를 해결하기 위해서는 'forEach' 대신에 'for...of' 루프나 'for' 루프를 사용하여 요소를 순차적으로 처리하는 것이 좋습니다. 아래는 'for...of' 루프를 사용한 수정된 코드 예시입니다: 이 코드에서 'for...of' 루프는 'await' 키워드를 기다리면서 비동기 작업을 순차적으로 처리합니다. 이를 통해 예상한 대로 비동기 작업이 실행되고 결과가 수집됩니다. 따라서, 'forEach'와 'async/await'를 함께 사용하지 않고 'for...of' 루프나 'for' 루프를 사용하여 비동기 작업을 순차적으로 처리하는 것이 좋습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
async function fetchAllComments() {
  const comments = [];

  const pages = await fetchPages();

  for (const page of pages) {
    const comment = await fetchComment(page);
    comments.push(...comment);

    console.log(comment);
  }

  return comments;
}