[모던JS] 018. [기본] switch문

원문

switch문은 if문을 중첩할 때 대체하여 사용한다. if문을 여러번 중첩하는 것보다 비교 상황을 잘 설명한다는 장점이 있다.

switch문 기본형

switch (변수) {
  case 값1:
    // 변수가 값1과 일치할 때 실행되는 코드
    [break];
  case 값2:
    // 변수가 값2와 일치할 때 실행되는 코드
    [break];
  case 값3:
    // 변수가 값3과 일치할 때 실행되는 코드
    break;
  [default]:
    // 위의 case에 해당하지 않을 때 실행되는 코드
    // 필수 아님 생략 가능
}

대괄호는 필수 지시자가 아니라는 의미이다. 생략해도 된다. 만약 중간에 break가 없으면 이 이후의 코드가 break를 다시 만날 때까지 다른 case를 계속 실행한다.

만약 default를 생략하였고 일치하는 케이스가 하나도 없는 경우에는 undefined를 반환한다.

switch문 예제

let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
    break;
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
    break;
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
    break;
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
} // 비교하려는 값과 일치합니다.

만약 위 코드에서 break문 전부 생략한다면, case가 변수 a의 값과 일치하는 두번째 케이스부터 마지막 dafault까지 전부 실행된다.

let a = 2 + 2;

switch (a) {
    case 3: 
        alert('비교하려는 값보다 작습니다.');
    case 4:
        alert('비교하려는 값과 일치합니다.');
    case 5:
        alert('비교하려는 값보다 큽니다.');
    dafault:
        alert('어떤 값인지 파악이 되지 않습니다.');
}
// 비교하려는 값과 일치합니다.
// 비교하려는 값보다 큽니다.
// 어떤 값인지 파악이 되지 않습니다.

switch문 특징

다양한 표현식 인수 설정 가능

swith/case 문에는 인수로 꼭 숫자가 아니어도 다양한 표현식이 올 수 있다.

let a = "1";
let b = 0;

switch (+a) {
    case: b + 1:
        alert("실행완료");
        break;

    default:
        alert("실행불가");
} // 실행완료

위 코드를 보면 swith의 인수로 a를 숫자형으로 형 변환하는 단항 덧셈 연산자가 왔고, case의 인수로는 b + 1이라는 표현식이 왔다.

case 통합 가능

만약 case의 코드가 같다면 하나로 묶을 수도 있다.

let a = 3;

switch (a) {
    case 4:
        alert('계산이 맞습니다.');
    case 3:
    case 5:
        alert('계산이 틀립니다.');
        break;

    default:
        alert('계산 결과가 이상하네요.');
}

위의 코드를 보면 case 3:과 case 5:를 코드가 같기 때문에 하나로 묶었다.

swith에서 비교하려는 변수와 case의 자료형 일치

switch문을 비교하려는 변수의 값과 case에서 비교하려는 값도 같아야 하지만, 자료형도 같아야 한다.

예를들어 변수의 값이 문자 "3"인데, case: 3으로 비교해도 자료형이 다르기 때문에 일치하지 않는다고 본다.

let arg = prompt("값을 입력해주세요.");
switch (arg) {
  case '0':
  case '1':
    alert( '0이나 1을 입력하셨습니다.' );
    break;

  case '2':
    alert( '2를 입력하셨습니다.' );
    break;

  case 3:
    alert( '이 코드는 절대 실행되지 않습니다!' );
    break;
  default:
    alert( '알 수 없는 값을 입력하셨습니다.' );
}

연습문제

1. 아래 switch문을 if...else 문으로 바꿔보시오.

switch (browser) {
  case 'Edge':
    alert( "Edge를 사용하고 계시네요!" );
    break;

  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( '저희 서비스가 지원하는 브라우저를 사용하고 계시네요.' );
    break;

  default:
    alert( '현재 페이지가 괜찮아 보이길 바랍니다!' );
}

2. 아래 코드를 switch문을 사용한 코드로 바꿔보시오. switch문은 하나만 사용해야 합니다.

let a = +prompt('a?', '');

if (a == 0) {
  alert( 0 );
}
if (a == 1) {
  alert( 1 );
}

if (a == 2 || a == 3) {
  alert( '2,3' );
}

해답

1.  

let browser = prompt('이용 중인 브라우저를 입력해주세요.','');

if(browser == 'Edge') {
  alert("Edge를 사용하고 계시네요!");
} else if (browser == 'Chrome'
 || browser == 'Firefox'
 || browser == 'Safari'
 || browser == 'Opera') {
  alert( '저희 서비스가 지원하는 브라우저를 사용하고 계시네요.' );
} else {
  alert( '현재 페이지가 괜찮아 보이길 바랍니다!' );
}

위 코드를 보면 if () {}에서 Edge일 때를 확인하고 있고, 나머지 파이어폭스, 사파리, 오페라에서는 '지원하는 브라우저'라는 문구를 출력하고 있다.

if (browser == 'Chorme' || browser == 'Safari' || browser == 'Opera') {
    alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.');
}

위와 같은 내용이다. 그런데 가독성을 위해서 ||를 기준으로 한 라인에 나눠서 작성해둔 형태이다.

2.  

let a = +prompt('a?', '');

switch (a) {
    case 0:
        alert(0);
        break;
    case 1:
        alert(1);
        break;
    case 2:
    case 3:
        alert('2,3');
        break;
}

case 3:은 마지막 case로 break를 넣지 않아도 동일하게 작동하지만 추후에 case 4: 등 계속 추가하는 과정이 생길 수 있으므로 습관적으로 break를 넣어주는 것이 에러를 방지하기 위한 팁이다.