JavaScript for 루프 완벽 이해하기: 기본 구조와 실전 예제

for 루프는 JavaScript에서 제공하는 반복문 중 가장 간결하고 컴팩트한 형태입니다. 하나의 문장 안에 반복에 필요한 모든 요소를 담을 수 있어, 정해진 횟수만큼 코드를 실행할 때 널리 사용됩니다.

for 루프는 다음의 세 가지 핵심 요소로 구성됩니다.

1. 루프 초기화(Initialization)

카운터 변수를 시작 값으로 설정하는 부분입니다. 초기화 문은 루프가 시작되기 전에 딱 한 번만 실행됩니다.

2. 조건 검사(Test Statement)

주어진 조건이 참(true)인지 거짓(false)인지 판별하는 부분입니다. 조건이 참이면 루프 내부의 코드가 실행되고, 거짓이면 즉시 루프를 벗어나 그다음 코드로 제어가 넘어갑니다.

3. 증감문(Iteration Statement)

매 반복이 끝날 때마다 카운터 값을 증가시키거나 감소시키는 부분입니다. 이를 통해 루프가 언젠가 종료되도록 만들 수 있습니다.

이 세 가지 요소는 세미콜론(;)으로 구분하여 한 줄에 함께 작성합니다.

for 루프 기본 구문

JavaScript에서 for 루프의 기본 구문은 다음과 같습니다.

for(초기화; 조건 검사; 증감문){
    조건이 참일 때 실행할 문장
}

for 루프 예제

아래 예제를 직접 실행해 보면 JavaScript에서 for 루프가 어떻게 동작하는지 쉽게 이해할 수 있습니다.

<html>
    <body>
        <script>
            var count;
            document.write("Starting Loop" + "<br />");
            
            for(count = 0; count < 10; count++){
                document.write("Current Count : " + count);
                document.write("<br/>");
            }
            document.write("Loop stopped!");
        </script>
    </body>
</html>

실행 결과

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

예제 동작 원리 살펴보기

이 예제의 흐름은 다음과 같습니다.

먼저 count 변수가 0으로 초기화됩니다.
조건 count < 10이 참인 동안 루프 본문이 반복 실행되며, 현재 카운트 값이 화면에 출력됩니다.
매 반복마다 count++에 의해 카운터가 1씩 증가합니다.
count가 10이 되면 조건이 거짓이 되어 루프가 종료되고, 마지막에 "Loop stopped!"가 출력됩니다.

이처럼 for 루프는 초기화, 조건 검사, 증감이라는 세 단계를 한눈에 파악할 수 있어 반복 횟수가 명확한 작업을 처리할 때 특히 유용합니다.