• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Break - 반복문중단 (= 브레이크) ★ / Continue - 반복문건너뛰기 (= 컨티뉴) ★ / Label 라벨 붙이기

목차

  1. break / continue 차이점
  2. break 예제 - 반복문 탈출 / 블럭 탈출
  3. continue 예제 - 건너뛰고 반복 계속 진행

 

break / continue 차이점

[break 키워드]

  

  • 반복문 O 경우: 반복 중단 후 반복문 빠져나기기.
  • 반복문 X 경우, 지정 블럭 빠져나가기.

 


[continue 키워드]

 

  • 지정 조건 충족 시, 해당 조건 때만 건너뛰고 계속 반복 진행.

 

 

break 예제 - 반복문 탈출 / 블럭 탈출

[반복문 탈출]

 

<p id="demo"></p>


<script>

var text = "";

var i;

for (i = 0; i < 10; i++) {

  if (i === 3) { break; }

  text += i + ", ";

}

document.getElementById("demo").innerHTML = text;

</script>

 

결과보기 (결과값: 0, 1, 2,)


[블럭 탈출]

(예) Label 붙이기


<p id="demo"></p>


<script>

var code = ["HTML", "CSS", "JS"];

var text = "";


list: {

  text += code[0] + ", "; 

  text += code[1] + ", "; 

  break list;

  text += code[2] + ", "; 

}


document.getElementById("demo").innerHTML = text;

</script>

 

결과보기 (결과값: HTML, CSS,) 

 

continue 예제 - 건너뛰고 반복 계속 진행

 

<p id="demo"></p>


<script>

var text = "";

var i;

for (i = 0; i < 10; i++) {

  if (i === 3) { continue; }

  text += "i + " / ";

}

document.getElementById("demo").innerHTML = text;

</script>

 

결과보기 (결과값: 0, 1, 2, 4, 5, 6, 7, 8, 9,)



분류 제목
DOM JS - CSS - 스타일변경
DOM JS - Animation - 애니메이션 (= 동적효과 = 움직임효과)
DOM JS - Events - 이벤트 2
DOM JS - addEventListener() 메서드 ★★★★★ - 이벤트 걸기 (= addEventListen…
DOM JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사
DOM JS - Node - 노드추가, 노드삭제, 노드변경 (= 노드생성, 노드제거, 노드교체)
DOM JS - Collection - HTML요소집합 (= HTML요소묶음)
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
AJAX JS - AJAX (아작스) 소개
AJAX JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = X…
AJAX JS - AJAX - open()/send() 메서드 ★ - 서버에 요청 보내기 (GET방식 vs POST방…
AJAX JS - AJAX - Server Response (서버응답) - 콜백함수 사용 예제
AJAX JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)
4/67
목록
찾아주셔서 감사합니다. Since 2012