모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

while과 for 반복문

개발을 하다 보면 여러 동작을 반복해야 하는 경우가 종종 생기는 데, 이 때 반복문(loop)을 사용하면 동일한 코드를 여러번 반복할 수 있다.

while 반복문

while 반복문의 문법은 다음과 같으며, condition(조건)이 truthy이면 반복문 본문의 코드가 실행된다.

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

반복문의 조건이 참일때 실행되는 코드가 한줄이면 중괄호를 생략할 수도 있다.

let i = 3;
while (i < 3) alert(i++);

반복문 본문이 한 번 실행되는 것을 반복(iteration)이라고 부른다. 위 예시에서는 반복문이 세 번의 이터레이션을 만든다.

i++가 없었다면 이론적으로 반복문이 영원히 반복되었을 테지만, 브라우저는 이런 무한 반복을 멈추게하는 실질적인 수단을 제공한다. 서버 사이드 자바스크립트도 이런 수단을 제공해주므로 무한으로 반복되는 것을 막을 수 있다.

반복문 조건에 비교뿐만 아니라 모든 종류의 표현식, 변수가 올 수 있으며, while가 이를 평가할 때에는 불린 값으로 변환된다.

let i = 3;
while (i) {
  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 반복문은 while 반복문보다는 복잡하지만 가장 많이 쓰이는 반복문이다. 문법은 다음과 같다.

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

for문을 구성하는 각 요소가 무엇을 의미하는지 알아보자.

아래 반복문을 실행하면 i가 0부터 3이 될 때까지(단, 3은 포함하지 않음) alert(i)가 호출된다.

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

이에 따라 반복문의 알고리즘은 다음과 같다.

begin을 실행한다.
→ (condition이 truthy이면 → body를 실행한 후, step을 실행함)
→ (condition이 truthy이면 → body를 실행한 후, step을 실행함)
→ (condition이 truthy이면 → body를 실행한 후, step을 실행함)
→ (condition이 truthy이면 → body를 실행한 후, step을 실행함)
→ ...

인라인 변수 선언

카운터 변수 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 문의 구성 요소를 생략하는 것도 가능하다.

let i = 0;

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

step 역시 생략 가능하다. 이렇게 되면 동작 원리는 while(i < 3)과 동일해진다.

let i = 0;

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

모든 구성 요소를 다음과 같이 생략하면 무한 반복문이 된다.

for (;;) {
  // 끊임없이 본문 실행
}

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

반복문 빠져나오기

반복문의 조건이 falsy가 되지 않아도 특별한 지시자인 break를 사용하면 언제든 원하는 때에 반복문을 빠져나올 수가 있다.

다음 예시는 사용자가 아무런 값도 입력하지 않을 때 반복문을 빠져나올 수 있도록 짜여졌다.

let sum = 0;

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

break는 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 눌렀을 때 활성화된다. 이 때 반복문이 즉시 중단되고 제어 흐름이 반복문 아래 첫번째 줄로 이동한다.

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

다음 반복으로 넘어가기

continue 지시자는 전체 반복문을 멈추지 않고, 현재 실행 중인 이터레이션을 멈추고 다음 이터레이션을 강제로 실행한다(조건을 통과할 시). continue는 현재 반복을 종료시키고 다음 반복으로 넘어가고 싶을 때 사용한다.

아래 예시에서는 i가 짝수이면 continue가 본문 실행을 중단시키고 다음 이터레이션이 실행되게 한다.

for (let i = 0; i < 10; i++) {
  if (i % 2 == 0) continue; 
  alert(i); // 1, 3, 5, 7, 9
}

’?’ 오른쪽에는 break나 continue가 올 수 없다.

표현식이 아닌 문법 구조는 삼항 연산자 ?에 사용할 수 없다. 특히 break나 continue 같은 지시자는 삼항 연산자에 사용 불가능하다.

(i > 5) ? alert(i) : continue; // 여기에 continue를 사용할 수 없다.

break/continue와 레이블

여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우에는 레이블(label)이라는 식별자가 필요하다. 레이블은 반복문 앞에 콜론과 함께 쓰이며, 반복문 안에서 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('완료!');

위 예시에서 사용자가 아무것도 입력하지 않으면 break outer가 실행되어, outer라는 레이블이 반복을 찾아 해당 반복문을 빠져나오게 된다.

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

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

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

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

break와 continue는 반복문 안에서만 사용가능하고, 레이블은 반드시 break나 continue 지시자 뒤에 와야 한다.

break label;

label: for (...)