반복문

 

말 그대로 코드를 반복하기 위해 사용하는 문법들을 말합니다.

 

예시로 "안녕하세요"라는 문구를 출력하는 것을 100번 작성한다고 생각해봅시다.

한줄씩 "안녕하세요"를 출력문을 계속 100번 쓰는 것은 비효율적입니다.

코드만 길어지고 더러워지기 때문에 이러한 경우에 반복문을 사용하여 코드를 간결하게 할 수 있습니다.

 

반복문의 종류로는 while문, do~while문, for문이 있습니다.

 

while 문

 

while문은 조건식을 만족할 때까지 코드를 여러번 반복하여 실행할 수 있습니다.

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

 

while문의 기본 형태 예시이며, while문의 실행순서를 예시를 들어보겠습니다.

while문 괄호 안의 조건식을 판별하고, 조건이 맞다면 중괄호 안에 있는 자바스크립트를 수행합니다.

그리고 증감식으로 조건식의 값을 증가시키거나 감소시킵니다.

또 다시 증가 혹은 감소된 값이 조건식으로 판별하여 조건이 맞다면 중괄호에 있는 자바스크립트 코드를 실행합니다.

이것을 계속 반복한 후, 조건식을 벗어날 때 while문이 종료됩니다.

 

while문의 예시 코드를 보며, 조금 더 이해해봅시다.

while문 실습 (1)

 

while문을 사용하여 안녕하세요 뒤에 숫자를 1씩 증가시킨 값을 10번 출력하는 실습 예제입니다.

안녕하세요1부터 안녕하세요10까지 1씩 증가하여 10번 출력하는 것을 뜻합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 : while</title>
</head>
<body>
    <h3>반복문 : while</h3>
    <script>
        let i = 1;

        // i 변수가 1에서 10까지 true일 때만 안에 코드가 동작된다.
        // i 변수가 11이 되면 false가 되어, while문을 빠져나온다.

        while(i <= 10){
            document.write("안녕하세요" + i, "<br>");
            i++;
        }

        document.write("프로그램 종료");
    </script>
</body>
</html>
while문 예제 (2)

 

1부터 30까지의 숫자 중 2의 배수이면서 6의 배수인 숫자를 출력하는 예제입니다.

일단 while문으로 30까지 조건식을 설정한 후, if문으로 2의 배수와 6의 배수를 if문으로 판별하면 됩니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 : while</title>
</head>
<body>
    <h3>반복문 : while</h3>
    <script>
        // 1~30 범위의 값에서 2의 배수이면서, 6의 배수인 숫자만 출력하는 예제.
        
        let i = 1;
        
        // i 변수가 1에서 30까지 true일 때만 안에 코드가 동작된다.
        // i 변수가 31이 되면 false가 되어, while문을 빠져나온다.

        while(i <= 30){
            // 2의 배수 && 6이 배수 숫자 조건
            if(i % 2 == 0 && i % 6 == 0){
                document.write(i, "<br>");
            }

            i++;
        }

        document.write("프로그램 종료");
    </script>
</body>
</html>
while문 예제(3-1) : 오름차순

 

20부터 10까지의 숫자 중에서 짝수일 경우에는 파란색으로 출력하고,

홀수일 경우에는 빨간색으로 출력되도록 작성하는 실습을 해봅시다.

 

우선 변수를 20으로 설정한 후, while의 조건식을 10까지로 설정합니다.

if문으로 짝수(변수의 나머지가 0일 때)일 경우에는 파란색으로 출력합니다.

아닐 시에는 빨간색으로 출력합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while문</title>
    <style>
        *{
            margin : 0;
        }

        .blue{
            color : blue;
        }

        .red{
            color : red;
        }
    </style>
</head>
<body>
    <p>오름차순으로 10~20 범위의 숫자 중 짝수는 파랑색으로 출력, 홀수는 빨강색으로 출력</p><br>
    <script>
        let i = 10;

        while(i <= 20){
            if(i % 2 == 0){
                document.write("<p class = 'blue'>" + i + "</p>"); // 짝수
            }else{
                document.write("<p class = 'red'>" + i + "</p>"); // 홀수
            }
            i++;
        }
    </script>
</body>
</html>

 

while문 예제(3-2) : 내림차순

 

 

3-1과 다르게 내림차순으로 출력해봅시다.

 

10부터 20까지의 숫자 중에서 짝수일 경우에는 파란색으로 출력하고,

홀수일 경우에는 빨간색으로 출력되도록 작성하는 실습을 해봅시다.

 

우선 변수를 10으로 설정한 후, while의 조건식을 20까지로 설정합니다.

if문으로 짝수(변수의 나머지가 0일 때)일 경우에는 파란색으로 출력합니다.

