[JavaScript(6)] 반복문과 switch문

2026. 5. 30. 00:03·웹 개발/Javascript

 

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 반복문과 Switch문을 리뷰해보려고 합니다.

 

OverView


 

프로그래밍을 하다 보면 같은 작업을 여러 번 반복해야 할 때가 있습니다.


예를 들어 “1부터 5까지 숫자를 출력해줘”라고 하면, console.log()를 다섯 번 직접 쓰는 방법도 있지만, 코드가 길어지고 비효율적입니다.

이럴 때 사용하는 것이 바로 반복문입니다.

 

그리고 여러 조건 중 하나를 골라 실행해야 할 때는 if...else도 사용할 수 있지만, 비교할 값이 많아지면 코드가 길어질 수 있습니다.
이럴 때는 switch문을 사용하면 더 깔끔하게 정리할 수 있습니다.

 

쉽게 말하면,

  • while문은 “조건이 맞는 동안 계속 반복”
  • for문은 “정해진 흐름대로 반복”
  • switch문은 “여러 선택지 중 하나를 골라 실행”

하는 문법입니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

  • 참고 링크: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration

 

 

개념 설명


 

 

1. while문이란?

While문은 조건이 참인 동안 코드를 계속 반복 실행하는 반복문입니다.

 

말 그대로 영어 뜻처럼 “~하는 동안”이라는 의미를 가지고 있습니다.

 

 

let i = 0;
while (i < 3) {
	alert(i);
    i++;
}

alert(0)
alert(1)
alert(2)

 

위 코드에서 볼 수 있듯 while문은 보통 반복 횟수가 정확히 정해져 있지 않고, 특정 조건이 만족되는 동안 반복하고 싶을 때 사용합니다.

무한 반복 코드

let count =1;

while (count <=1) {
console.log(count);
}

 

조건이 true인 이상 1 값을 무한 반복해서 낼 것입니다.

 


 

2. for문이란?

 

 

for문은 반복에 필요한 초기값, 조건, 증감식을 한줄에 모아서 작성하는 반복문입니다.

 

보통 반복 횟수가 어느정도 정해져 있을 때 많이 사용합니다.

 

문법은 다음과 같습니다.

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

for (let i = 0; i < 3 ; i++) {
	console.log("i", i);
};

 

begin, condition, step부분은 전부 생략이 가능하지만 세미콜론 ; 은 반드시 유지해야합니다.

 

  • break로 반복문 빠져나오기

반복문은 보통 조건이 false가 되면 종료됩니다.

 

하지만 반복문을 실행하다가 특정 상황에서 바로 멈추고 싶을 때가 있습니다.


이때 사용하는 것이 break입니다.

 

break는 현재 실행 중인 반복문을 즉시 종료합니다.

 

let sum = 0;

for (;;) {

  let value = +prompt("숫자를 입력하세요.", '');

  if (!value) break;

  sum += value;

}
alert( '합계: ' + sum );

 

  • continue로 다음 반복으로 넘어가기

반복문은 보통 조건이 false가 되면 종료됩니다.

 

continue는 break와 비슷해 보이지만 역할이 다릅니다.

 

break는 반복문 전체를 종료합니다.


반면 continue는 현재 반복만 건너뛰고 다음 반복으로 넘어갑니다.

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

  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;

  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

 

 

  • Label과 함꼐 break 사용하기

반복문 안에 또 다른 반복문이 들어 있는 구조를 중첩 반복문이라고 합니다.

 

예를 들어 다음 코드는 바깥쪽 for문과 안쪽 for문이 함께 있습니다.

 

이런 중첩 반복문에서 그냥 break를 사용하면 가장 가까운 반복문 하나만 종료됩니다.

 

즉, 안쪽 반복문에서 break를 쓰면 안쪽 반복문만 끝나고 바깥쪽 반복문은 계속 실행됩니다.

 

그런데 가끔은 안쪽 반복문에서 특정 조건이 발생했을 때 바깥쪽 반복문까지 한 번에 종료하고 싶을 수 있습니다.

 

