JavaScript 반복문

1. JavaScript 반복문
1.1 반복문
: 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다.

1.2 반복문의 문법
: 반복문의 문법은 while문과 for문이 있다. 각각의 구문은 서로 대체 가능하기 때문에 상황과 취향에 따라서 선택해서 사용하면 된다.

1.2.1 while문
: while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다. 조건이 false면 반복문이 실행되지 않는다. 여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다. 반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.

<script type="text/javascript">
    var i = 0;
    while(i < 10) {
        document.write('coding everybody' +i+ '<br />');
        i = i + 1;
    }
</script>

결과

: while문은 조건이 참(true)이면 무한대로 반복시켜주는 구문이다. while문의 조건식을 i가 10보다 작을때까지를 true, i가 10이상이 되면, false로 걸어주었기 때문에 반복문이 0~9까지 총 10번 반복하고 종료하게 된것이다.

1.2.2 for문
: for문은 제일 먼저 '초기화'를 한다. 즉 변수의 값을 0으로 설정한 것이다. 그 다음에는 반복문의 조건이 실행된다. 반복조건이 참이면 중괄호 안의 내용이 실행된다. '반복해서 실행될 코드'의 실행이 끝나면 '반복이 될 때마다 실행되는 코드'가 실행된다.

<script type="text/javascript">
    for(var i=0; i<10; i++) {
        document.write('coding everybody' +i+ '<br />');
    }
</script>

결과

: 위의 예제에서 초기화는 var i=0;이다. 즉 변수 i의 값을 0으로 설정한 것이다. 그 다음에는 '반복조건'인 i<10이 실행된다. 현재 i의 값은 0이다. 그렇기 때문에 이 조건은 참이다. 반복조건이 참이면 중괄호 안의 내용이 실행된다. i의 값이 0이기 때문에 'coding everybody0<br />'이라는 텍스트가 출력된다. '반복해서 실행될 코드'의 실행이 끝나면 '반복이 될 때마다 실행되는 코드'가 실행된다. i++는 현재 i의 값에 1을 더하라는 의미이다. 현재 i의 값은 0이다. 따라서 i++의 결과로 i는 1이 되었다. 그리고 '반복조건'이 실행된다. 현재 i의 값은 1이기 때문에 i<10은 참이다. 다시 '반복해서 실행될 코드'가 실행된다. 그렇게 반복해서 작업이 실행된다. 이 과정에서 i의 값은 반복 할 때마다 1씩 증가한다. 결국 i의 값이 10이 되는 순간 i<10을 충족시키지 못하게 되고 반복문은 종료된 것이다.
* i++ : 기존의 i값을 사용하고 1을 증가시킨다.
++i : i의 값을 1 증가시키고, 증가된 i값을 사용한다.

1.3 반복문의 제어
1.3.1 break

<script type="text/javascript">
    for(var i=0; i<10; i++) {
        if(i===5){
            break;
        }
        document.write('coding everybody' +i+ '<br />');
    }
</script>

결과

: i는 0부터 10보다 작을때까지 반복하는 반복문 안에서 i가 5일때 실행되는 조건문을 이용하여 break를 만나게하면 반복문을 즉시 종료시키게 된다. 그렇기 때문에 i가 5일때는 반복문을 탈출하게 되어 i가 4일때 까지만 반복하게 된 것이다.

1.3.2 continue

<script type="text/javascript">
    for(var i=0; i<10; i++) {
        if(i===5){
            continue;
        }
        document.write('coding everybody' +i+ '<br />');
    }
</script>

결과

: continue는 실행을 즉시 중단하면서 반복은 지속돼게 한다. 그렇기 때문에 i가 0~4일때까지 출력이 되고, i가 5일때는 중단 되었다가 다시 i가 6부터 반복문이 실행되어 위와 같은 결과가 나타난다.

1.4 반복문의 중첩
: 반복문 안에는 다시 반복문이 나타날 수 있다.

<script type="text/javascript">
    for(var i=0; i<3; i++) {
        for(var j=0; j<3; j++){
            document.write('coding everybody ' +i+' '+j+ '<br />')
        }
    }
</script>

결과

: i가 0부터 2까지 반복되는 반복문 안에 j가 0부터 2까지 반복되는 반복문을 추가해주게 되면, i가 0일때 j가 0부터 2까지 반복하게 되고, 다시 i가 1일때 j가 0부터 2까지 반복하게 되고, 이런식으로 반복하여 위와 같은 결과를 얻을 수 있다.