JavaScript에서 async/await와 Promise를 활용하면 반복문 내에서도 비동기 작업을 순차적으로 처리할 수 있습니다. 일반적인 for 루프 안에 await 키워드를 사용하면 각 반복이 완료될 때까지 기다린 후 다음 반복으로 넘어가는 비동기 루프를 손쉽게 구현할 수 있습니다.
예제 코드
아래 예제는 버튼을 클릭하면 비동기 루프가 시작되어, 2초마다 숫자를 하나씩 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript의 비동기 루프</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위의 버튼을 클릭하면 비동기 루프가 시작됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
async function waitTime(time) {
return new Promise((resolve) => {
setTimeout(resolve, time);
});
}
async function someFunction() {
for (let i = 0; i < 10; i++) {
await waitTime(2000);
resEle.innerHTML += "i = " + i + "<br>";
}
}
document.querySelector(".Btn").addEventListener("click", () => {
someFunction();
});
</script>
</body>
</html>코드 설명
- waitTime(time): 지정된 시간(ms)만큼 대기한 후 resolve되는 Promise를 반환하는 async 함수입니다.
- someFunction(): for 루프 안에서 await 키워드로 waitTime 함수를 호출하여, 매 반복마다 2초씩 대기한 후 결과를 출력합니다.
- 이벤트 리스너: 버튼 클릭 시 someFunction()이 실행되어 비동기 루프가 시작됩니다.
실행 결과
'CLICK HERE' 버튼을 클릭하면 루프가 실행되어 아래와 같이 0부터 9까지의 값이 2초 간격으로 순차적으로 출력됩니다.
루프가 모두 완료되면 최종적으로 다음과 같은 결과가 표시됩니다.
핵심 포인트
await 키워드는 async 함수 내부에서만 사용할 수 있으며, Promise가 처리(settle)될 때까지 해당 라인에서 실행을 일시 중지합니다. 이러한 특성 덕분에 setTimeout과 같은 비동기 작업도 동기 코드처럼 직관적인 흐름으로 작성할 수 있으며, API 호출이나 파일 읽기 등 시간이 걸리는 작업을 반복 처리할 때 특히 유용합니다.