JAVASCRIPT | 반복문이란?

반복문

반복문은 프로그램에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문입니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다.

---

while 문

while 문은 조건식의 결과가 참인 동안 반복적으로 주어진 명령문을 실행합니다.

1. 형식

초기 값

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

2. 예제

let num = 1;
            
while(num<=5){
    document.write("실행되었습니다.");
    num++;
}

결과보기

실행되었습니다.실행되었습니다.실행되었습니다.실행되었습니다.실행되었습니다.

---

do while문

while 문은 루프에 진입하기 전 조건식부터 검사하는 반면, do while 문은 조건식이 참인지 거짓인지에 상관없이 무조건 한 번은 실행한 후에 조건식을 검사합니다.

1. 형식

초기 값

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

2. 예제

let num = 1;

do {
    document.write("실행되었습니다.");
    num++;
} while (num<=5);

결과보기

실행되었습니다.실행되었습니다.실행되었습니다.실행되었습니다.실행되었습니다.

---

for문

for 문은 초기식, 조건식, 증감식 전부를 포함하고 있는 반복문입니다.

1. 형식

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

2. 예제

01. 0부터 99까지 출력하기

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

결과보기

012345678910111213141516171819202122232425262728293031323334353637383940 414243444546474849505152535455565758596061626364656667686970717273747576 7778798081828384858687888990919293949596979899

02. 1부터 100까지 출력하기

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

결과보기

12345678910111213141516171819202122232425262728293031323334353637383940 414243444546474849505152535455565758596061626364656667686970717273747576 7778798081828384858687888990919293949596979899100

03. 1부터 100까지 출력하기(짝수)

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

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

결과보기

246810121416182022242628303234363840424446485052545658606264666870727476 7880828486889092949698100

04. 1부터 100까지 출력하기(5의 배수)

% 를 사용하여 5로 나눴을 때 나머지 값이 0이 되는 수를 찾아줍니다.

for(let i=1; i<=100; i++){
    if(i%5==0){                     //5로 나눴을 때 나머지 0
        document.write(i);
    }
}

결과 확인하기

5101520253035404550556065707580859095100

05. 5의 배수, 7의 배수 출력하기

위의 예제와 같이 나머지 값으로 구해줍니다. (5의 배수는 빨간색, 7의 배수는 파란색)

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

결과 확인하기

5710141520212528303535404245495055566063657070757780848590919598100

06. 1부터 100까지 출력하기 : 조건부 연산자

(짝수는 빨간색, 홀수는 파란색 span 사용해서 색을 넣어줍니다.)

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

결과 확인하기

12345678910111213141516171819202122232425262728293031323334353637383940 414243444546474849505152535455565758596061626364656667686970717273747576 7778798081828384858687888990919293949596979899100

07. 구구단 출력하기

for문 안에 또 다른 for문을 이용하여 구구단을 출력합니다.

// for문을 이용해서 구구단 출력하기

// (2, 3, 4, 5, 6, 7, 8, 9) i 8번 반복
// (1, 2, 3, 4, 5, 6, 7, 8, 9) j 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);
        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

08. 테이블 출력하기

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

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

for(let i=1; i<=10; i++){   //줄
    table += "<tr>";

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

    table += "</tr>";
}
table += "</table>";

document.write(table);

결과 확인하기