자바스크립트에서 비동기 작업을 처리할 때, async/await와 반복문을 함께 사용하는 방법은 매우 유용합니다. 이를 통해 반복문 안에서 비동기 작업을 순차적으로 처리하고, 결과를 쉽게 확인할 수 있습니다.

for...of 반복문과 async/await 사용하기

for...of 반복문은 배열을 순회하거나 반복 가능한 객체를 순회할 때 사용됩니다. 이러한 반복문과 async/await를 함께 사용하여 비동기 작업을 순차적으로 처리할 수 있습니다.

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

async function asyncFunction(element) {
  // 비동기 작업 수행
  // ...

  return result;
}

async function sequentialAsyncLoop() {
  for (const element of arr) {
    const result = await asyncFunction(element);
    console.log(result);
  }
}

sequentialAsyncLoop();

위의 예시 코드에서 sequentialAsyncLoop 함수는 for...of 반복문을 사용하여 배열 arr을 순회합니다. 각 요소에 대해 asyncFunction 함수를 await 키워드와 함께 호출하고, 비동기 작업이 완료된 후 결과를 출력합니다.

이렇게 하면 비동기 작업이 순차적으로 실행되며, 각 작업의 결과를 활용할 수 있습니다.

Promise.all과 for...of 반복문 사용하기

Promise.all은 여러 개의 프로미스를 동시에 실행하고, 모든 작업이 완료될 때까지 기다린 후 결과를 반환하는 함수입니다. 이 함수와 for...of 반복문을 함께 사용하여 여러 비동기 작업을 병렬로 처리할 수 있습니다.

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

async function asyncFunction(element) {
  // 비동기 작업 수행
  // ...

  return result;
}

async function parallelAsyncLoop() {
  const promises = [];

  for (const element of arr) {
    promises.push(asyncFunction(element));
  }

  const results = await Promise.all(promises);
  console.log(results);
}

parallelAsyncLoop();

위의 예시 코드에서 parallelAsyncLoop 함수는 Promise.all을 사용하여 promises 배열에 모든 비동기 작업을 추가한 뒤, 한 번에 실행합니다. 이후 await 키워드를 사용하여 모든 작업이 완료될 때까지 기다린 뒤 결과를 출력합니다.

이렇게 함으로써 여러 개의 비동기 작업을 병렬로 처리하고, 각 작업의 결과를 한 번에 확인할 수 있습니다.

결론

자바스크립트에서 async/await와 반복문을 함께 사용하는 것은 비동기 작업을 효율적으로 처리하기 위한 강력한 방법입니다. for...of 반복문을 사용하여 작업을 순차적으로 실행하거나, Promise.all을 활용하여 작업을 병렬로 처리할 수 있습니다.

멀티스레드 환경이 아닌 싱글스레드인 자바스크립트에서도 이러한 기능을 활용하여 비동기 작업을 보다 쉽게 다룰 수 있습니다.