Web Development · JavaScript

JavaScript break · continue —
반복 제어 완전 정리

break로 반복문 완전히 빠져나가기, continue로 이번 회차만 건너뛰고 다음으로 넘어가기

시작 오늘 분석할 코드

반복문 안에서 조건에 따라 흐름을 바꾸는 두 가지 키워드, break와 continue를 각각 다른 예제로 살펴본다. 하나는 무한 반복을 끊고 나가는 코드, 다른 하나는 특정 회차만 건너뛰고 계속 도는 코드다.

코드 1 — while(true) + break로 3000 넘기기

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>break 문</title> </head> <body> <h3>1에서 얼마까지 더해야 3000을 넘는가?</h3> <hr> <script> let i=0, sum=0; while(true) { // 무한 반복 sum += i; if(sum > 3000) break; // 합이 3000보다 큼. 반복문 벗어남 i++; } document.write(i + " 까지 더하면 3000을 넘음 : " + sum); </script> </body> </html>

코드 2 — for + continue로 나머지 1인 수만 더하기

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>continue 문</title> </head> <body> <h3>3으로 나눈 나머지가 1인 수만 더하기</h3> <hr> <script> let sum=0; for(let i=1; i<=10; i++) { if(i%3 != 1) // 3으로 나눈 나머지가 1이 아닌 경우 continue; // 다음 반복으로 점프(i++ 코드로) document.write(i + " "); // 더하는 수 출력 sum += i; // 합 } document.write("합은 " + sum); </script> </body> </html>

실제 출력 미리보기

1에서 얼마까지 더해야 3000을 넘는가?

77까지 더하면 3000을 넘음 : 3003

3으로 나눈 나머지가 1인 수만 더하기

1 4 7 10 합은 22

용어 용어 정리

break현재 반복문을 즉시 완전히 종료

continue이번 회차 나머지 코드만 건너뛰고 다음 반복으로

while(true)조건이 항상 참 — 무한 반복 시작점

무한루프끝나는 조건이 없어 영원히 도는 반복문

증감식for문의 i++ 같은, 매 회차 실행되는 갱신 코드

i % 3i를 3으로 나눈 나머지 (나머지 연산자)

반복문while·for처럼 코드를 여러 번 되풀이 실행

document.write문서(화면)에 바로 문자열을 출력하는 함수

1 break가 하는 일 — 반복 즉시 종료

break를 만나면 무슨 일이 일어나는가?

break는 "이 반복문 자체를 지금 당장 끝내라"는 명령이다. 남은 반복 횟수가 있어도, 조건이 아직 참이어도 상관없이 break를 실행하는 그 줄에서 반복문을 완전히 빠져나가 바로 다음 코드로 넘어간다.

※ break는 "이번 한 번만 건너뛰는" 게 아니라 "반복 자체를 끝내는" 명령이다. continue와 헷갈리기 쉬운 지점이다.

2 while(true) 무한루프를 break로 끊기

while(true)는 왜 무한히 도는가?

while(true)는 괄호 안 조건이 항상 참(true)이므로, 반복을 멈출 조건 자체가 없다. 이런 구조를 쓰는 이유는 "몇 번 반복할지 미리 알 수 없고, 조건을 만족하는 순간 즉시 멈추고 싶을 때"다. 이번 코드가 정확히 그 경우다 — 몇까지 더해야 3000을 넘는지 미리 알 수 없으니, 넘는 순간 break로 끊는다.

i=0, sum=0 시작

→

sum += i

→

sum > 3000?

→

참이면 break, 거짓이면 i++ 후 반복

i=0 sum=0 → sum(0)>3000? 아니오 → i=1 i=1 sum=0 → sum(0)>3000? 아니오 → i=2 ... i=77 sum=2926 → sum(3003)>3000? 예! → break 결과: i=77, sum=3003

※ 이 코드가 break를 꼭 써야 하는 이유

몇 번 반복해야 할지 미리 계산할 수 없다 (1부터 몇까지 더해야 3000 초과인지는 실행해봐야 앎)
그래서 반복 횟수 대신 "조건을 만족하는 순간"을 기준으로 멈춘다
while(true) + break 조합은 "조건 만족 시 즉시 종료"를 표현하는 대표적인 패턴이다

3 break 없으면 무한루프 위험

만약 break를 빼먹으면?

while(true)는 스스로 멈추지 않는다. 멈추는 유일한 방법은 반복문 안에서 break를 실행하는 것뿐이다. 만약 if(sum > 3000) break; 줄을 실수로 지우거나 조건을 잘못 써서 절대 참이 되지 않게 만들면, 이 반복문은 영원히 끝나지 않는다.

※ 브라우저에서 while(true)가 멈추지 않으면 탭이 멈추거나("응답 없음") 브라우저 전체가 느려질 수 있다. 개발 중에는 안전장치로 if(i > 100000) break; 같은 임시 탈출 조건을 하나 더 넣는 습관이 안전하다.

4 continue가 하는 일 — 나머지 건너뛰고 다음 회차로

continue는 break와 뭐가 다른가?

continue는 반복문을 끝내지 않는다. "이번 회차에서 continue 아래에 남은 코드만 건너뛰고, 다음 반복으로 넘어가라"는 명령이다. 반복문 자체는 계속 살아있다는 점이 break와의 결정적 차이다.

이번 코드에서는 i % 3 != 1(3으로 나눈 나머지가 1이 아닌 경우) 조건이 참일 때 continue가 실행된다. 그러면 그 아래 있는 "출력하고 더하는" 코드 두 줄은 이번 i에 대해서는 실행되지 않고 건너뛴다.

i=1 → 1%3=1 → continue 실행 안 됨 → 출력 O, 더함 O i=2 → 2%3=2 → continue 실행됨 → 출력 X, 더함 X (건너뜀) i=3 → 3%3=0 → continue 실행됨 → 출력 X, 더함 X (건너뜀) i=4 → 4%3=1 → continue 실행 안 됨 → 출력 O, 더함 O ...

5 continue 후 for의 증감식은 여전히 실행된다

왜 이 코드는 무한루프에 안 빠지는가?

여기가 이번 예제에서 가장 중요한 포인트다. for문의 구조는 for(초기식; 조건식; 증감식)인데, continue는 몸통(중괄호 안) 코드만 건너뛸 뿐, for문 자체가 가진 증감식(i++)은 건너뛰지 않는다. continue가 실행되면 흐름은 몸통을 빠져나가 바로 증감식(i++)으로 점프하고, 그다음 조건식을 다시 검사한다.

몸통 실행 중 continue

→

i++ (증감식) 실행됨

→

조건식 재검사 → 다음 반복

※ 만약 for가 아니라 while문 안에서 continue를 쓴다면 이야기가 다르다. while문은 증감식이 조건 괄호에 없고 몸통 안에 직접 i++를 써야 하는데, continue가 그 i++보다 먼저 있으면 i++ 자체가 건너뛰어져 i가 영원히 그대로인 무한루프가 될 수 있다. for문은 증감식이 문법 구조상 분리되어 있어 이 문제가 없다.

6 break vs continue — 두 흐름 제어의 차이

한 문장으로 구분하면?

break는 "그만 돌자(반복문 탈출)", continue는 "이번 건 패스하고 계속 돌자(다음 회차로)"다. 실행 후 코드가 어디로 가는지를 비교하면 명확해진다.

break

반복문을 완전히 벗어남
반복문 다음 줄로 바로 이동
남은 반복 횟수는 전부 무시됨
"탈출"

continue

반복문은 계속 유지됨
증감식(또는 조건 재검사)으로 이동
이번 회차 나머지 코드만 무시됨
"패스"

※ 둘 다 보통 if 조건과 함께 쓰인다. break·continue 자체는 조건 없이도 문법상 쓸 수 있지만, 조건 없이 반복문 맨 위에 두면 그 반복문은 사실상 의미가 없어진다(첫 회차에 바로 끝나거나 항상 패스됨).

7 중첩 반복문에서 break·continue는 어디까지 영향을 주는가

바깥 반복문까지 끊고 싶다면?

반복문 안에 반복문이 들어있는 "중첩 반복"에서는 break와 continue가 자신을 감싸고 있는 가장 안쪽 반복문에만 영향을 준다. 오늘 코드에는 중첩 반복이 없지만, 실무에서 매우 자주 나오는 오해 지점이라 짚고 넘어간다.

바깥 for문 시작i가 1부터 증가하며 도는 큰 반복

안쪽 for문 진입j가 도는 작은 반복 — 바깥 for문의 몸통 안에 위치

안쪽에서 break 실행안쪽 for문만 끝남 — 바깥 for문은 그대로 다음 i로 계속 진행

바깥까지 끊고 싶다면플래그 변수를 두거나 함수로 분리해 return으로 빠져나가야 함

for(i...) { // 바깥 for(j...) { // 안쪽 if(조건) break; // 이 break는 j-반복문만 끊음 } // i-반복문은 계속 이어짐 }

8 자주 하는 실수

실수	증상	해결
while(true)에 break 조건을 안 넣음	브라우저 탭이 멈추거나 "응답 없음"	반드시 특정 조건에서 break가 실행되도록 확인
while문에서 continue를 i++ 앞에 둠	i가 갱신 안 되고 무한루프	i++를 continue보다 먼저 실행되게 배치하거나 for문 사용
break·continue를 if 없이 무조건 실행	반복문이 1회만 돌고 끝나거나 몸통이 항상 패스됨	반드시 조건문(if) 안에서만 사용
break와 continue를 혼동	전체를 끝내야 하는데 한 번만 건너뛰거나 그 반대	"탈출=break / 패스=continue"로 암기
중첩 반복에서 break가 바깥까지 끊을 거라 착각	바깥 반복이 예상과 달리 계속 실행됨	break는 가장 안쪽 반복문에만 적용됨을 기억

핵심 한 줄 요약

break조건 만족 시 반복문을 즉시 완전히 종료

continue이번 회차만 건너뛰고 다음 반복으로 이동

while(true)+break반복 횟수를 모를 때 "만족하는 순간" 멈추는 패턴

for + continue증감식(i++)은 계속 실행되므로 무한루프 안전

중첩 반복break·continue는 가장 안쪽 반복문에만 적용

공통 주의둘 다 반드시 if 조건과 함께 사용

'php' 카테고리의 다른 글

JavaScript 전역 함수 — eval · parseInt · isNaN 완전 정리 (0)	2026.07.03
JavaScript 함수 — 선언·파라미터·return 완전 정리 (0)	2026.07.03
JavaScript switch — 커피 주문 완전 정리 (0)	2026.07.03
JavaScript 반복문 — for · while · do-while 완전 정리 (0)	2026.07.03
JavaScript 문자열 연산 — 타입 혼합과 비교 완전 정리 (0)	2026.07.03

왕진 블로그

비개발자의 개발 일지

JavaScript break · continue — 반복 제어 완전 정리

JavaScript break · continue —
반복 제어 완전 정리

핵심 한 줄 요약

Tags

'php' 카테고리의 다른 글

댓글

티스토리툴바

비개발자의 개발 일지

JavaScript break · continue — 반복 제어 완전 정리

JavaScript break · continue —반복 제어 완전 정리

핵심 한 줄 요약

Tags

'php' 카테고리의 다른 글

관련글

댓글

티스토리툴바

JavaScript break · continue —
반복 제어 완전 정리