[JavaScript] 반복문 빠져나오기, 다음 반복으로 넘어가기, 중첩 반복문 한번에 빠져나오기 (break, continue, label)

   목차 

1. 반복문 빠져나오기 (break)
2. 다음 반복으로 넘어가기 (continue)
3. 중첩 반복문 한번에 빠져나오기 (label)

 

 

 

반복문을 컨트롤 하는 방법에 대해서 알아보자!

 

 

 

---

 

 

 반복문 빠져나오기 (break) 

 

원래는 반복문의 조건이 false가 될 때 반복문이 종료되어야한다.
그런데 특별한 지시자인 break를 사용하면 중간에도 언제든 원하는 때에 반복문을 빠져나올 수 있다. 

 

let sum = 0;

while (true) {

  let value = +prompt("숫자를 입력하세요.", '');

  if (!value) break; // (*)

  sum += value;

}
alert( '합계: ' + sum );

 

<과정>

- 변수 sum은 값이 0이다.
-  while 반복문에서 조건을 (조건식 대신) true로 지정하면, 무한히 프로그램을 반복하는 무한루프가 만들어진다.
- 따라서 while문이 계속 반복하므로, prompt창이 계속해서 뜨게된다. 

[ 사용자가 0 이외의 숫자를 입력한 경우 ]

- 만약 사용자가 숫자 3을 입력하고 확인버튼을 누르면 3이 변수 value에 담긴다. 
- if절을 만났으나, 조건이 !(3) 이므로, !(true) 이므로, 결국 if절의 조건이 false가 돼서, if절 (break절)이 실행되지 않는다. 
- (sum =  sum + value ) 이므로,  ( sum = 0 + 3 )가 돼서 sum이 3이 된다.

- 무한루프이므로, 또 조건식이 실행돼서 prompt창이 뜬다.
- 만약 사용자가 숫자 8을 입력하고 확인버튼을 누르면 8이 변수 value에 담긴다. 
- if절을 만났으나, 조건이 !(8) 이므로, !(true) 이므로, 결국 if절의 조건이 false가 돼서, if절 (break절)이 실행되지 않는다. 
- (sum =  sum + value ) 이므로,  ( sum = 3 + 8 )가 돼서 sum이 11이 된다.

- 무한루프이므로, 또 조건식이 실행돼서 prompt창이 뜬다.
- 여기서 만약에 취소버튼을 누르게 되면,
- if절을 만났을 때, 조건이 !(null) 이므로, !(false) 이므로, 결국 if절의 조건이 true가 돼서, if절 (break절)이 실행된다.
- break를 만났기 때문에, 반복문이 즉시 중단되고, 반복문 아래 첫번째 줄로 이동한다. 즉, alert창에서 합계가 나오게 된다. 

 

 

 

 

[ break 구문이 실행되는 상황 총정리 ]

- 사용자가 0을 입력하거나, 아무것도 입력하지 않거나, 취소버튼을 누르면, value의 값은 false가 된다.
- if절을 만났을 때, 조건이 !(null) 이므로, !(false) 이므로, 결국 if절의 조건이 true가 돼서, if절 (break절)이 실행된다.
- break를 만났기 때문에, 반복문이 즉시 중단되고, 반복문 아래 첫번째 줄로 이동한다. 즉, alert창에서 합계가 나오게 된다. 

 

입력창에 0을 입력하고 확인버튼을 눌렀을때의 결과

 

아무것도 입력하지 않고, 확인버튼을 눌렀을 때의 결과

 

아무것도 입력하지 않고, 취소버튼을 눌렀을 때의 결과

 

 

 

 

 다음 반복으로 넘어가기 (continue) 

 

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

 

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

  // if문의 조건이 참이라면 continue로 인해 남아있는 본문은 실행되지 않는다.
  if (i % 2 == 0) continue; 

  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

  

< 과정 >  

* 큰 순서:  시작 (i=0)  ▶  조건 (i<0)이 true이면  ▶  반복문 본문 실행   ▶  step (i++) 실행

