자바스크립트에서 동기적으로 실행되는 루프문(for문) 정리

자바스크립트에서 반복문(loop) 은 기본적으로 동기적으로 실행됩니다. 하지만 비동기 코드(setTimeout, fetch, await)가 포함되면 비동기적으로 실행될 수 있습니다.

 

이 글에서는 동기적으로 실행되는 루프문과, 비동기 코드가 포함된 경우 동기적으로 실행하는 방법을 정리하겠습니다.

 

✅ 동기적으로 실행되는 루프문
다음의 루프문은 순차적으로 실행되며 동기적입니다.

1️⃣ for 문 (동기 실행)

console.log("Start");

for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log("End");

 

출력 결과

Start
0
1
2
End

 

📌 for 문은 순차적으로 실행되므로 완전히 동기적입니다.

 

2️⃣ while 문 (동기 실행)

 

console.log("Start");

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

console.log("End");

출력 결과

Start
0
1
2
End

 

📌 while 문 역시 동기적으로 실행됩니다.

 

3️⃣ forEach 문 (동기 실행이지만 await 불가)

 

console.log("Start");

[1, 2, 3].forEach((num) => {
  console.log(num);
});

console.log("End");

 

출력 결과

Start
1
2
3
End

 

📌 forEach는 순차적으로 실행되지만, await을 사용할 수 없습니다.
📌 만약 비동기 코드를 순차적으로 실행하고 싶다면 for...of를 사용해야 합니다.

 

⚠️ 비동기 코드가 포함되면 루프가 비동기적으로 실행됨

만약 루프 안에서 setTimeout, fetch, await 같은 비동기 코드가 포함되면 루프가 비동기적으로 실행됩니다.

❌ setTimeout을 포함한 for 문 (비동기 실행됨)

console.log("Start");

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}

console.log("End");

 

출력 결과 (1초 후 출력됨)

Start
End
0
1
2

 

📌 setTimeout은 비동기 함수이므로 루프가 끝난 후 실행됩니다.
📌 이처럼 비동기 코드가 포함되면 루프가 예상과 다르게 동작할 수 있음에 주의해야 합니다.

 

✅ 비동기 루프를 동기적으로 실행하는 방법

비동기 코드를 포함한 루프를 순차적으로 실행하려면 for...of + await을 사용해야 합니다.

1️⃣ for...of + await 사용 (동기 실행)

console.log("Start");

async function syncLoop() {
  for (const num of [1, 2, 3]) {
    await new Promise((resolve) => setTimeout(resolve, 1000)); // 1초 대기
    console.log(num);
  }
  console.log("End");
}

syncLoop();

 

출력 결과 (1초 간격으로 출력됨)

Start
1  (1초 후)
2  (1초 후)
3  (1초 후)
End

 

📌 await이 for...of 안에서 동작하여 비동기 작업이 순차적으로 실행됨
📌 forEach는 await을 지원하지 않으므로 for...of를 사용해야 함

 

🚀 정리

루프문동기 실행await 지원비고

for	✅	❌	기본적인 동기 실행
while	✅	❌	조건이 참인 동안 반복
do...while	✅	❌	최소 1회 실행 후 조건 검사
forEach	✅	❌	await 사용 불가
for...of	✅	✅	비동기 코드(await) 지원

🎯 비동기 코드가 포함된 경우 동기적으로 실행하려면?

✅ for...of + await을 사용하면 비동기 루프를 동기적으로 실행 가능!