JS forEach 와 async

JS에서 forEach 메서드는 배열 요소를 순회하며 함수를 실행하는데, 기본적으로 비동기 처리에 적합하지 않다.

forEach 메서드는 반복 중인 함수가 완료될 때 까지 기다리지 않고 다음 요소로 이동하하므로

순서대로 실행되지 않을 수 있다.

 

비동기 작업을 순서대로 수행하려면 for...of 루프나 for 루프 를 사용하면 된다

다음은 for of 를 사용한 비동기 작업의 예시이다.

const items = [1, 2, 3, 4, 5];

// 1초씩 대기하여 콘솔에 item을 찍어보는 함수
async function processItem(item) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 1000);
  });
}

// for of 함수
async function processItemsSequentially() {
  for (const item of items) {
    await processItem(item);
  }
}

processItemsSequentially();

정상적으로 await 이 동작함을 확인 할 수 있다