일반적으로 반복문 내에서 비동기 작업을 수행할 때, 결과값을 캐싱하거나 처리해야 하는 경우가 있습니다. 이때 for...of 문과 await 키워드를 함께 사용하여 간단하게 해결할 수 있습니다.

for…of 문과 await 키워드

for...of 문은 배열 또는 이터러블 객체를 반복하며 각 요소에 대해 코드 블록을 실행하는 반복문입니다. 비동기 작업을 수행하면서 그 결과를 캐싱하기 위해 await 키워드를 사용할 수 있습니다.

const fetchData = async (urls: string[]) => {
  const results: string[] = [];
  for (const url of urls) {
    const data = await fetch(url);
    results.push(await data.text());
  }
  console.log(results);
}

위 예제에서 fetchData 함수는 urls 배열에 포함된 각 URL에 대해 비동기적으로 데이터를 가져옵니다. for...of 문을 사용하여 배열을 반복하면서 await 키워드를 통해 각 URL에 대한 데이터를 비동기적으로 가져와 results 배열에 캐싱합니다.

이를 통해 간단하게 여러 비동기 작업의 결과를 캐싱할 수 있습니다.

결론

TypeScript에서 await for...of 문을 사용하여 배열 또는 이터러블 객체의 각 요소에 대해 비동기 작업을 수행하고 결과를 캐싱하는 방법에 대해 알아보았습니다. 이를 통해 코드를 간결하게 유지하면서 비동기 작업의 결과를 처리할 수 있습니다.