[인프런] Javascript입문 - 반복문2 (break, continue, 이중루프)

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

 

break 와 continue

break는 "반복문(루프) 한 개"를 빠져나간다.
(반복문을 중간에 빠져나갈 때 break를 사용합니다)

무한 루프와 함께 많이 사용합니다.
(예를 들어 아래 코드 : while(true)이므로, 조건이 false가 될 일이 없기 때문에 무한루프이다)

var str;
while (true) {
  str = prompt("아무거나 입력하세요"); 
  document.write(str + "<br>"); 
  if (str == "q") {
  	break; 
  } 
} 
document.write("Bye~");

아래 코드의 실행 결과를 예측해 보세요.

for(var i = 0; i < 10; i++) {
  console.log(i)
  if (i == 5) { 
  	break; 
  }  
}
console.log("End");

-> i가 0부터 1씩 더해지는 걸 반복하다가, i=5가 되는 순간 '반복문을' 탈출한다.
즉 출력결과는 0; 1; 2; 3; 4; 5; End 이다.

 

---

continue는 반복문(루프)의 "처음으로 돌아간다".
(반복문을 빠져나가는 게 아님!)

• while: 조건식( i < 10 )으로 돌아감.
• for: 증감식 ( i++) 으로 돌아감.

for(var i = 0;i < 10; i++) {
  if (i == 5) { 
  	continue; 
  }
  console.log(i); 
}

-> i가 0부터 시작해 1씩 더해지다가, i=5가 되면 (i=5라는 값을 가지고) 증감식(i++)으로 되돌아감.
따라서 출력결과는 0; 1; 2; 3; 4; 6; 7; 8; 9;
(5는 출력되지 않는다. continue를 만나 반복문의 처음으로 돌아갔기 때문에 console.log(i)를 만나지 않았기 때문.)

위와 같은 코드에 continue -> break로 바꾼 아래 코드를 실행해 보며 비교해보자.

for(var i = 0;i < 10; i++) {
    if (i == 5) {
        break;
    }
    console.log(i);
}

-> i가 0부터 시작해 1씩 더해지다가, i=5가 되면 반복문을 빠져나감.
따라서 출력결과는 0; 1; 2; 3; 4;
(5와 5이상은 출력되지 않는다. break를 만나 반복문이 종료되었기 때문)

둘 사이의 차이를 잘 이해했나요? 다양한 방법으로 코드를 변경해 가면서 이해될 때까지 해 봅시다.

 

---

 

이중 루프 (반복문의 중첩)

반복문 안에 반복문이 있는 걸 이중 루프라고 합니다. 종종 사용합니다.
 3중, 4중도 가능하지만 잘 사용하지 않습니다.

for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 2; j++) {
  	console.log(i + ", " +j); 
  }
}

위 이중루프의 결과는?

(이중루프 작동순서)
바깥쪽 반복문에서 시작 - 안쪽 반복문 반복, 끝나면 바깥쪽 반복문으로 돌아가 다시 시작 - 안쪽 반복문 반복 ..

i=0, j=0으로 시작.
i=0인 채로 j는 반복문을 통해 2 미만까지 1씩 더해짐(0,0; 0,1;)
j가 2가 되면 j<2를 만족하지 않으므로 안쪽 반복문을 빠져나옴.
바깥쪽 반복문도 i++이므로 i=1이 되고,
i=1인 채로 j는 반복문을 통해 2 미만까지 1씩 더해짐(1,0; 1,1;)
역시 j가 2가 되면 j<2를 만족하지 않으므로 안쪽 반복문을 빠져나옴.
바깥쪽 반복문도 i++이므로 i=2가 되고,
i=2인 채로 j는 반복문을 통해 2 미만까지 1씩 더해짐(2,0; 2,1;)
역시 j가 2가 되면 j<2를 만족하지 않으므로 안쪽 반복문을 빠져나옴.
바깥쪽 반복문에서 i가 3이 되면 i<3을 만족하지 않으므로 바깥쪽 반복문도 빠져나오고 종료됨.

(출력 결과)

0, 0
0, 1
1, 0
1, 1
2, 0
2, 1

 

(생각해 보기) 이중 루프 중간에 한꺼번에 빠져나갈 수 있을까요? 아래 코드의 결과는?

for (var i = 0; i < 3; i++) { for (var j = 0; j < 5; j++) { console.log("i= " + i+ ", j= " + j); if (j == 2) { break; } } }

for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 5; j++) {
    console.log("i= " + i+ ", j= " + j);
    if (j == 2) {
    	break;
    }
  }
}

-> break;는 루프를 "한 개" 빠져나가므로,
j=2가 되면 안쪽 반복문을 빠져나와 바깥쪽 반복문을 반복한다.

즉 출력결과는 :
0, 0
0, 1
0, 2
1, 0
1, 1
1, 2
2, 0
2, 1
2, 2