5. 반복문

반복문은 일정 조건이 끝나기까지, 실행문을 끊임없이 반복하는 문법이다.

javascript에서는 세가지의 문법이 쓰이는데, for, while, do-while이 그것이다.

 

 

-for문

for문은 반복횟수를 알고 있을 경우 주로 사용한다.

for(초기문;조건문;반복 후 증감문){

작업문

}

의 형태를 가진다.

매커니즘은 다음과 같다

초기문을 조건문에 대입 -> 참일 경우 작업문 수행 ->작업문을 수행 후 증감문을 이용해 초기문에 변화 -> 변화된 초기문을 조건문에 대입 -> 참일 경우 작업문 수행.. 을, 증감문을 이용해 변화된 초기값이, 조건문에 대입했을때 거짓이 될 때까지 반복한다. 

다음이 for 예시문이다.

        var sum=0;
        for(var i=1;i<11;i++){
            sum=sum+i;
        }
        document.writeln("sum : "+sum);

매커니즘을 자세히 살펴보면, 초기값 i=1은 조건문 i<11에 충족하므로, 실행문으로 내려간다

실행문에서 0+1=1을 충족하고, 다시 증감문으로 올라와 i++=2의 값을 부여받는다.

i=2는 여전히 i<11의 값을 충족하므로 다시 실행문으로 내려와 1+2=3의 값을 부여받고, 다시 증감문으로 올라가서 i++=3으로 올라간다. 이를

i++=11이 되어 i<11이 거짓이 될 때까지 반복하게 된다. for문이 거짓이 되게 되면, for문을 벗어나 다음 출력문을 통해 sum값이 나타나게 된다.

반복문은 수리적 값 뿐만 아니라 다른 코드도 반복될 수 있다.

 

for문 내부에 if문을 포함 시키는 것도 가능하다.

        sum=0;
        for(i=1;i<=20;i++){
            if(i%3==0){
                if(i!=18) document.writeln(i+"+");
                else document.writeln(i+"=");
                sum+=i;
            }
        }
        document.writeln(sum+"<br>");

 

-for문 응용

for문을 이용해서 점점 커지는 텍스트를 만들 수 있다.

        for(var size=10; size<=35; size+=5){
            document.writeln("<p style='font-size:"+size+"px'>");
            document.writeln(size+"px</p>");
         }

for문에 의해 증감이 일어나는 부분은 첫번째 실행문이다. 

font-size 내부에 증감이 일어나는 수를 기입함으로써, for문이 루프할수록 숫자가 커지게 되는데, 이 결과 점점 커지는 숫자가 만들어진다.

두번째 줄에는 단순히 이 폰트가 몇 픽셀인지 알려주는 시각적 효과일 뿐이다.

 

 

-중첩 for문

for문은 중첩해서도 진행할 수 있다.

        for(i=1;i<3;i++){
            for(j=1;j<4;j++){
                document.writeln("i : "+i+" j : "+j+"<br>");
            }//for2
            document.writeln("<br>");
        }//for1

이 경우에는, for1문에서 내려온 초기값이 for2문을 지남 -> for2문에서 반복이 끝나고, 다시 for1문으로 올라감 -> for1에서 증감된 값이 다시 for2문을 지남 -> for2문에서 반복이 끝남 -> 

이 과정이 반복된다.

따라서 이 값의 결과물은.

다음과 같이 나타난다. 

들어간 i값이 두번째 for문에서, j값이 세번 돌고 다시 나와 i=2가 되서 다시 j값 내에서 세번을 돌아 다음과 같이 나오게 된다.

 

 

- while문

while문은 반복횟수를 모르는 경우 주로 사용한다.

for문과 while문의 차이는, for문은 for문의 조건 내부에 초기값과 증감식이 있지만 while문 같은 경우, 초기값을 외부에서 지정하고, 증감식을 실행문장에서 해결하는 특징이 있다. 따라서 while문은 실행식을 진행하며 커진 값을 while문의 조건과 비교하여 실행할지, 벗어날지 결정한다.

        var n=prompt("0보다 큰 정수를 입력하세요.","1");
        n =parseInt(n);//문자열을 정수로 변경
        var i=0; sum=0;
        while(i<=n){
            sum+=i;
            i++;
        }        
        document.writeln("0에서 "+n+"까지의 합은 "+sum);

코드에서 알 수 있다시피, 초기값은 외부에서, 증감식은 실행식 내에서 진행되었음을 볼 수 있다.

 

 

 

-do-while문

while문과 do-while 문의 큰 차이점은,

while문은 초기값 선언-> 조건식에서 초기값 확인-> 실행의 순서지만,

do-while문은 초기값 선언-> 실행 -> 조건식 확인의 순서로 매커니즘이 돌아간다.

그렇기 때문에 while문은 초기값을 지정해도 조건식에서 걸리면 실행이 단 한번도 되지 않지만, do-while문은 조건이 충족하지 않아도 한번은 실행이 된다.

        sum=0;
        i=1;
        do{
            sum+=i;
            i++;
        }while(i<11);
        document.writeln("sum: "+sum)

코드를 보면, 조건식이 마지막에 주어져있는 것을 볼 수 있다.

 

 

 

-break문

앞서 조건문에서 보았던 switch 문에 있던 문구와 같은 문구이다. 즉시 반복문을 벗어나게 해준다. 그러나, 중첩문이 여러게 겹쳐있을 경우, break가 선언된 중첩문만 빠져나간다.

 

이것은 1에서 얼마만큼 더해야 3000이 넘는가, 에 대한 예시문구이다.

우선 break문이 없을 경우, if문만을 통해 결과를 도출해낸 경우이다.

        sum=0;
        flag=true;
        for(i=0;flag;i++){
            sum+=i;
            if(sum>3000){
                flag=false;
                document.writeln("i : "+i+"<br>");
            }
        }
        document.writeln("sum : "+sum);

다음의 경우는, if문에서 강제로 flag변수의 값을 false로 변환하여 if문을 거짓으로 만들고, 다름 루프를 돌지 않게 하는 방법이다. 이를 break문을 이용해서 고쳐보면,

        sum=0;
        for(i=1;true;i++){
            sum+=i;
            if(sum>3000){
                document.writeln("i :"+i+"<br>");
                break;
            }
        }

flag변수를 따로 지정할 필요 없이, break 문으로 간단하게 if문을 벗어날 수 있다. 단, if문만 벗어나지고, for문은 벗어나지 않는다.

 

 

 

-continue문

continue문을 만나면, 문장이 즉시 중지된다.

for문의 경우 즉시 증감식으로, while과 do-while은 조건식으로 돌아가게 된다.

 

다음은 1~10까지 3으로 나눈 나머지가 1인 수만 더하는 코드이다.

continue를 사용하지 않고 코딩하면,

        var sum=0;
        for(i=1;i<=10;i++){
           if(i%3==1){
                 sum+=i;
            }
        }
        document.writeln("sum : "+sum);

다음과 같이 if문에서 나머지가 1인 값만을 골라서 더하는 방식을 취하게 된다. 

continue문을 이용하면,

        var sum=0;
        for(var i=1;i<11;i++){
            if(i%3!=1){
                continue;
            }
            sum+=i;
        }
        document.writeln("sum : "+sum);    

다음은, sum값은 모든 수를 다 더한다. 그러나, for문에서 내려온 값이 if문을 만나고, 나머지가 1이 아닐 경우, continue문을 만나 다시 for의 증감식으로 올라가게 되고, 이 과정으로 인해 나머지가 1인 수만 if문의 거짓으로 인해 조건문을 통과해 sum함수와 마주하게 된다.