[JavaScript] forEach 는 promise 를 기다리지 않는다

배열의 요소 별로 비동기로 처리하는 api 의 호출이 모두 끝난 후, 그 결괏값을 set 시켜 redux 로 관리하려고 했을 때 이슈가 발생했다.

찾아봤더니 forEach 함수는 비동기 함수를 기다려주지 않는다는 것을 알게 되었다.

forEach 함수는 콜백 함수로 비동기 함수를 받더라도 실행을 기다려 주지 않았다.

비동기를 기다려주지 않기 때문에, forEach 함수 내부에서 then() 으로 처리를 해도, 혹은 if 조건 처리를 해도 결과는 바뀌지 않았다.

대안으로는 for…of문 을 사용하거나, Promise.all() 을 사용해야 했다.

• for…of

  • for…of 문은 forEach 와 달리 병렬처리가 되지 않아서 계산되는동안 대기를 계속해야하기에 소요시간이 길어질 수 있다.

    for (const value of valueArr) {
        const g = await test.findOne({ name: value });
        testArr.push(g);
    } 

• Promise.all()

  • Promise.all 을 사용하면, Promise 배열로 만든 비동기 함수들을 동시에 실행할 수 있다.

    const promises = valueArr.map(async (ele) => {
        const g = await test.findOne({ name: ele });
        testArr.push(g);
    });
    await Promise.all(promises);