for await...of란 무엇인가?
'for await...of' 문은 배열, 유사 배열 객체(array-like objects), Map, Set 등과 같은 동기(synchronous) 객체뿐만 아니라 비동기(async) 객체를 순회하는 반복문을 생성합니다.
일반적인 for...of 문이 동기 이터러블만 순회할 수 있는 것과 달리, for await...of는 Promise를 반환하는 비동기 이터러블도 자연스럽게 처리할 수 있어 비동기 프로그래밍에서 매우 유용합니다.
기본 문법
for await (variable of iterable) {
statement
}동기 배열 순회 예제
다음 예제에서는 'for await...of' 문을 사용하여 일반 배열을 비동기 방식으로 순회하고, 출력 결과에서 볼 수 있듯이 1부터 5까지의 정수가 화면에 표시됩니다.
<html>
<body>
<script>
var txt = "";
const array = [1,2,3,4,5];
async function test() {
for await (const p of array) {
var txt = p + "</br>";
document.write(txt);
}
}
test();
</script>
</body>
</html>출력 결과
1 2 3 4 5
비동기 이터러블 객체 순회하기
반복문 안에서 비동기 함수를 호출하려면 새로운 심볼인 'Symbol.asyncIterator'와 'for await...of' 구문이 사용됩니다. 특히 'for await...of'는 비동기 이터러블 객체를 순회하는 데 핵심적인 역할을 합니다.
객체에 [Symbol.asyncIterator]() 메서드를 정의하면 해당 객체는 비동기 이터러블이 되며, 각 next() 호출은 Promise를 반환합니다. for await...of는 이 Promise가 resolve될 때마다 값을 꺼내어 순회를 진행합니다.
예제
다음 예제에서는 'for await...of'를 사용하여 비동기 이터러블을 순회하고, 1부터 5까지의 정수를 화면에 표시합니다.
<html>
<body>
<script>
var txt = "";
var async = {
[Symbol.asyncIterator]() {
return {
i: 1,
next() {
if (this.i < 6) {
return Promise.resolve({ value: this.i++, done : false});
}
}
};
}
};
async function test() {
for await (let p of async) {
txt = p + "/br"
document.write(txt);
}
}
test();
</script>
</body>
</html>출력 결과
1 2 3 4 5
정리
'for await...of' 문은 JavaScript ES2018(ES9)에서 도입된 기능으로, 다음과 같은 상황에서 특히 유용합니다.
- API에서 데이터를 순차적으로 가져올 때
- 여러 개의 Promise를 순서대로 처리해야 할 때
- Node.js 스트림(stream)처럼 비동기적으로 데이터가 공급되는 소스를 읽을 때
비동기 데이터 흐름을 동기 코드처럼 직관적으로 작성할 수 있게 해주는 for await...of는 현대 JavaScript 비동기 프로그래밍에서 반드시 알아두어야 할 필수 문법입니다.