1. 개요

개발 중, forEach로 비동기처리를 하려던 중 실행순서에 오류가 났었다.

순회 메서드인 forEach에 async 키워드를 붙여주면 비동기 처리가 가능할 줄 알았는데 잘 처리가 되지 않았던 것이었다.

https://gusrb3164.github.io/web/2021/02/07/js_foreach

생각보다 원인을 파악하는데 오래걸리지 않았다. 나와 비슷한 상황을 겪은 사람이 한둘이 아니었고, 위의 블로그를 읽고 바로 수정할 수 있었다.

2. forEach에 대해

아래 내용과 예제는 여기서 가져온 내용중 비동기 처리에 대한 내용을 가져왔다.

forEach()는 동기 함수를 기대하며 프로미스를 기다리지 않습니다. 프로미스(또는 비동기 함수)를 forEach 콜백으로 사용할 때는 그 의미를 알고 있어야 합니다.

const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

ratings.forEach(async (rating) => {
  sum = await sumFunction(sum, rating);
});

console.log(sum);
// 예상 출력: 14
// 실제 출력: 0

단순 누적합을 구하는 예제이지만, forEach의 특성에 따라 예상과는 다르게 실제 출력은 0을 내고 있다.

때문에 비동기 처리를 하고자 하면 forEach말고 다른 방법을 사용하면 된다.

3. 처리 방법