아닐 시에는 빨간색으로 출력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while문</title>
    <style>
        *{
            margin : 0;
        }

        .blue{
            color : blue;
        }

        .red{
            color : red;
        }
    </style>
</head>
<body>
    <p>내림차순으로 10~20 범위의 숫자 중 짝수는 파랑색으로 출력, 홀수는 빨강색으로 출력</p><br>
    <script>
        let i = 20;

        while(i >= 10){
            if(i % 2 == 0){
                document.write("<p class = 'blue'>" + i + "</p>"); // 짝수
            }else{
                document.write("<p class = 'red'>" + i + "</p>"); // 홀수
            }
            i--;
        }
    </script>
</body>
</html>

 

 

do while 문

 

위에서 사용한 while문의 경우에는 조건식이 만족하는지 먼저 확인합니다.

그 다음 중괄호에 있는 코드를 실행하는 반복문이었습니다.

 

하지만, do while문은 조금 다릅니다.

반드시 do 중괄호에 있는 코드는 무조건 한 번은 실행하고, while에 있는 조건식을 검사합니다.

 

var 변수 = 초기값;

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

 

do~while문 예제

 

do 안의 중괄호 코드를 실행하고, 조건식(i < 3)을 판별합니다.

변수 i는 10이 저장되어 있기 때문에 i < 3을 검사했을 때 10 < 3을 비교하기 때문에, 판별 결과는 false입니다.

따라서 do while문이 종료되고, "hello!"는 한번만 출력됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 : do ~ while문</title>
</head>
<body>
    <h3>반복문 : do ~ while문</h3>
    <script>
        let i = 10;
        
        // 아래 while문이 true, false와 상관없이 최소 1번은 실행이 된다.
        do{
            document.write("hello!", "<br>");
        }while(i < 3)
    </script>
</body>
</html>

 

for 문

 

for문은 조건식을 만족할 때까지 특정 코드를 반복하며 실행하는 반복문입니다.

사용 방법은 while문과 같지만 while문과 다르게 초기값, 조건식, 증감식을 한줄에 표현할 수 있는 장점이 있습니다.

그래서 while문보다 사용하기 편해서 사용 빈도가 높은 편입니다.

 

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

 

for문 예시 (1)

 

for문을 사용하여 반복1부터 반복10까지 i를 1씩 증가시키며 출력하는 예제입니다.

 

i를 1로 초기값을 설정하고, 조건식으로 i를 10 이하까지(i <= 10) 설정합니다.

그리고 증감식으로 1씩 증가시킵니다. (i++)

중괄호 안에는 반복 + i를 출력하는 코드를 "반복1"부터 "반복10"까지 반복하여 출력합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 : for문</title>
</head>
<body>
    <h3>반복문 : for문</h3>
    <script>
        /*
            1. 초기값 2. 조건식 3. 실행문 4. 증감식 
            for(초기값; 조건식; 증감식){
                실행문;
            }
        */
       for(let i = 0; i <= 10; i++){
            document.write("반복" + i, "<br>");
       }
    </script>
</body>
</html>

 

for문 예제 (2)

 

for문을 이용하여 1부터 100까지 i를 증가하는 반복문을 실행합니다.

 

i가 5의 배수일 경우(i % 5 == 0)에 빨간색 글자로 i를 출력합니다.

i가 7의 배수일 경우(i % 7 == 0)에는 초록색 글자로 i를 출력합니다.

 

그리고 i가 5의 배수이며 7의 배수일 경우(i % 7 == 0 && i % 5 == 0)에는 아쿠아색 글자로 i를 출력합니다.

위의 조건을 판별하기 위해 5의 배수는 7의 배수는 아니어야 하기 때문에 i % 7 != 0 조건을 추가하고,

7의 배수는 5의 배수가 아니어야 하기 때문에 i % 5 != 0 조건을 추가해야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 : for문</title>
</head>
<body>
    <h3>반복문 : for문</h3>
    <script>
       for(let i = 0; i <= 100; i++){
       		if(i % 5 == 0 && i % 7 != 0){
            	document.write("<p class = 'red'" + i, "</p>");
            }else if(i % 7 == 0 && i % 5 != 0){
            	document.write("<p class = 'green'" + i, "</p>");
            }else if(i % 7 == 0 && i % 5 == 0){
            	document.write("<p class = 'aqua'" + i, "</p>");
            }
       }
    </script>
</body>
</html>

 

중첩 for 문

 

말 그대로 for문 안에 또 for문을 사용한 것을 중첩 for문이라고 합니다.

예를 들어 자바스크립트를 이용하여 3행 5열의 표를 만든다고 생각해봅시다.

중첩 for문을 사용하여 외부 for문은 1에서 3까지 실행하고, 내부 for문은 1에서 5까지 실행합니다.

이런 식으로 for문을 실행하면 1행씩 행이 만들어지면 5개의 열이 만들어집니다.

 

