JS 조건문 break와 continue에 대해서

2024. 12. 9. 01:07·Frontend/JavaScript & Jquery

JavaScript의 break와 continue는 반복문(for, while, do...while)이나 switch문 등에서 자주 사용되는 제어문

 

🔥 1. break 문

break 문은 현재의 반복문이나 switch문을 즉시 종료하는 역할

반복문이 중간에 조건에 따라 종료되어야 할 때 자주 사용

 

📘 적용 가능한 위치

  • 반복문 (for, while, do...while)
  • switch 문

📘 동작 방식

  1. 반복문: 조건에 따라 반복을 즉시 종료하고, 반복문 바깥의 코드로 실행이 이동합니다.
  2. switch 문: 조건이 일치하는 case 블록을 실행한 후, break가 있으면 switch문을 종료합니다.
for (let i = 0; i < 10; i++) {
  console.log(`i의 값: ${i}`);
  if (i === 5) {
    console.log("i가 5이므로 반복문을 종료합니다.");
    break; // i가 5일 때 반복문 종료
  }
}


const day = '월요일';

switch (day) {
  case '월요일':
    console.log('오늘은 월요일입니다.');
    break; // '월요일'을 찾았으므로 switch문 종료
  case '화요일':
    console.log('오늘은 화요일입니다.');
    break;
  default:
    console.log('오늘은 월요일이나 화요일이 아닙니다.');
}

 

🚀 2. continue 문

continue 문은 반복문의 현재 실행을 중단하고, 다음 반복으로 바로 넘어갑니다.

break와 달리 반복문을 종료하지 않고, 다음 반복으로 이동합니다.

 

📘 적용 가능한 위치

  • 반복문 (for, while, do...while)

❌ switch 문에서는 사용할 수 없습니다.

📘 동작 방식

  1. 반복문: 조건이 참이면 현재 실행을 건너뛰고, 다음 반복으로 바로 이동합니다.
  2. break와 다르게 반복문을 종료하지 않으며, 다음 반복을 계속 진행합니다.
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // i가 짝수라면, 아래 코드를 건너뛰고 다음 반복으로 이동
  }
  console.log(`i의 값: ${i}`); // i가 홀수일 때만 출력됨
}
let i = 0;

while (i < 10) {
  i++;
  if (i % 2 === 0) {
    continue; // i가 짝수일 때 현재 반복을 건너뜀
  }
  console.log(`i의 값: ${i}`); // i가 홀수일 때만 출력
}

 

📋 break와 continue의 차이점 정리

구분 break continue
적용위치 반복문, switch문 반복문 (for, while, do...while)
반복문 동작 반복문 자체를 종료 현재 반복만 중단, 다음 반복으로 이동
switch 동작 switch 전체 종료 X 사용할 수 없음
중단 후 동작 반복문 바깥으로 이동 반복문 내부로 다시 이동하여 다음 반복 실행
주요 목적 반복이나 switch를 즉시 종료 특정 조건만 건너뛰고 다음 반복 실행

 

💡 언제 사용해야 할까?

 

  • break: 특정 조건에서 반복문을 완전히 중단해야 할 때 사용합니다. 예를 들어, 특정 값이 발견되었을 때 반복을 더 이상 실행할 필요가 없는 경우 유용합니다.
  • continue: 특정 조건에서 해당 반복만 건너뛰고 다음 반복으로 이동할 때 사용합니다. 예를 들어, 짝수/홀수 조건을 걸러내는 경우에 자주 사용됩니다.

✨ 정리

  1. break: 현재의 반복문이나 switch문을 즉시 종료합니다.
  2. continue: 현재의 반복을 중단하고, 다음 반복으로 이동합니다.

 

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

'Frontend > JavaScript & Jquery' 카테고리의 다른 글

HTML 테이블 생성기  (0) 2025.02.15
JavaScript 단축 속성명 & 속성 계산명  (0) 2025.01.07
[JS] Array 배열 group별로 묶는 방법  (1) 2024.08.21
[JS 문법] call, apply, bind 메소드로 this 명시적 바인딩하기  (0) 2024.07.14
[JS 문법] this 바인딩에 대해서  (2) 2024.07.14
'Frontend/JavaScript & Jquery' 카테고리의 다른 글
  • HTML 테이블 생성기
  • JavaScript 단축 속성명 & 속성 계산명
  • [JS] Array 배열 group별로 묶는 방법
  • [JS 문법] call, apply, bind 메소드로 this 명시적 바인딩하기
전예방
전예방
  • 전예방
    예방이의 개발일기
    전예방
  • 전체
    오늘
    어제
    • All (125)
      • Info & Tip (2)
      • 유용한 사이트들 (5)
      • Mark Up & StyleSheet (23)
        • HTML (6)
        • CSS & SCSS (10)
        • 반응형 (6)
      • Frontend (66)
        • 전체 (10)
        • JavaScript & Jquery (18)
        • TypeScript (0)
        • React (26)
        • Next.js (3)
        • 성능최적화 (2)
        • 웹접근성 (2)
      • Backend (13)
        • Python (1)
        • JAVA (2)
        • node.js (0)
        • PHP (7)
        • 패키지매니저 (3)
      • Markdown (0)
      • SCM (1)
        • Git&Github (1)
        • SVN (0)
      • IDE (4)
        • VSCode (2)
        • IntelliJ (1)
        • Ecplise (1)
      • 취미생활 (3)
      • 정보처리기사 (2)
      • 코딩자율학습단 (5)
        • 12기 (파이썬) (5)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

    • velog
    • github
  • 공지사항

  • 인기 글

  • 태그

    코딩자율학습
    리액트
    Admin
    코딩자율학습단
    frontend
    CSS
    Python
    파이썬
    React Swiper
    php
    TypeScript
    반응형
    swiper.js
    회원가입
    관리자 페이지
    react
    yarn berry
    나도코딩
    Chart.js
    NPM
  • 최근 댓글

  • 최근 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.3
전예방
JS 조건문 break와 continue에 대해서
상단으로

티스토리툴바