JavaScript 및 TypeScript에서 for...of 루프를 사용하여 Iterable(반복 가능한) 컬렉션의 요소를 반복하고, await 키워드와 함께 사용하여 비동기적인 작업을 처리하는 방법에 대해 알아보겠습니다. 이를 통해 코드를 가독성 있게 작성하고, 비동기 코드를 간결하게 표현할 수 있습니다.
await for…of 문의 장점
1. 간결한 비동기 코드 작성
for...of 루프와 await 키워드를 함께 사용하면, 비동기 작업을 반복하면서 간결한 형태로 처리할 수 있습니다. 아래는 Promise 기반의 데이터를 반복하여 순차적으로 처리하는 예제입니다.
async function handleData(data: Promise<string>[]) {
for await (const item of data) {
const result = await item;
console.log(result);
}
}
2. 반복 가능한 객체 사용
for...of 루프는 Symbol.iterator 메서드를 통해 정의된 반복 가능한 객체(Iterable)를 처리합니다. 이에 따라, 내부적으로 Symbol.asyncIterator 메서드를 구현하여 개발자가 직접 비동기적인 작업을 처리하는 객체에 대해 await for...of 문을 사용할 수 있습니다.
3. 코드 가독성 향상
await for...of 문은 비동기 코드를 동기 코드와 유사한 형태로 작성할 수 있도록 도와줍니다. 이를 통해 가독성이 향상되고, 비동기적인 요소들이 각각 어떻게 처리되는지 명확하게 파악할 수 있습니다.
await for…of 문의 단점
1. 병렬 처리의 한계
await for...of 문은 비동기 작업을 순차적으로 처리합니다. 따라서, 병렬 처리가 필요한 상황에서는 다른 방법을 고려해야 합니다. 이에 대해 Promise.all 또는 worker thread 등의 기술을 함께 활용하여 병렬 처리를 구현할 수 있습니다.
2. 오류 처리
await for...of 문은 내부적으로 각 Promise가 reject될 경우에만 오류 처리가 가능합니다. 따라서, 에러를 적절히 처리하기 위해서는 추가적인 로직을 구현해야 합니다.
요약
await for...of 문은 간결한 형태의 비동기 코드를 작성하고, 가독성을 향상시키는데 도움을 줍니다. 그러나 병렬 처리와 오류 처리 측면에서는 주의가 필요합니다.
이러한 장단점을 고려하여, 프로젝트의 요구 사항 및 상황에 맞게 await for...of 문을 적재적소에 활용하는 것이 중요합니다.