이때 사용할 수 있는 것이 label입니다.

 

문법은 다음과 같습니다.

labelName: for (...) {
  ...
}

 

outer: for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let input = prompt(`(${i},${j})의 값`, '');

    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
    if (!input) break outer; // (*)

    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('완료!');

 

 


 

3. switch란?

 

switch문은 하나의 값을 여러 경우와 비교해서, 일치하는 case의 코드를 실행하는 조건문입니다.

 

if...else if...else로도 여러 조건을 처리할 수 있지만, 비교하는 값이 하나이고 경우의 수가 많다면 switch문이 더 깔끔할 수 있습니다.

 

문법은 다음과 같습니다.

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}

 

switch문은 하나 이상의 case문으로 구성됩니다. 대개 default문도 있지만 필수는 아니라고 합니다.

let a = "상구";

switch (a) {
  case "철수":
    alert( '상구가 아닙니다.' );
    break;
  case "상구":
    alert( '상구입니다.' );
    break;
  case "영희":
    alert( '상구가 아닙니다.' );
    break;
  default:
    alert( "누구인지 파악이 되지 않습니다." );
}

위 예시를 실행하면 아래 3개의 alert문이 실행됩니다.

alert( '상구입니다.' );
alert( '상구가 아닙니다.' );
alert( "누구인지 파악이 되지 않습니다." );

 

즉 switch문을 사용할때는 break를 잘 활용하는 것이 중요해 보입니다.

 

마무리


 

오늘은 JavaScript의 while, for switch문을 정리해봤습니다.

 

while문은 조건이 참인 동안 계속 반복합니다.

for문은 반복 흐름이 한눈에 보이도록 작성할 수 있습니다.
switch문은 여러 선택지 중 하나를 골라 실행할 때 사용합니다.

 

특히 반복문에서는 조건이 끝날 수 있도록 값을 잘 변경해야 하고,
switch문에서는 break를 빼먹지 않는 것이 중요합니다.

 

정말 썼을 때와는 다르게 또 교과서를 위주로 공부하니 사뭇 다르다라는 생각이 듭니다.

 

알고리즘과 코딩 테스트를 위해서는 이러한 것들이 아주 중요하겠구나 라는 생각이 드는 공부네요.:)

 

공부 화이팅!!

 

 

 

'웹 개발 > Javascript' 카테고리의 다른 글

[JavaScript(8)] 코드품질을 높이는 방법  (0) 2026.05.30
[JavaScript(7)] 함수  (0) 2026.05.30
[JavaScript(5)] 조건문과 논리 연산자  (0) 2026.05.29
[JavaScript(4)] 연산  (0) 2026.05.29
[JavaScript(3)] 자료형  (0) 2026.05.29
'웹 개발/Javascript' 카테고리의 다른 글
  • [JavaScript(8)] 코드품질을 높이는 방법
  • [JavaScript(7)] 함수
  • [JavaScript(5)] 조건문과 논리 연산자
  • [JavaScript(4)] 연산
Sangenie
Sangenie
경제적 자유를 위한 하루 공부.
  • Sangenie
    새싹
    Sangenie
  • 전체
    오늘
    어제
    • 분류 전체보기 (43)
      • AI (0)
        • 하네스 엔지니어링 (0)
      • 웹 개발 (25)
        • Javascript (16)
        • JAVA (9)
      • 토막지식 (1)
      • TIL (7)
      • 경제 (8)
        • 경제뉴스 (7)
        • 비트코인 분석 (1)
      • Library (1)
        • IT (1)
        • Finance (0)
  • 블로그 메뉴

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

  • 공지사항

  • 인기 글

  • 태그

    비트코인
    반복문
    자바
    JavaScript
    til
    프론트엔드
    경제공부
    경제뉴스
    코딩공부
    자바스크립트
    java공부
    가상자산
    조건문
    암호화폐
    java
    개발공부
    TodayILearned
    자바기초
    프론트엔드공부
    객체
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
Sangenie
[JavaScript(6)] 반복문과 switch문
상단으로

티스토리툴바