이번 글에서는 TypeScript에서 비동기 이터레이션과 await for...of문의 사용법과 차이점에 대해 알아보겠습니다.

비동기 이터레이션 (Async Iteration)

비동기 이터레이션은 ES2018에서 도입된 기능으로, Symbol.asyncIterator 메서드를 사용해 객체를 비동기적으로 이터레이션할 수 있게 합니다. 이 기능을 사용하면 for await...of 구문을 통해 비동기적으로 이터레이션할 수 있습니다.

async function* asyncGenerator() {
  let i = 0;
  while (i < 3) {
    yield i++;
  }
}

(async () => {
  for await (const value of asyncGenerator()) {
    console.log(value);
  }
})();

await for...of 문

await for...of 문은 for...of 문과 await 키워드를 결합한 것으로, 비동기적으로 이터레이션하는 데 사용됩니다.

async function iterateAsyncValues() {
  const iterable = [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)];
  for await (const value of iterable) {
    console.log(await value);
  }
}

iterateAsyncValues();

차이점

주요 차이점은 for await...of 문은 비동기 이터레이션을 위한 명시적인 구문이며, 이터러블 객체가 Symbol.asyncIterator 메서드를 구현해야 합니다. 반면 await for...of 문은 배열 또는 이터러블 객체의 프로미스를 병렬적으로 기다리고 순차적으로 결과를 반환합니다.

더 자세한 내용은 MDN web docs 및 TypeScript 공식 문서를 참조하세요.