[13] JavaScript 반복문과 루프의 제어

SeoChanhee·2020년 10월 21일

2.13 while과 for 반복문

1. while과 for 반복문

'while' 반복문

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

condition(조건)이 truthy이면 반복문 본문의 코드가 실행됩니다. 반복문 조건엔 비교뿐만 아니라 모든 종류의 표현식, 변수가 올 수 있습니다. 조건은 while에 의해 평가되고, 평가 후엔 불린값으로 변경됩니다.

while (i != 0)을 짧게 줄여 while (i)로 만들 수 있다.
본문이 한 줄이면 대괄호를 쓰지 않아도 된다. (while (i) alert(i--);)

'do...while' 반복문

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

do..while 문법을 사용하면 condition을 반복문 본문 아래로 옮길 수 있다.
이때 본문이 먼저 실행되고, 조건을 확인한 후 조건이 truthy인 동안엔 본문이 계속 실행된다.
do..while 문법은 조건이 truthy 인지 아닌지에 상관없이, 본문을 최소한 한 번이라도 실행하고 싶을 때만 사용해야 한다. 대다수의 상황에선 do..while보다 while(…) {…}이 적합하다.

'for' 반복문

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

begin이 한 차례 실행된 이후에, condition 확인과 body, step이 계속해서 반복 실행

'인라인' 변수 선언 : '카운터' 변수 i를 반복문 안에서 선언하면 이 변수는 반복문 안에서만 접근할 수 있다.
인라인 변수 선언 대신, 정의되어있는 변수를 사용할 수도 있다.
for문의 구성 요소(begin, condition, step)은 생략이 가능하지만 두 개의 ;는 꼭 넣어주어야 한다.

2. 루프의 제어

일반적으로 표현식의 검사를 통해 루프로 진입하면, 다음 표현식을 검사하기 전까지 루프 안에 있는 모든 실행문을 실행합니다.
하지만 continue 문과 break 문은 이러한 일반적인 루프의 흐름을 사용자가 직접 제어할 수 있게 해줍니다. label 문을 사용하면 continue 문과 break 문의 동작이 프로그램의 흐름을 특정 영역으로 이동시킬 수 있습니다.

기타 제어문 - TCP SCHOOL

? 오른쪽엔 break나 continue가 올 수 없다(2의 이유 중 하나).
물음표 연산자(?)를 if 문의 대용으로 쓰지 말아야 한다.

  (i > 5) ? alert(i) : continue; // 여기에 continue를 사용하면 안 됩니다.

break

대개는 반복문의 조건이 falsy가 되면 반복문이 종료되지만, 지시자인 break를 사용하면 언제든 원하는 때에 반복문을 빠져나올 수 있다.

break가 활성화되면 반복문이 즉시 중단되고 제어 흐름이 반복문 아래 첫 번째 줄로 이동한다.
반복문의 시작 지점이나 끝 지점에서 조건을 확인하는 것이 아니라 본문 가운데 혹은 본문 여러 곳에서 조건을 확인해야 하는 경우, '무한 반복문 + break’ 조합을 사용하면 좋다.

continue

continue는 전체 반복문을 멈추지 않는다. 대신에 현재 실행 중인 이터레이션(반복)을 멈추고 반복문이 다음 이터레이션을 강제로 실행시키도록 한다(조건을 통과할 때).

continue는 현재 반복을 종료시키고 다음 반복으로 넘어가고 싶을 때 사용할 수 있다.
continue는 중첩을 줄이는 데 도움을 준다.

레이블(label)

레이블은 반복문 앞에 콜론과 함께 쓰이는 식별자이다. 반복문 앞에 레이블을 붙이고, break/continue에 이 레이블을 함께 사용할 수 있다.

labelName: for (...) {
  for (...) {
    // 조건이 truthy면 두 반복문 모두를 빠져나온다.
    if(cond) break labelName; 
  }
}

레이블은 중첩 반복문을 빠져나와 바깥의 반복문으로 갈 수 있게 해주는 유일한 방법이다.
반복문 안에서 break <labelName> 문을 사용하면 레이블에 해당하는 반복문을 빠져나올 수 있다.
레이블을 별도의 줄에 써주는 것도 가능하다.
continue 지시자를 레이블과 함께 사용하는 것도 가능하다.
두 가지를 같이 사용하면 ~~레이블이 붙은 반복문의 다음 이터레이션~~이 실행된다.
break와 continue는 반복문 안에서만 사용할 수 있고, 레이블은 반드시 break이나 continue 지시자 위에 있어야 한다.

마침

실제로 공부한 시간에 비해서 블로그에 정리하는 시간이 너무 오래 걸려서 고민이다. 일단 정리를 하는 과정에서 복습이 되는 건 좋지만 필요 이상으로 오래 걸린다.

더 공부할 내용

continue <labelName>을 사용했을 때 레이블이 붙은 반복문의 다음 이터레이션이 실행된다는 게 무슨 말인지 이해가 잘 안 간다.
? 오른쪽엔 break나 continue가 올 수 없다고 말하면서 표현식이 아닌 문법 구조(syntax construct)는 삼항 연산자(?)에 사용할 수 없다는 점을 항상 유의하라고 말한다. 표현식과 문법 구조에 관한 공부가 필요하다.

출처:
2.13 while과 for 반복문 - 모던 JAVASCRIPT 튜토리얼