자바스크립트 : 반복문

 

반복문

반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다.

---

while문

while문은 조건식의 값이 true일 경우, 계속해서 반복합니다. while문의 기본적인 형식은 다음과 같습니다.

초기 값
while (조건식) {
    실행문;
    증가감식;
}

do while문

do while문은 while문과 동작 방식이 동일하지만, do while문은 do를 먼저 실행하기 때문에 첫 번째 실행은 조건에 상관없이 실행한다는 차이가 있습니다. do wile문의 기본적인 형식은 다음과 같습니다.

초기 값
do {
    실행문;
    증가감식;
} while (조건식)

for문

for문은 while문과 달리, 정해진 횟수만큼 반복합니다. 따라서 반복해야 할 횟수를 알고 있을 때 주로 사용합니다. for문의 기본적인 형식은 다음과 같습니다.

for ( 초기값; 조건식; 증가감식; ) {
    실행문;
}

---

0부터 99까지 출력하기

for( let i=0; i<100; i++ ){
    document.write(i)
}

결과보기

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

1부터 100까지 출력하기

i의 초기값을 1로 지정해줄 수 있습니다.

for( let i=1; i<=100; i++ ){
    document.write(i)
}

결과보기

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

1부터 100까지 짝수만 출력하기

짝수로 출력할 때는 증가값을 2로 해주면 됩니다.

for( let i=2; i<=100; i+=2 ){     //i+=2 --> i=i+2
    document.write(i)
}

결과보기

2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100

1부터 100까지 5의 배수만 출력하기

i를 5로 나눈 나머지가 0인 조건문을 넣으면, 5의 배수만 출력할 수 있습니다.

for(let i=1; i<=100; i++){
    if (i % 5 == 0){
        document.write(i);
    }
}

결과보기

5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100

1부터 100까지 5의 배수, 7의 배수 출력하기

span 태그와 class를 이용하여 5의 배수는 빨간색, 7의 배수는 파란색으로 출력할 수도 있습니다.

for(let i=1; i<=100; i++){
    if (i % 5 == 0){
        document.write("<span style='color:blue'>"+ i +"</span>");
    }
    if (i % 7 == 0){
        document.write("<span style='color:red'>"+ i +"</span>");
    }
}

결과보기

5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100

7 14 21 28 35 42 49 56 63 70 77 84 91 98

구구단 출력하기

for문 안에 for문이 들어간 형태인, 중첩 for문을 이용해서 구구단을 출력할 수 있습니다.

for(let i=2; i<=9; i++){
        for(let j=1; j<=9; j++){
            let sum = i * j;
            document.write(i + " * " + j + " = " + sum);
            document.write("<br>");
        }
}

결과보기

2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
3 * 5 = 15
3 * 6 = 18
3 * 7 = 21
3 * 8 = 24
3 * 9 = 27
4 * 1 = 4
4 * 2 = 8
4 * 3 = 12
4 * 4 = 16
4 * 5 = 20
4 * 6 = 24
4 * 7 = 28
4 * 8 = 32
4 * 9 = 36
5 * 1 = 5
5 * 2 = 10
5 * 3 = 15
5 * 4 = 20
5 * 5 = 25
5 * 6 = 30
5 * 7 = 35
5 * 8 = 40
5 * 9 = 45
6 * 1 = 6
6 * 2 = 12
6 * 3 = 18
6 * 4 = 24
6 * 5 = 30
6 * 6 = 36
6 * 7 = 42
6 * 8 = 48
6 * 9 = 54
7 * 1 = 7
7 * 2 = 14
7 * 3 = 21
7 * 4 = 28
7 * 5 = 35
7 * 6 = 42
7 * 7 = 49
7 * 8 = 56
7 * 9 = 63
8 * 1 = 8
8 * 2 = 16
8 * 3 = 24
8 * 4 = 32
8 * 5 = 40
8 * 6 = 48
8 * 7 = 56
8 * 8 = 64
8 * 9 = 72
9 * 1 = 9
9 * 2 = 18
9 * 3 = 27
9 * 4 = 36
9 * 5 = 45
9 * 6 = 54
9 * 7 = 63
9 * 8 = 72
9 * 9 = 81

for문을 이용해서 100칸 table 출력하기

중첩 for문을 이용해서 table을 만들 수 있습니다.

let table = "<table class='testTable'>";

for(let i=0; i<=9; i++){          //for문으로 td태그가 10개 있는 tr태그 10개 만들기
    table += "<tr>";
    
    for(let j=1; j<=10; j++){     //for문으로 td태그 10개 만들기
        table += "<td>♥</td>"
    }
    
    table += "</tr>";
    }

table += "</table>";

document.write(table);

결과보기