while문

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

while (조건) {
    반복해서 실행할 코드
}

while를 보고 반복할 마음의 준비를 한 다음

조건을 봐서 조건이 true면 코드를 실행하고 다시 조건을 봄

무한루프를 피하기 위해 true값이 적당한 시점에 false로 바뀌어야함

​

var i = 0;
// 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.
while (i < 10) {
    // 반복이 실행될 때마다 coding everybody <br />이 출력된다. 
    document.write('coding everybody' + i + '<br />');
    // i의 값이 1씩 증가한다.
    i = i + 1;
}

for문

for (초기화; 반복조건; 반복이 될 때마다 실행되는 코드) {
    반복해서 실행될 코드
}

초기화

반복조건

반복해서 실행될 코드

반복이 될 때마다 실행되는 코드

반복조건

반복해서 실행될 코드

반복이 될 때마다 실행되는 코드

​

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

​

i++와 ++i 차이

​

var i = 0;

alert(i++) // alert(i)가 기존값 사용하고선 i값 증가되므로 0

alert(++i) // alert(i)가 사용할때 i값 증가시키므로 1

​

break(반복문 종료)

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

종료조건에 따르면 10행이 출력돼야 하는데 5행만 출력되었다. 2행의 if(i === 5) 에 의해서 i의 값이 5일 때 break 문이 실행되면서 반복문이 완전히 종료된 것이다. 반복문 안에서 break가 실행되면 반복문을 즉시 종료시키는 것이다.

continue(그 순간만 종료)

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

결과는 아래와 같다. 숫자 5가 보이지 않는다. 왜 그럴까? i의 값이 5가 되었을 때 실행이 중단 됐기 때문에 continue 이후의 구문이 실행되지 않은 것이다. 하지만 반복문은 중단되지 않았기 때문에 나머지 결과가 출력된 것이다.

반복문의 중첩

// 0부터 9까지 변수 i에 순차적으로 값을 할당        
for (var i = 0; i < 10; i++) {
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for (var j = 0; j < 10; j++) {
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i) + String(j) + '<br />');
    }
}

디버거

브레이크 포인트 잡고 f5누르고 확인가능 화살표기능