break와 continue

break는 반복을 그 자리에서 끝내고, continue는 이번 바퀴의 남은 줄을 건너뛰고 다음 바퀴로 갑니다. 둘 다 반복 안에서만 씁니다.

찾던 것을 찾았다면 남은 값을 더 볼 까닭이 없고, 어떤 값은 건너뛰고 싶을 때도 있습니다. 이럴 때 덩어리 가운데서 반복의 흐름을 바꾸는 것이 break와 continue입니다.

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

실행 전

줄	바뀐 이름	값	출력

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 1번 줄 · let found = false;

줄	바뀐 이름	값	출력
1	found	false

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 2번 줄 · for (let n = 20; n < 30; n++) {

줄	바뀐 이름	값	출력
1	found	false
2	n	20

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 2번 줄 · for (let n = 20; n < 30; n++) {

줄	바뀐 이름	값
1	found	false
2	n	20
2	조건 n < 30	true

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 3번 줄 · if (n % 7 !== 0) {

줄	바뀐 이름	값
1	found	false
2	n	20
2	조건 n < 30	true
3	조건 n % 7 !== 0	true

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 4번 줄 · continue;

줄	바뀐 이름	값
앞 1줄 접음
2	n	20
2	조건 n < 30	true
3	조건 n % 7 !== 0	true
4	continue

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 2번 줄 · for (let n = 20; n < 30; n++) {

줄	바뀐 이름	값
앞 2줄 접음
2	조건 n < 30	true
3	조건 n % 7 !== 0	true
4	continue
2	n	21

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 2번 줄 · for (let n = 20; n < 30; n++) {

줄	바뀐 이름	값
앞 3줄 접음
3	조건 n % 7 !== 0	true
4	continue
2	n	21
2	조건 n < 30	true

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 3번 줄 · if (n % 7 !== 0) {

줄	바뀐 이름	값
앞 4줄 접음
4	continue
2	n	21
2	조건 n < 30	true
3	조건 n % 7 !== 0	false

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 6번 줄 · found = true;

줄	바뀐 이름	값
앞 5줄 접음
2	n	21
2	조건 n < 30	true
3	조건 n % 7 !== 0	false
6	found	true

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 7번 줄 · break;

줄	바뀐 이름	값
앞 6줄 접음
2	조건 n < 30	true
3	조건 n % 7 !== 0	false
6	found	true
7	break — 반복 끝

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

지금 9번 줄 · console.log(found);

줄	바뀐 이름	값	출력
앞 7줄 접음
3	조건 n % 7 !== 0	false
6	found	true
7	break — 반복 끝
9			true

실행 결과

true

let found = false;for (let n = 20; n < 30; n++) {  if (n % 7 !== 0) {    continue;  }  found = true;  break;}console.log(found);

실행 전

줄	바뀐 이름	값	출력

실행 결과

아직 출력이 없습니다 — 12단계에서 쌓입니다

12단계 중 1단계. 20부터 29까지에서 7의 배수를 찾습니다. 찾으면 바로 멈춥니다.

1break — 찾으면 반복을 끝낸다

20부터 29까지 가운데 7의 배수가 있는지 찾습니다. 찾는 일도 하위 목표 셋으로 나눕니다.

// 1. 깃발 내리기
let found = false;
// 2. 하나씩 보며 찾으면 올리고 멈추기
for (let n = 20; n < 30; n++) {
  if (n % 7 === 0) {
    found = true;
    break;
  }
}
// 3. 깃발 보고 쓰기
console.log(found);

실행 결과

true

1. 깃발 내리기: found를 false에 붙여 둡니다. 아직 찾지 못했다는 표시입니다.
2. 하나씩 보며 찾으면 올리고 멈추기: 수를 하나씩 보다가 7의 배수를 만나면 found를 true에 붙이고(깃발 올리기) break로 반복을 끝냅니다.
3. 깃발 보고 쓰기: 반복이 끝난 뒤 깃발을 보고 결과를 씁니다.

추적 표로 따라가면 break 뒤에는 남은 수를 보지 않는 것이 드러납니다.

줄	바뀐 이름	값	출력
2	`found`	false
4	`n`	20
4	조건 `n < 30`	true
5	조건 `n % 7 === 0`	false
4	`n`	21
4	조건 `n < 30`	true
5	조건 `n % 7 === 0`	true
6	`found`	true
7	`break` — 반복 끝
11			true

break는 감싸고 있는 반복을 끝냅니다. if 덩어리 안에 있어도 끝나는 것은 if가 아니라 바깥 for이고, 바꾸기 칸도 거치지 않고 닫는 중괄호 밖으로 나갑니다. 그래서 22부터 29까지는 보지 않습니다. found는 else if로 여러 갈래에서 본 깃발입니다. 찾기에서는 처음에 false로 내려 두었다가 찾으면 true로 올리고, 한 번 올리면 다시 내리지 않습니다. 범위에 7의 배수가 없으면(예: 22부터 27까지) break를 만나지 않고 반복이 끝나고, 깃발이 내린 그대로라 false가 찍힙니다.

2continue — 이번 바퀴만 건너뛴다

아래 코드는 무엇을 찍을까요? 답을 정한 뒤 펼쳐 보세요.

for (let n = 1; n < 6; n++) {
  if (n === 3) {
    continue;
  }
  console.log(n);
}

실행 결과 보기

실행 결과

예상과 다르면 그곳이 배울 곳입니다. continue를 만나면 이번 바퀴의 남은 줄(5번 줄)을 건너뛰고 바꾸기 칸 n++로 갑니다. 반복은 끝나지 않아서, 3만 빼고 찍힙니다.

for의 continue는 남은 줄을 건너뛴 뒤 바꾸기 칸을 거쳐 조건 칸으로 갑니다. 그래서 다음 수로 저절로 넘어갑니다. 1절의 찾기를 continue로 쓰면 이렇습니다. 7의 배수가 아니면 바로 다음 수로 넘어가고, 7의 배수일 때만 6~7번 줄에 닿습니다.

let found = false;
for (let n = 20; n < 30; n++) {
  if (n % 7 !== 0) {
    continue;
  }
  found = true;
  break;
}
console.log(found);

실행 결과

true

결과는 1절과 같고, 찾았을 때 할 일(6~7번 줄)을 한 단계 덜 들여 씁니다.

예제

break를 반복 밖에서 쓰면

let found = true;
if (found) {
  break;
}

실행 결과

main.js:3  break;  ^^^^^ SyntaxError: Illegal break statement

Illegal break statement⁠는 '허용되지 않는 break 문', 곧 break가 반복 밖에 있다는 뜻입니다. break는 for·while 덩어리 안에서만 쓰고, if 하나만 빠져나오는 데는 쓸 수 없습니다. 문법 오류라 1번 줄도 실행되지 않았습니다.

자주 틀리는 곳

틀린 생각: continue는 반복을 끝낸다.

break처럼 덩어리 가운데서 흐름을 바꾸는 말이라 하는 일도 같아 보이지만, continue는 이번 바퀴만 건너뜁니다.

2절 첫 코드의 continue를 break로 바꾸면 1과 2만 찍힙니다. break는 3에서 반복을 끝내고, continue는 3의 바퀴만 건너뛰어 1, 2, 4, 5를 찍었습니다.

맞는 규칙: continue는 이번 바퀴의 남은 줄을 건너뛰고 다음 바퀴로 갑니다. 둘 가운데 반복을 끝내는 것은 break입니다(규칙 4).

틀린 생각: while에서도 continue를 만나면 다음 수로 저절로 넘어간다.

for는 continue 뒤에 바꾸기 칸이 수를 바꿔 주니, while도 그럴 것 같습니다. while에는 바꾸기 칸이 없고, 조건의 이름은 덩어리 안의 줄이 바꿉니다.

1부터 4까지 가운데 2만 건너뛰려는 while입니다. 값을 바꾸는 n = n + 1;이 continue 뒤에 있어서 끝나지 않습니다. 끝나지 않는 코드라서 실행 결과 대신 추적 표로 봅니다.

let n = 0;
while (n < 4) {
  if (n === 2) {
    continue;
  }
  n = n + 1;
  console.log(n);
}

줄	바뀐 이름	값	출력
…
7			2
2	조건 `n < 4`	true
3	조건 `n === 2`	true
4	`continue`
2	조건 `n < 4`	true
3	조건 `n === 2`	true
…

1과 2를 찍고 나면 n은 2입니다. 그 뒤로는 바퀴마다 continue가 6~7번 줄을 건너뛰어 n이 더는 바뀌지 않고, 2번 줄의 조건도 늘 true입니다. 6번 줄을 3번 줄 자리(if 앞)로 옮기면 1, 3, 4를 찍고 끝납니다.

맞는 규칙: while의 continue는 남은 줄을 건너뛰고 조건으로 돌아갈 뿐, 이름을 바꿔 주지 않습니다. while에서는 조건의 이름을 바꾸는 줄을 continue보다 앞에 둡니다(규칙 4).

틀린 생각: 깃발은 바퀴마다 지금 수가 맞는지에 따라 올리고 내린다.

if에 else를 짝지어 '맞으면 올리고, 아니면 내린다'로 쓰면 빠짐없어 보입니다. 그러나 찾기의 깃발은 지금 수가 아니라 '한 번이라도 찾았는가'를 나타냅니다.

let found = false;
for (let n = 20; n < 30; n++) {
  if (n % 7 === 0) {
    found = true;
  } else {
    found = false;
  }
}
console.log(found);

실행 결과

false

21과 28에서 올린 깃발을 다음 수(22 · 29)에서 else가 다시 내렸습니다. 찾은 자리에서 break로 멈추면 이런 일도 생기지 않습니다.

맞는 규칙: 이름은 마지막에 붙인 값 하나만 가리켜서, 반복 안에서 깃발을 내리면 앞에서 찾은 표시가 지워집니다. 깃발은 반복 앞에서 한 번만 내리고, 찾으면 올린 채 둡니다(규칙 3).

확인 문제

1. 2절 첫 코드에서 건너뛸 수를 3에서 1로 바꿨습니다. 무엇이 찍히는지 그대로 쓰세요.

for (let n = 1; n < 6; n++) {
  if (n === 1) {
    continue;
  }
  console.log(n);
}

힌트

수마다 continue를 만나는지, 만나면 그다음 어디로 가는지 봅니다.

정답

실행 결과

첫 바퀴의 1만 continue로 5번 줄을 건너뛰고, 나머지 바퀴는 모두 찍습니다.

흔한 오답은 아무것도 찍히지 않는다는 것입니다. 첫 수 1에서 continue가 반복을 끝낸다고 본 것입니다. continue는 이번 바퀴만 건너뜁니다.

2. 1부터 9까지 가운데 4의 배수가 있으면 true, 없으면 false를 찍는 코드입니다. 빈칸 셋을 채우세요.

// 1. 깃발 내리기
let found = (가);
// 2. 하나씩 보며 찾으면 올리고 멈추기
for (let n = 1; n < 10; n++) {
  if (n % 4 === 0) {
    (나)
    (다)
  }
}
// 3. 깃발 보고 쓰기
console.log(found);

(나)와 (다)를 바꿔 쓰면 무엇이 찍히는지도 고르세요.

① false — break가 먼저 반복을 끝내 깃발을 올리지 못하기 때문
② true — break는 if 덩어리만 끝내고 다음 줄로 넘어가기 때문
③ true — 대입하는 줄이 break보다 먼저 실행되기 때문

힌트

하위 목표 차례대로 채웁니다 — 깃발 내리기 → 찾으면 올리고 멈추기 → 깃발 보고 쓰기.

정답

(가) false · (나) found = true; · (다) break; — 4를 찾아 true가 찍힙니다.

바꿔 쓰면 ①입니다. break가 먼저면 깃발을 올리기 전에 반복이 끝나 false가 찍힙니다.

② break가 if만 빠져나온다고 봤습니다. break는 감싸고 있는 반복(for)을 끝냅니다.
③ 줄의 종류에 따라 실행 차례가 바뀐다고 봤습니다. 자바스크립트는 위에서 아래로 한 문장씩 실행합니다(규칙 1).

3. 하루 3000걸음씩 걸어 모은 걸음 수가 10000 이상이 되는 날 멈춥니다. 무엇이 찍히는지 고르세요.

let total = 0;
for (let i = 1; i < 8; i++) {
  total = total + 3000;
  if (total >= 10000) {
    console.log(i, total);
    break;
  }
}

① 4 12000
② 3 9000
③ 4 12000부터 7 21000까지 네 줄

힌트

바퀴마다 i와 total을 추적 표에 적고, break를 만나는 바퀴를 찾습니다.

정답

실행 결과

4 12000

①입니다. total은 3000 → 6000 → 9000 → 12000입니다. 넷째 바퀴에서 12000 >= 10000이 true라 그 줄을 찍고 break로 반복이 끝납니다.

② 10000에 닿기 전날 멈춘다고 봤습니다. 4번 줄의 조건은 3번 줄에서 더한 뒤에 봅니다.
③ break가 반복을 끝내지 않는다고 봤습니다. break를 만나면 남은 바퀴는 돌지 않습니다.

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 확인 문제 3의 코드를 main.js에 저장해 돌립니다. 그다음 6번 줄의 break를 continue로 바꾸면 무엇이 찍힐지 먼저 적고, 바꿔 돌려서 맞춰 봅니다. 저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.

읽음으로 표시

끝까지 내려오면 저절로 표시됩니다. 이 기기에만 저장합니다.

자바스크립트 목차로