[JavaScript] #10 Javascript 제어문, JavaScript 제어문 - break와 continue 차이점과 활용법 완전 정리!

2025. 10. 23. 14:00·Web Front/JavaScript
반응형

 

 

토스트데브입니다!
이번 시간에는 JavaScript 제어문 중에서도 반복문 안에서 자주 사용되는
break와 continue 키워드에 대해 좀 더 자세히 알아보겠습니다.

이 두 가지는 반복문의 흐름을 제어할 수 있는 핵심 문법입니다.
"언제 반복을 멈출지", "언제 다음 반복으로 넘어갈지"를 결정하는 도구죠.

 

 

🔴 break – 반복문 완전히 종료하기

break는 반복문을 즉시 종료시키는 제어문입니다.
조건에 따라 반복을 중간에 끊고 루프 밖으로 탈출할 때 사용됩니다.

 

📌 기본 구조

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}
// 출력: 0, 1, 2, 3, 4
i가 5일 때 break가 실행되어 루프가 종료됩니다.

 

 

🟡 continue – 이번 반복만 건너뛰기

continue는 현재 반복만 건너뛰고, 다음 반복을 계속 진행하도록 만듭니다.
전체 반복을 종료하지 않고 특정 조건일 때만 스킵하는 용도로 사용돼요.

 

📌 기본 구조

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  console.log(i);
}
// 출력: 0, 1, 3, 4
i가 2일 때만 continue로 인해 출력되지 않고 건너뜁니다.

 

 

🔁 break vs continue 차이 비교

기능 break continue
실행 결과 반복문을 즉시 종료함 현재 반복만 건너뛰고 다음 반복으로 진행
사용 위치 if, switch, for, while 등 for, while 등의 반복문 내부에서 사용
실행 흐름 루프 밖으로 나감 루프 내부에서 다음 루프로 점프함

 

 

✅ 예제 – 1부터 10까지 짝수만 출력하기 (continue 사용)

for (let i = 1; i <= 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}
// 출력: 2, 4, 6, 8, 10

 

 

✅ 예제 – 특정 숫자에서 루프 종료하기 (break 사용)

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    break;
  }
  console.log(i);
}
// 출력: 1, 2, 3, 4, 5

 

 

🧭 마무리하며

break와 continue는 반복문의 흐름을 유연하게 제어하는 데 필수적인 도구입니다.
간단한 반복문은 물론, 실무 로직에서도 자주 등장하기 때문에 두 개의 차이와 동작 원리를 정확히 이해하고 사용하는 것이 중요합니다!

 

#JavaScript, #자바스크립트기초, #제어문, #break, #continue, #반복문, #for문, #while문, #코딩입문, #프로그래밍문법, #ToastDev

반응형
저작자표시 비영리 (새창열림)

'Web Front > JavaScript' 카테고리의 다른 글

[JavaScript] #09 Javascript 제어문, JavaScript 반복문 총정리! for, while, for...of, forEach 완벽 이해하기  (0) 2025.10.22
[JavaScript] #08 Javascript 제어문, JavaScript 조건문 완전 정복! if, else, switch 문 제대로 배우기  (2) 2025.10.05
[JavaScript] #07 Javascript 기본문법, JavaScript 연산자 완전 정리! 종류별 예제와 함께 배우기  (0) 2025.10.04
[JavaScript] #06 JavaScript 기본 문법, 데이터 타입 완벽 정리!  (0) 2025.10.03
[JavaScript] #05 Javascript 기본문법, JavaScript 변수 선언 완전 정리! var, let, const 차이점은?  (2) 2025.10.02
'Web Front/JavaScript' 카테고리의 다른 글
  • [JavaScript] #09 Javascript 제어문, JavaScript 반복문 총정리! for, while, for...of, forEach 완벽 이해하기
  • [JavaScript] #08 Javascript 제어문, JavaScript 조건문 완전 정복! if, else, switch 문 제대로 배우기
  • [JavaScript] #07 Javascript 기본문법, JavaScript 연산자 완전 정리! 종류별 예제와 함께 배우기
  • [JavaScript] #06 JavaScript 기본 문법, 데이터 타입 완벽 정리!
TOASTDEV
TOASTDEV
인스턴트 코딩 #토스트데브 #토스트뎁 #코딩공부 #개발입문
  • TOASTDEV
    토스트데브
    TOASTDEV
    • 분류 전체보기 (177)
      • 알쓸신잡 (49)
        • 코딩에 대하여 (13)
        • 컴퓨터에 대하여 (12)
        • IT 국내외 소식 (24)
      • Web Front (46)
        • HTML (22)
        • CSS (14)
        • JavaScript (10)
      • Programming (35)
        • PHP (35)
      • App Development (2)
        • Ionic Framework (2)
      • Database (12)
        • SQL (12)
        • MySQL (0)
      • Server (24)
        • Linux (24)
      • Review (9)
        • Overseas Trip (0)
        • Domestic Travel (0)
        • Product Use Review (4)
        • Football Sports Review (5)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • Youtube Toastdev
    • Naver Blog
  • 공지사항

    • [유튜브] 유튜브 영상 업로드 안내
  • 인기 글

  • 태그

    웹개발기초
    웹프로그래밍
    자바스크립트기초
    HTML
    웹개발
    SQL기초
    php기초
    javascript
    서버관리
    웹개발입문
    서버보안
    css기초
    php
    코딩입문
    php문법
    SQL문법
    서버입문
    웹접근성
    sql
    html기초
    프론트엔드기초
    ubuntu서버
    PHP문자열
    리눅스보안
    리눅스기초
    프론트엔드
    웹퍼블리싱
    ubuntuserver
    웹디자인기초
    php입문
  • 최근 댓글

  • 최근 글

  • 전체
    오늘
    어제
  • 반응형
  • hELLO· Designed By정상우.v4.10.3
TOASTDEV
[JavaScript] #10 Javascript 제어문, JavaScript 제어문 - break와 continue 차이점과 활용법 완전 정리!
상단으로

티스토리툴바