while과 for 반복문

‘while’ 반복문

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}

‘do…while’ 반복문

do..while 문법을 사용하면 condition을 반복문 본문 아래로 옮길 수 있습니다.

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

이때 본문이 먼저 실행되고, 조건을 확인한 후 조건이 truthy인 동안엔 본문이 계속 실행됩니다.

 

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

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

‘for’ 반복문

 

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

 

for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
  alert(i);
}

이제 for문의 구성 요소를 하나씩 살펴봅시다.

구성 요소

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

일반적인 반복문 알고리즘은 다음과 같습니다.

 

인라인 변수 선언: 반복문 안에서 선언.

 

for (let i = 0; i < 3; i++) {
  alert(i); // 0, 1, 2
}
alert(i); // Error: i is not defined

 

정의되어있는 변수를 사용할 수도 있습니다.

 

 

let i = 0;

for (i = 0; i < 3; i++) { // 기존에 정의된 변수 사용
  alert(i); // 0, 1, 2
}

alert(i); // 3, 반복문 밖에서 선언한 변수이므로 사용할 수 있음

구성 요소 생략하기

 

반복문이 시작될 때 아무것도 할 필요가 없으면 begin을 생략하는 것이 가능하죠.

 

let i = 0; // i를 선언하고 값도 할당하였습니다.

for (; i < 3; i++) { // 'begin'이 필요하지 않기 때문에 생략하였습니다.
  alert( i ); // 0, 1, 2
}

step 역시 생략  가능.

 

let i = 0;

for (; i < 3;) {
  alert( i++ );
}

위와 같이 for문을 구성하면 while (i < 3)과 동일해집니다.

모든 구성 요소를 생략: 이무한 반복문

for (;;) {
  // 끊임 없이 본문이 실행됩니다.
}

for문의 구성요소를 생략할 때 주의할 점은 두 개의 ; 세미콜론을 꼭 넣어주어야 한다는 점입니다. 하나라도 없으면 문법 에러가 발생합니다.

반복문 빠져나오기

특별한 지시자인 break를 사용하면 언제든 원하는 때에 반복문을 빠져나올 수 있습니다.

아래 예시의 반복문은 사용자에게 일련의 숫자를 입력하도록 안내하고, 사용자가 아무런 값도 입력하지 않으면 반복문을 '종료’합니다.

 

 

let sum = 0;

while (true) {
  let value = +prompt("숫자를 입력하세요.", '');
  if (!value) break; // (*)
  sum += value;
}
alert( '합계: ' + sum );

(*)로 표시한 줄에 있는 break: 사용자가 아무것도 입력하지 않거나 Cancel버튼을 눌렀을 때 활성화됩니다. 이때 반복문이 즉시 중단되고 반복문 아래 첫 번째 줄(alert)로 이동합니다. 

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

다음 반복으로 넘어가기

continue는 현재 실행 중인 이터레이션을 멈추고 반복문이 다음 이터레이션을 강제로 실행시키도록 합니다(조건을 통과할 때).

continue는 현재 반복을 종료시키고 다음 반복으로 넘어가고 싶을 때 사용할 수 있습니다.

 

 

for (let i = 0; i < 10; i++) {
  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;
  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

i가 짝수이면 continue가 본문 실행을 중단시키고 다음 이터레이션이 실행되게 합니다(i가 하나 증가하고, 다음 반복이 실행됨). 

continue는 중첩을 줄이는 데 도움을 줍니다.

아래 예시는 위쪽에 있는 예시와 동일합니다. 

이렇게 코드를 작성하면 부작용으로 중첩 레벨(대괄호 안의 alert 호출)이 하나 더 늘어납니다. if 안의 코드가 길어진다면 전체 가독성이 떨어질 수 있습니다.

 

 

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

 

표현식이 아닌 문법 구조(syntax construct)는 삼항 연산자 ?에 사용할 수 없다는 점을 항상 유의하시기 바랍니다.  break나 continue 같은 지시자는 삼항 연산자에 사용하면 안 됩니다.

 

if (i > 5) {
  alert(i);
} else {
  continue;
}

물음표를 사용해서 위 조건문을 아래와 같이 바꾸려는 시도를 할 수 있을겁니다.

(i > 5) ? alert(i) : continue; // 문법 에러 발생

 

 

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

break/continue와 레이블

여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우가 종종 생기곤 합니다.

i와 j를 반복하면서 프롬프트 창에 (0,0)부터 (2,2)까지를 구성하는 좌표 (i, j)를 입력하게 해주는 예시를 살펴봅시다.

 

 

for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let input = prompt(`(${i},${j})의 값`, '');

    // 여기서 멈춰서 아래쪽의 `완료!`가 출력되게 하려면 어떻게 해야 할까요?
  }
}

alert('완료!');

사용자가 Cancel 버튼을 눌렀을 때 반복문을 중단시킬 방법이 필요합니다.

이럴 때 레이블을 사용할 수 있습니다.

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

labelName: for (...) {
  ...
}

 

반복문 안에서 break <labelName>문: 레이블에 해당하는 반복문을 빠져나올 수 있습니다.

 

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

  for (let j = 0; j < 3; j++) {

    let input = prompt(`(${i},${j})의 값`, '');

    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
    if (!input) break outer; // (*)

    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('완료!');

 

break outer: outer라는 레이블이 붙은 반복문을 찾고, 해당 반복문을 빠져나오게 해줍니다.

따라서 제어 흐름이 (*)에서 alert('완료!')로 바로 바뀝니다.

 

레이블을 별도의 줄에 써주는 것도 가능합니다.

 

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

 

continue 지시자를 레이블과 함께 사용하는 것도 가능합니다-> 레이블이 붙은 반복문의 다음 이터레이션이 실행됩니다.

 

레이블을 사용한다고 해서 원하는 곳으로 마음대로 점프할 수 있는 것은 아닙니다.

아래 예시처럼 레이블을 사용하는 것은 불가능합니다.

break label; // 아래 for 문으로 점프할 수 없습니다.

label: for (...)

break와 continue는 반복문 안에서만 사용할 수 있고, 레이블은 반드시 break이나 continue 지시자 위에 있어야 합니다.

<복습 질문> break label이란?