[JavaScript] 반복문 사용법과 활용예시

반복문

프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 여러번 반복시킬 때 사용하는 문법입니다. while문, do while문, for문 등이 있지만 for문이 가장 많이 쓰입니다.

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

---

01. while문

조건식이 true일 경우에 계속해서 반복하는 반복문입니다.

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

var n = 1;
var sum = 0;
while(n < 8) {
    sum += n;
    n++;
}
console.log(sum);

결과 보기

28

02. do while문

조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while문과 같지만 무조건 중괄호{ } 안의 실행문을 실행한 후 조건을 검사하여 반복을 결정합니다.

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

var n = 1;
var sum = 0;
do {
    sum += n;
    n++;
} while (n < 8);
console.log(sum);

// do while문은 do를 먼저 실행하기 때문에 첫 번째 실행은 조건에 상관없이 실행.

var n = 10;
do {
    n++;
} while (n < 8);
console.log(n);

결과 보기

28
11

03. for문 : 짝수 출력

짝수만 출력할 때는 let i = 2로 지정합니다. (2에서 2씩 더하면 4, 6, 8, 10, …)

// i+=2 는 i = i + 2 를 의미함

for(let i = 2; i <= 100; 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

04. for문 : 홀수 출력

홀수만 출력할 때는 let i = 1로 지정합니다. (1에서 2씩 더하면 3, 5, 7, 9, …)

// i+=2 는 i = i + 2 를 의미함

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

결과 보기

1
3
5
7
9
11
13
15
17
19
21
23
25
27
29
31
33
35
37
39
41
43
45
47
49
51
53
55
57
59
61
63
65
67
69
71
73
75
77
79
81
83
85
87
89
91
93
95
97
99

05. for문 : 0부터 99까지 출력

let i 값을 0부터 시작하여 100보다 작을 때까지 반복

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

06. for문 : 1부터 100까지 출력

let i 값을 1부터 시작하여 100보다 작거나 같을 때까지 반복

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

07. for문 : 1부터 100까지 출력(짝수)

let i 값을 2부터 시작하여 2씩 더해줌으로써 1부터 100까지의 짝수가 출력된다.

// i+=2 는 i = i + 2 를 의미함

for(let i = 2; i <= 100; 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

08. for문 : 1부터 100까지 출력(5의 배수)

%를 통해 아래와 같이 나머지를 구하여 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

09. for문 : 구구단 출력하기

for문을 중첩시켜 구구단을 출력할 수 있습니다.
첫 번째 for문의 i에 2부터 9까지를, 두 번째 for문의 j에는 1부터 9까지를 반복시킨 다음
그 i와 j를 곱한 값을 sum에 저장시키고 최종적으로 아래 예시와 같이 document.write를 통해 구구단을 출력시킵니다.

/* 
(2, 3, 4, 5, 6, 7, 8, 9) - 8번 반복
(1, 2, 3, 4, 5, 6, 7, 8, 9) - 9번 반복

i * j = sum

2 * 1 = 2       3 * 1 = 3       4 * 1 = 4
2 * 2 = 4       
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18
*/

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

결과 보기

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

10. 1부터 100까지 출력 (5의 배수 빨간색, 7의 배수 파란색)

이런 식으로 5의 배수는 빨간색으로, 7의 배수는 파란색으로 출력 가능합니다.

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

결과 보기

5
7
10
14
15
20
21
25
28
30
35
35
40
42
45
49
50
55
56
60
63
65
70
70
75
77
80
84
85
90
91
95
98
100

11. for문을 이용하여 테이블 출력

중첩 for문을 이용하여 테이블을 만들 수 있습니다.

let table = "<table>";
            
    for(let i = 0; i < 10; i++){
        table += "<tr>";

        for(let j = 0; j < 10; j++){
            table += "<td>안녕</td>"
        }

    table += "</tr>";
    }

    table += "</table>";

document.write(i);

결과 확인하기

12. for문을 이용하여 테이블 출력 (1~100)

중첩 for문을 이용하여 테이블을 만들 수 있습니다. 1부터 100까지 출력합니다.

let table = "<table class='testTable'>";
let s = 0;
            
//1~100까지 표로 나오게 하기
for(let i = 1; i <= 10; i++) {
    table += "<tr>"

    for(let j = 1; j <= 10; j++) {
        s++
        table += "<td>"+s+"</td>";
    }

    table += "</tr>";
}

table += "</table>";

document.write(table);

결과 확인하기