for(초기값; 조건식; 증감식){ // 외부 for문
	for(초기값; 조건식; 증감식){ // 내부 for문
		자바스크립트 코드;
	}
}

 

 

중첩 for문 예시 (1) - 3행 2열

 

중첩 for문을 사용하여 1행 1열부터 3행 2열까지 출력하는 실습 예제를 해봅시다.

외부 for문은 행을 증가시키며, 내부 for문은 열을 증가시킵니다.

따라서 외부 for문은 3까지 증가시키고, 내부 for문은 2까지 증가시켜서 3행 2열을 출력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(let i = 1; i <= 3; i++){ // 외부 for문 3행
            for(let j = 1; j <= 2; j++){ // 내부 for문 2열
                document.write(i + "행" + k + "열", "<br>");
            }
            document.write("<br>");
        }
    </script>
</body>
</html>

 

중첩 for문 예시 - 구구단

 

중첩 for문을 사용하여 구구단을 출력해봅시다.

 

외부 for문은 곱을, 내부 for문은 단을 증가시킵니다.

외부 for문은 곱을 뜻하기 때문에 1부터 9을, 내부 for문은 단을 뜻하기 때문에 2부터 9까지 증가합니다.

출력할 때는 내부 for문(단)에서 사용한 변수 j를 외부 for문(곱) 곱하여 곱한 값(j * i)을 출력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>중첩 for문을 이용한 구구단 예제</title>
</head>
<body>
    <h3>중첩 for문을 이용한 구구단 예제</h3>

    <script>
        // i 변수가 곱
        // j 변수가 단

        // 첫번째 for문이 곱
        // 두번째 for문이 단
        document.write("<table border = '1'>");
        for(let i = 0; i <= 9; i++){
            document.write("<tr>");
            for(let j = 2; j <= 9; j++){
                document.write("<td>");
                if(i == 0){
                    document.write(j + "단"); // 제목행 
                }else{
                    document.write(j + "*" + i + " = " + i*j); //데이터행
                }
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
        // https://hianna.tistory.com/368 별찍기 참고하여 분석 및 실습하자.
    </script>
</body>
</html>

 

break 문

 

반복문인 while문 또는 for문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문이 종료됩니다.

따라서 break문은 강제로 반복문을 종료하기 위해서 사용합니다.

break문을 사용하면 그 뒤에 코드는 생략하고 바로 종료됩니다.

 

 

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

 

 

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

 

break문 예제

 

우선 for문을 사용하여 1부터 10까지 증가시키며 반복합니다.

if문을 사용하여 만약 변수 i의 값이 6일 경우에는 강제로 break문을 사용하여 반복문을 종료하는 예제를 실습해봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>break문</title>
</head>
<body>
    <h3>break문</h3>
    <script>
        for(let i = 1; i <= 10; i++){
            if(i == 6){
                break; // for문을 빠져나온다.
            }
            document.write(i, "<br>");
        }

        document.write("프로그램 종료");
    </script>
</body>
</html>

 

continue 문

 

while문에 continue문을 사용하면 그 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건을 검사합니다.

즉, 다음에 오는 코드는 무시하고 조건식을 판별하라는 뜻입니다.

 

for문에서 continue문을 사용하면 그 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증가하거나 감소시킵니다.

즉, 다음에 오는 코드는 무시하고 증감식을 바로 실행하는 것을 말합니다.

 

continue문은 반복문에서만 사용할 수 있습니다.

 

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

 

 

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

 

continue문 예제

 

다음 예제는 for문을 이용하여 1부터 10까지 반복합니다.

i가 2의 배수일 경우(i % 2 == 0)에만 continue문을 실행하여 홀수만 출력하고자 하는 코드입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Continue문</title>
</head>
<body>
    <h3>Continue문</h3>
    <p>1~10 범위의 숫자 중 짝수만 출력에서 제외한다.</p>
    <script>
        for(let i = 0; i <= 10; i++){
            if(i % 2 == 0){ //2의 배수만 제외하고 출력
                continue; // break문처럼 for문을 종료하는 것이 아니라, i++ 코드로 제어가 진행된다
            }
            document.write(i + "<br>");
        }
    </script>
</body>
</html>
저작자표시 비영리 변경금지

'Devlopment > JavaScript & jQuery' 카테고리의 다른 글

[JavaScript] 함수  (0) 2024.01.28
[JavaScript] 객체(Object)  (0) 2024.01.28
[JavaScript] 제어문 (2) - 선택문 switch문  (0) 2024.01.28
[JavaScript] 제어문 (1) - 조건문(if, else, else if, 중첩 if)  (1) 2024.01.28
[JavaScript] JavaScript 시작하기 (4) - 연산자  (0) 2024.01.17

티스토리툴바