[JavaScript] The Modern JavaScript Tutorial - (2-13) Loops: while and for

'while' 반복문

while (condition) {
    // 반복문의 body
}

condition이 truthy라면 반복문 body가 실행된다.

let i = 0;
while (i < 3) {
    alert(i);
    i++;
}

반복문 body가 한 번 실행되는 걸 반복(iteration)이라고 한다. 위 예시에서는 세 번의 iteration을 만든다.

let i = 3;
while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춘다.
    alert(i);
    i--;
}

 

'do...while' 반복문

do {
    // 반복문 본문
} while (condition);

body가 먼저 실행되고, 조건을 확인한 후 조건이 truthy인 동안에 body가 계속 실행된다.

조건이 truthy인지 아닌지에 상관없이, 본문을 최소한 한번이라도 실행하고 싶을 때만 사용해야 한다.

let i = 0;
do {
    alert(i);
    i++;
} while (i < 3);

 

'for' 반복문

for (begin; condition; step) {
    // body
}

for (let i = 0; i < 3; ++i) {
    alert(i);   // 0, 1, 2
}

begin	i = 0	반복문에 진입할 때 단 한 번 실행된다.
condition	i < 3	반복마다 해당 조건이 확인된다. false라면 반복을 멈춘다.
body	alert(i)	condition이 truthy일 동안 계속해서 실행된다.
step	i++	각 반복의 body가 실행된 이후에 실행된다.

일반적인 반복문 알고리즘은 begin이 한 차례 실행된 후, condition 확인과 body, step이 계속해서 반복 실행된다.

 

인라인 변수 선언

for (let i = 0; i < 3; ++i) {
    alert(i);   // 0, 1, 2
}
alert(i);   // error, no such variable

let i = 0;
for (i = 0; i < 3; ++i) {
    alert(i);   // 0, 1, 2
}
alert(i);   // 3, visible, because declared outside of the loop

 

구성 요소 생략하기

for문의 구성 요소를 생략하는 것도 가능하다.

begin 생략

let i = 0;

for (; i < 3; ++i) { // 'begin' 생략
    alert(i);   // 0, 1, 2
}

 

step 생략

let i = 0;

for (; i < 3;) { // 'begin', 'step' 생략
    alert(i++);
}

 

모두 생략(?)

for (;;) {
    // 무한 루프문
}

 

반복문 빠져나오기

대부분의 경우, 반복문의 조건이 falsy가 되면 반복문이 종료된다. break를 사용하면 언제든지 원하는 때에 반복문을 빠져나올 수 있다.

let sum = 0;

while (true) {
    let value = +prompt("숫자를 입력하세요.", '');
    if (!value) break;  // 아무것도 입력하지 않거나, Cancel 버튼 눌렀을 경우

    sum += value;
}

alert('합계 : ' + sum);

반복문의 시작 지점이나 끝 지점에서 조건을 확인하는 것이 아니라, 본문 가운데 혹은 본문 여러 곳에서 조건을 확인해야 하는 경우, '무한 루프문 + break' 조합을 사용하면 좋다.

 

다음 반복으로 넘어가기

continue 지시자는 전체 반복문을 멈추지 않고, 현재 실행 중인 iteration을 멈추고 다음 iteration을 강제로 실행시키게끔 한다.

for (let i = 0; i < 10; ++i) {
    // 조건이 참이라면 남아 있는 본문은 실행되지 않는다.
    if (i % 2 == 0) continue;

    alert(i);   // 1, 3, 5, 7, 9
}

continue는 보다 깔끔한 코드와 중첩을 줄이는 데 도움을 준다.

for (let i = 0; i < 10; ++i) {
    if (i % 2) {
        alert(i);
    }
}

 

삼항 연산자 '?' 오른쪽에는 break나 continue가 올 수 없다.

표현식이 아닌 문법 구조(syntax construct)는 삼항 연산자 ?와 함께 사용할 수 없다.

물음표 연산자 ?를 if문 대용으로 쓰지 말아야 하는 이유 중 하나이니 항상 유의한다.

if (i > 5) {
    alert(i);
} else {
    continue;
}
// =>
(i > 5) ? alert(i) : continue;        // error!

 

break/continue와 레이블

레이블(label)은 반복문 앞에 콜론과 함께 쓰이는 식별자이다.

labelName: for(begin; condition; step) {
    // ...
}

다음과 같이 반복문 안에서 break <labelName>을 이용하여 해당 레이블의 반복문을 빠져나올 수 있다.

outer: for (let i = 0; i < 3; ++i) {
    for (let j = 0; j < 3; ++j) {
        let input = prompt(`(${i},${j})의 값`, '');
        if (!input) break outer;
    }
}

alert('완료!');

레이블을 별도의 줄에 쓰는 것도 가능하다.

outer:
for (let i = 0; i < 3; ++i) { ... }

continue를 레이블과 함께 사용하는 것도 가능하다. 두 가지를 같이 사용하면 레이블이 붙은 반복문의 다음 iteration이 실행된다.

 

레이블은 마음대로 '점프'할 수 있게 해 주지 않는다.

break label;    // jump to the label below (doesn't work)

label: for (...)

label: {
    // ...
    break label;    // it works
    // ...
}

break는 코드 블록 안에서 있어야 한다. 그러나 break는 반복문 내부에서 사용되는 경우가 훨씬 흔하다.

continue는 반복문에서만 사용할 수 있음에 유의한다.

 

 

과제

반복문의 마지막 값

let i = 3;

while (i) {
    alert(i--); // 3 2 "1"
}

 

while 반복문의 출력값 예상하기

let i = 0;
while (++i < 5) alert(i);   // 1 2 3 4

i = 0;
while (i++ < 5) alert(i);   // 1 2 3 4 5

 

'for' 반복문의 출력값 예상하기

for (let i = 0; i < 5; ++i) alert(i);   // 0 1 2 3 4
for (let i = 0; i < 5; i++) alert(i);   // 0 1 2 3 4

 

for 반복문을 이용하여 짝수 출력하기

for (let i = 2; i <= 10; ++i) {
    if (i % 2 != 0) continue;
    alert(i);
}

 

'for' 반복문을 'while' 반복문으로 바꾸기

for (let i = 0; i < 3; ++i) {
    alert(`number ${i}!`);
}

let i = 0;
while (i < 3)
{
    alert(`number ${i++}!`);
}

 

사용자가 유효한 값을 입력할 때까지 프롬프트 창 띄우기

while (true)
{
    let input = prompt("100보다 큰 숫자를 입력하세요.", 0);

    if (!input || input == '' || input > 100) {
        break;
    }
}

 

소수 출력하기

let n = 10;

for (let i = 2; i <= n; ++i)
{
    let flag = true;

    for (let j = 2; j * j <= i; ++j)
    {
        if (i % j == 0)
        {
            flag = false;
            break;
        }
    }

    if (flag)
    {
        console.log(i);
    }
}

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial