[Eric's JS] JavaScript에서 async/await과 forEach문 사용 문제 및 해결책 🤔

얼마전에 JavaScript로 코드를 작성하다가,
JavaScript에서 forEach 메서드와 async/await를 함께 사용할 때, 예상치 못한 동작으로 코드가
제대로 동작하지 않는 문제를 겪었다.
찾아보니 이는 forEach 메서드가 비동기 코드를 동기적으로 처리하지 않기 때문이라고한다.

문제 설명

forEach 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하지만, 해당 콜백이 비동기 함수일 경우 이를 제대로 처리하지 못한다.
즉, async/await를 사용하더라도 forEach는 각 콜백의 완료를 기다리지 않고 다음 요소로 넘어간다.
이는 forEach가 내부적으로 비동기 코드를 다루는 방식 때문이다.

예제 코드

다음은 forEach와 async/await를 함께 사용했을 때 발생하는 문제를 보여주는 예제 코드입니다:

const asyncOperation = async (num) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`Processed ${num}`);
      resolve(num);
    }, 1000);
  });
};

const processArray = async (array) => {
  array.forEach(async (num) => {
    await asyncOperation(num);
  });
  console.log('Done processing array');
};

processArray([1, 2, 3, 4]);

이 코드를 실행하면 예상한 결과가 나오지 않습니다.
'Done processing array'가 먼저 출력되고 나서 각 요소가 처리된다.
이는 forEach가 비동기 함수를 동기적으로 처리하지 않기 때문이다.

출력 결과

Done processing array
Processed 1
Processed 2
Processed 3
Processed 4

비동기 코드의 문제점

forEach는 일반적으로 동기 콜백 함수를 사용하도록 설계되었다고한다.
forEach에 전달된 콜백 함수는 즉시 실행되며, forEach는 각 콜백 함수의 완료 여부를 기다리지 않는다.
따라서 콜백 함수 내에서 async/await를 사용해도, forEach는 비동기 함수의 완료를 기다리지 않고 다음 요소에 대해 콜백을 실행한다.

forEach의 동작 방식을 이해하기 위해서는, forEach의 내부 구조를 살펴보는 것이 도움이 된다.
forEach는 각 요소에 대해 콜백 함수를 실행하고, 모든 콜백이 비동기적이라면, forEach는 이를 동기적으로 처리할 수 없다.
이는 forEach가 Promise를 반환하지 않기 때문이다.

해결책

forEach 대신 for...of 루프를 사용하면 async/await를 쉽게 사용할 수 있다.
for...of는 각 비동기 작업이 완료될 때까지 기다린 후 다음 작업을 시작하기 때문에, 비동기 코드를 순차적으로 처리할 수 있다.

개선된 코드

다음은 for...of 루프를 사용하여 위 문제를 해결한 예제 코드입니다:

const asyncOperation = async (num) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`Processed ${num}`);
      resolve(num);
    }, 1000);
  });
};

const processArray = async (array) => {
  for (const num of array) {
    await asyncOperation(num);
  }
  console.log('Done processing array');
};

processArray([1, 2, 3, 4]);

출력 결과

Processed 1
Processed 2
Processed 3
Processed 4
Done processing array

이제 각 비동기 작업이 순차적으로 처리되고, 'Done processing array'는 모든 작업이 완료된 후에 출력이 되는걸 볼수있다.

결론

JavaScript에서 forEach와 async/await를 함께 사용할 때 비동기 함수가 동기적으로 처리되지 않는 문제를 겪을 수 있다.
이를 해결하기 위해 for...of 루프를 사용하는 것이 좋다.
for...of는 각 비동기 작업이 완료될 때까지 기다리므로, 원하는 순서대로 작업을 처리할 수 있다.
이 방법을 통해 더 직관적이고 오류가 적은 비동기 코드를 작성할 수 있다.