반복문

    반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있습니다. 반복문에는 while문, do while문, for문, 중첩 for문이 있습니다.

while문

    while문은 조건식을 만족할 때까지 중괄호({...}) 안에 있는 코드를 반복하여 실행합니다. while문의 실행순서는 조건식을 검사하고, 만족하면 중괄호 안에 있는 코드와 증감식을 실행합니다. 그리고 다시 조건식을 검사합니다.

var 변수 = 초깃값;

while(조건식){
    자바스크립트 코드;
    증감식;
}

    다음은 while문을 사용하여 1부터 30까지의 숫자 중 2의 배수이면서 6의 배수인 숫자만 출력하는 예제입니다.

<script>
    var i = 1;
    while(i <= 30){
        if(i % 2 == 0 && i % 6 == 0) {
            document.write(i, "<br>");
        }
        i++;
    }
</script>

결과화면

6
12
18
24
30

do while문

    while문의 경우에는 조건식의 만족 여부를 먼저 검사한 후 중괄호에 있는 코드의 실행 여부를 결정했습니다. 하지만 do while문반드시 한 번은 코드를 실행하고 조건식을 검사합니다.

var 변수 = 초깃값;

do{
    자바스크립트 코드;
    증감식;
}while(조건식)

    다음은 do while문의 예제입니다. 중괄호에 있는 코드를 먼저 실행하고 조건식을 검사합니다.

<script>
    var i = 10;
    do {
        document.write("hello!!");
    } while (i < 3)
</script>

    중괄호({...})의 document.write("hello!!");를 먼저 실행한 다음 조건식 i < 3을 검사합니다. 변수 i에는 10이 저장되어 있으므로 두 수를 비교한 결과 false를 반환하여 do while문이 종료됩니다.


for문

    for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행합니다. 사용 방법은 while문과 같지만 while문보다 사용하기 편해 사용 빈도가 높은 편입니다.

for(초깃값; 조건식; 증감식){
    자바스크립트 코드;
}

<script>
    for(var = i; i <= 10; i++) {
        document.write("반복"+i, "<br>");
    }
</script>

결과화면

반복1
반복2
반복3
반복4
반복5
반복6
반복7
반복8
반복9
반복10

break문

    반복문인 while문 또는 for문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다. 즉, break문은 반복문을 강제로 종료할 때 사용합니다.

    다음은 for문과 while문에서 break문이 사용된 기본형입니다. break문이 코드보다 앞에 있으므로 코드는 실행되지 않고 for문과 while문이 바로 종료됩니다.

for(초깃값; 조건식; 증감식'){
    break;
    자바스크립트 코드;
}

var 변수 = 초깃값;
while(조건식){
    break;
    자바스크립트코드;
    증감식;
}

    다음은 for문을 이용하여 1부터 10까지 반복하도록 작성한 예제입니다. 그리고 break문을 사용하여 번수 i의 값이 6일 경우 강제로 반복문을 종료합니다.

<script>
    for(var i = 1; i <= 10; i++){
        if(i==6) break;
        document.write(i, "<br>");
    }
    document.write("===== The End =====");
</script>

결과화면

1
2
3
4
5
===== The End =====

continue문

    continue문은 반복문에서만 사용할 수 잇습니다. while문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 합니다. 즉, while문 안에 있는 continue문은 "다음에 오는 코드는 무시하고 조건식에서 조건 검사를 실행해!"라고 말하는 것이죠.

    for문에서 continue문을 실행한 경우에는 continue문 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증감 연산을 실행합니다. 즉, for문 안에 있는 continue문은 "다음에 오는 코드는 무시하고 증감식을 바로 실행해!"라고 말하는 것이죠.

for(초깃값;조건식;증감식){
    continue;
    자바스크립트 코드;
}

var 변수 = 초깃값;
while(조건식){
    증감식;
    continue;
    자바스크립트 코드
}

    다음은 for문을 이용해 1부터 10까지 i가 2의 배수일 경우에만 continue문을 실행하여 홀수만 출력하는 예제입니다.

<script>
    for(var i = 1; i <= 10; i++) {
        if (i % 2 == 0) continue;
        document.write(i, "<br>");
    }
    document.write("===== The End =====");
</script>

결과화면

1
3
5
7
9
===== The End =====

중첩 for문

    for문 안에 for문을 사용한 것을 중첩 for문이라 합니다.

for(초깃값; 조건식; 증감식){
    for(초깃값; 조건식; 증감식){
        자바스크립트 코드;
    }
}

    다음은 중첩 for문을 사용하여 '1행 1열'부터 '3행 2열'까지 출력하는 예제입니다. 바깥쪽 for문은 행만큼 증가하고 안쪽 for문은 열만큼 증가하면 됩니다.

<script>
    for(var i = 1; i <= 3; i++){
        for(var k = 1; k <=2; k++){
            document.write(i + "행" + k + "열", "<br>");
        }
        document.write("<br>");
    }
</script>

결과화면

1행1열
1행2열

2행1열
2행2열

3행1열
3행2열