Modern Js 11(while,for)

자바스크립트의 반복문에 대한 정리

Featured image

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.

2.13 while과 for 반복문

‘while’ 반복문

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

condition(조건)이 truthy 이면 반복문 본문의 코드가 실행됩니다.

아래 반복문은 조건 i < 3을 만족할 동안 i를 출력해줍니다.

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}
let i = 3;
*while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥니다.*
	alert( i );
  i--;
}

본문이 한 줄이면 대괄호를 쓰지 않아도 됩니다.

반복문 본문이 한 줄짜리 문이라면 대괄호 {…}를 생략할 수 있습니다.

let i = 3;
*while (i) alert(i--);*

‘do…while’ 반복문

do {
  // 반복문 본문
} while (condition);
let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

do..while 문법은 조건이 truthy 인지 아닌지에 상관없이, 본문을 최소한 한번이라도 실행하고 싶을 때만 사용해야 합니다. 대다수의 상황에선 do..while보다 while(…) {…}이 적합합니다.

‘for’ 반복문

for (begin; condition; step) {
  // ... 반복문 본문 ...
}
for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
  alert(i);
}

for문 구성요소

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

begin을 실행함
 (condition이 truthy이면  body를 실행한 , step을 실행함)
 (condition이 truthy이면  body를 실행한 , step을 실행함)
 (condition이 truthy이면  body를 실행한 , step을 실행함)
 ...
// for (let i = 0; i < 3; i++) alert(i)

// begin을 실행함
let i = 0
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// i == 3이므로 반복문 종료

ℹ️ 인라인 변수 선언

지금까진 ‘카운터’ 변수 i를 반복문 안에서 선언하였습니다. 이런 방식을 ‘인라인’ 변수 선언이라고 부릅니다. 이렇게 선언한 변수는 반복문 안에서만 접근할 수 있습니다.

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, 반복문 밖에서 선언한 변수이므로

구성 요소 생략하기

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

반복문이 시작될 때 아무것도 할 필요가 없으면 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 );

다음 반복으로 넘어가기

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

아래 반복문은 continue를 사용해 홀수만 출력합니다.

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

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

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 버튼을 눌렀을 때 반복문을 중단시킬 방법이 필요합니다.

input 아래에 평범한 break 지시자를 사용하면 안쪽에 있는 반복문만 빠져나올 수 있습니다. 이것만으론 충분하지 않습니다(중첩 반복문을 포함한 반복문 두 개 모두를 빠져나와야 하기 때문이죠 – 옮긴이). 이럴 때 레이블을 사용할 수 있습니다.

레이블(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 지시자를 레이블과 함께 사용하는 것도 가능합니다. 두 가지를 같이 사용하면 레이블이 붙은 반복문의 다음 이터레이션이 실행됩니다.

요약

‘무한’ 반복문은 보통 while(true)를 써서 만듭니다. 무한 반복문은 여타 반복문과 마찬가지로 break 지시자를 사용해 멈출 수 있습니다.

현재 실행 중인 반복에서 더는 무언가를 하지 않고 다음 반복으로 넘어가고 싶다면 continue 지시자를 사용할 수 있습니다.

반복문 앞에 레이블을 붙이고, break/continue에 이 레이블을 함께 사용할 수 있습니다. 레이블은 중첩 반복문을 빠져나와 바깥의 반복문으로 갈 수 있게 해주는 유일한 방법입니다.