Javascript 반복문

반복문

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

while문

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

기본형

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

적용 예제

<script>
    var i = 1;
    while(i <= 10) {    --- 1. 조건식 i<=10을 만족하면
        document.write("안녕하세요" + i, "<br/>");    --- 2. 중괄호의 코드를 실행합니다.
        i++;
    }
    document.write("===The End===");
</script>

while문의 조건식 i<=10을 만족(true)하면 중괄호의코드를 실행하고 변수 i의 값이 1만큼 증가됩니다.
while문은 i가 11이 될 때까지 실행합니다.

do while문

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

기본형

var 변수 = 초깃값;

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

먼저 중괄호 {...}에 있는 코드를 실행하고 조건식을 검사합니다.

적용 예제

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

중괄호에 있는 코드를 먼저 실행하고 조건식을 검사합니다.
변수 i에는 10이 저장되어 있으므로 두 수를 비교한 결과 false를 반환하여 do while문이 종료되고 hello!!가 출력됩니다.

for문

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

기본형

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

적용 예제

<script>
        초깃값   조건식   증감식
    for (var i = 1; i<=10; i++){
        document.write("반복" + i);   --- 중괄호의 코드가 10회 반복해서 실행됩니다.
    }
</script>

'반복1~반복10'까지 i를 1씩 증가하며 출력합니다.

• 변수 i에 초깃값 1을 저장합니다.
• 조건식을 만족할 경우 중괄호의 코드를 실행합니다.
• 증가 연산자로 변수 i의 값이 1만큼 증가됩니다.
• 다시 조건식의 만족 여부를 검사한 후 중괄호의 코드를 실행할지 아니면 종료할지 결정합니다.

break문

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

기본형 for문

for(초깃값; 조건식; 증감식){
    break; //반복문을 강제로 종료합니다.
    자바스크립트 코드;
}

기본형 while문

var 변수 = 초깃값;
while(조건식){
    break;  //반복문을 강제로 종료합니다.
    자바스크립트 코드;
    증감식;
}

적용 예제

<script>
    for(var i = 1; i<= 10; i++){
        if(i == 6) break;       --- i의 값이 6이면 break 문으로 종료합니다.
        document.write(i);
    }
    document.write("===The End===");
</script>

i가 10보다 작거나 같을 때까지 1씩 증가하며 코드를 반복합니다.
i의 값이 6일 경우 강제로 반복문을 종료합니다.

continue문

continue문은 반복문에서만 사용할 수 있습니다.
while문에 사용할 경우 continue문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 합니다.
for문에서 continue문을 실행할 경우에는 continue문 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증감 연산을 실행합니다.

기본형

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

적용 예제

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

i가 1부터 10까지 증가하며 코드가 실행되므로 10회 반복해서 실행합니다.
2의 배수이면 continue 문이 실행되어 홀수만 출력됩니다.

중첩 for문

for문 안에 for문을 사용한 것을 중첩 for문 이라고 합니다.
중첩 for문은 자바스크립트를 이용해 3행 5열의 표를 만든다고 할 때 1행씩 행이 만들어질 때마다 5개의 열을 만들어야 할 경우에 사용합니다.

기본형

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

적용 예제

<script>
    for(var i = 1; i<=3; i++){
        for(var j = 1; k <=2; j++;){
            document.write(i + "행" + j + "열");    --- 바깥쪽의 반복문이 1회 실행되면 안쪽의 반복문은 2회 실행됩니다.
        }
    }
</script>

바깥쪽의 for문은 i가 3이 될 때까지 코드를 반복해서 실행합니다.
안쪽의 for문은 j가 2가 될 때까지 코드를 반복해서 실행합니다.
즉, 바깥쪽의 for문이 1회 실행될 때마다 안쪽의 for문은 2회 실행되므로 코드가 총6회 실행됩니다.