forEach문에서 await가 안 먹히는 이유

forEach와 for...of: 비동기 처리의 차이점 😊

JavaScript에서는 배열을 순회하는 다양한 방법이 있으며, 그중 두 가지 대표적인 방법인 forEach와 for...of를 알고 계신가요? 이 두 방법은 배열의 각 요소를 처리하는 데 매우 유용하지만, 특히 비동기 처리를 다룰 때는 그 차이가 확연히 드러납니다. 이제 자세히 살펴보겠습니다!

1. 문제 상황: 비동기 처리의 독립성 😲

forEach는 배열의 각 요소에 대해 지정된 함수를 실행합니다.
하지만 주의할 점은 forEach가 비동기 작업을 제대로 대기하지 않는다는 것입니다. (그렇게 설계가 되었습니다)
즉, await를 사용하더라도 각 단계가 완료될 때까지 기다리지 않고 다음 단계로 넘어가게 됩니다.
이로 인해 비동기 작업이 의도한 대로 수행되지 않습니다.

예시:

const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const array = [1, 2, 3];

array.forEach(async (number) => {
  console.log(`Fetching data for ${number}`);
  await wait(1000); // 이 await는 무시됩니다 😟
  console.log(`Data for ${number} fetched`);
});

console.log('All fetch initiated');

위 코드를 실행하면 "All fetch initiated"가 즉시 출력되며, 데이터 가져오기 작업이 동시에 시작됩니다.
각 비동기 작업이 독립적으로 실행되기 때문에, await가 의도한 대로 작동하지 않으며 순서가 보장되지 않습니다. 😕

2. 해결 방법: for...of를 사용한 비동기 순차 처리 🚀

반면, for...of는 배열의 각 요소를 순회하면서 비동기 작업이 완료될 때까지 기다릴 수 있도록 해줍니다.
각 이터레이션에서 await를 사용할 수 있어, 비동기 작업이 끝난 후 다음 이터레이션으로 넘어갑니다.
이 방법은 비동기 처리가 순차적으로 이루어지는 것을 보장합니다.

예시:

async function fetchData() {
  const array = [1, 2, 3];

  for (const number of array) {
    console.log(`Fetching data for ${number}`);
    await wait(1000); // 이 await는 정상적으로 작동합니다! 🎉
    console.log(`Data for ${number} fetched`);
  }
  console.log('All fetch completed');
}

// 함수 호출
fetchData();

위의 코드 실행 시, 각 번호에 대해 1초 대기 후 출력을 진행하며, 비동기 작업이 완료되기 전에는 다음 이터레이션으로 넘어가지 않습니다. 이는 코드의 흐름을 명확하게 이해할 수 있게 해주며, 의존성을 가진 비동기 작업을 효과적으로 처리할 수 있도록 해줍니다. 😊

3. 마무리 🎊

JavaScript에서 forEach와 for...of는 배열을 순회하는 데 유용하지만, 비동기 처리를 다룰 때는 사용하는 방식에 유의해야 합니다.
forEach에서의 await가 무시되며 순서 제어가 어려운 반면, for...of는 비동기 작업을 안전하게 순차적으로 진행할 수 있도록 해줍니다.
이러한 특성을 이해하고 상황에 맞게 선택하여 사용하는 것이 중요합니다.

이제 여러분도 비동기 처리를 할 때 어떤 방법을 선택해야 할지 잘 알게 되셨죠? 😊 즐거운 코딩 되세요! 🚀