- 변수 i는 값이 0이다.
- i가 0이므로 (i < 10) 조건이 true가 되므로, 반복문 본문이 실행된다. 
- if 절을 만났는데 조건이 ( i % 2 == 0 ) 이므로, ( 0 % 2 ) 즉, 0을 2로 나눴을때 나머지 값이 "0"이 맞으므로 true가 된다.
- if절이 실행돼서, contunue는 현재 실행중인 for반복문을 멈추고 (alert 실행안됨)
- 다음 이터레이션을 강제로 실행시키도록 한다. 따라서 i++로 인해 i가 1로 증가한다.

- i가 1이므로 (i < 10) 조건이 true가 되므로, 반복문 본문이 실행된다.  
- if 절을 만났는데 조건이 ( i % 2 == 0 ) 이므로, ( 1 % 2 ) 즉, 1을 2로 나눴을때 나머지 값이 "1"이므로 false가 된다.
- if절이 실행되지 않으므로, 다음 코드가 실행되면서, alert창에 i값인 "1"이 뜬다.
- i ++ 로 인해 i가 2로 증가한다

- i가 2이므로 (i < 10) 조건이 true가 되므로, 반복문 본문이 실행된다.  
- if 절을 만났는데 조건이 ( i % 2 == 0 ) 이므로, ( 2 % 2 ) 즉, 2을 2로 나눴을때 나머지 값이 "0"이 맞으므로 true가 된다.
- if절이 실행돼서, contunue는 현재 실행중인 for반복문을 멈추고 (alert 실행안됨)
- 다음 이터레이션을 강제로 실행시키도록 한다. 따라서 i++로 인해 i가 1로 증가한다.

나머지는 아래와 같이 진행된다.

( i = 3 ) ▶ 조건(i<10)이 true ▶ 반복문 본문 실행 ▶ if절 실행안됨 ▶ alert "3"
( i = 4 )  ▶ 조건(i<10)이 true ▶ 반복문 본문 실행 ▶ if절 실행됨  ▶ continue
( i = 5 ) ▶ alert "5"
( i = 6 ) ▶ continue
( i = 7 ) ▶ alert "7"
( i = 8 ) ▶ continue
( i = 9 ) ▶ alert "9"
( i = 10 ) ▶ 조건(i<10)이 false ▶ 반복문 본문 실행 안됨

 

 

 

 break와 continue를 쓸 때 주의사항 

 

1. break와 continue는 반복문 안에서만 사용할 수 있다.

 

2. 삼항연산자 '?'의 오른쪽엔 break나 continue가 올 수 없다. (break나 continue 같은 지시자는 삼항 연산자에 사용하면 안된다.)

 

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

 

위 조건문을 줄여쓰겠다고 밑에 처럼 쓰면 오류가 난다. (이는 물음표 연산자 ?를 if문 대용으로 쓰지 말아야 하는 이유 중 하나이다.)

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

 

 

 

 

 중첩 반복문 한번에 빠져나오기 (label) 

 

여러개의 중첩 반복문을 한번에 빠져나갈 때는 레이블(label)을 사용해야한다. 

레이블은 반복문 앞에 콜론과 함께 쓰이는 식별자이다. (레이블의 이름은 변경 가능하다.)

 

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

 

 

사용 예시

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; // outer라는 레이블이 붙은 반복문을 찾는다.

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

 

outer 라는 레이블을 바깥 반복문에 붙여주면,
break outer는 outer라는 레이블이 붙은 반복문을 찾고, 해당 반복문을 빠져나오게 해준다.
따라서 제어흐름이 break outer에서  alert('완료')로 바로 바뀌게 된다.

 

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

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

 

 

 

 label을 쓸 때 주의 사항 

 

레이블은 반드시 break나 continue 지시자보다 앞에 위치해야한다. 
따라서 아래와 같이 쓰면 안된다.

 

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

label: for (...)

 

 

 

 

 

참고 자료 
https://ko.javascript.info/while-for