[JavaScript] The Modern JavaScript Tutorial - (2-14) The "switch" statement

switch문

복수의 if문은 switch문으로 변경할 수 있다.

 

문법

switch문은 하나 이상의 case문으로 구성된다. default문도 있으나, 필수는 아니다.

switch(x) {
    case 'value1':  // if (x === 'value1')
        break;
    case 'value2':
        break;
    case 'value3':
        break;
    default:
        break;
}

• 변수 x의 값과 case의 값을 일치 비교한다.
• x의 값과 일치하는 값을 찾으면 해당 case문 아래의 코드가 실행된다. 이때, break문을 만나거나 switch문이 끝나면 코드의 실행이 멈춘다.
• 일치하는 case가 없다면 default문 아래의 코드가 실행된다. (단, default문이 있는 경우에만)

 

예시

let a = 2 + 2;

switch(a) {
    case 3:
        alert('비교하려는 값보다 작습니다.');
        break;
    case 4:     // 여기서부터 실행된다.
        alert('비교하려는 값과 일치합니다.');
        break;  // 여기서 종료된다.
    case 5:
        alert('비교하려는 값보다 큽니다.');
        break;
    default:
        alert('어떤 값인지 파악되지 않습니다.');
}

switch(a) {
    case 3:
        alert('비교하려는 값보다 작습니다.');
    case 4:     // 여기서부터 실행된다.
        alert('비교하려는 값과 일치합니다.');
    case 5:
        alert('비교하려는 값보다 큽니다.');
    default:
        alert('어떤 값인지 파악되지 않습니다.');
}               // 여기서 종료된다.

case문 안에 break가 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행하게 됨에 유의하자.

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

switch (+a) {
    case b + 1:
        alert("표현식 +a는 1, 표현식 b + 1은 1이므로 이 코드가 실행된다.");
        break;
    default:
        alert("이 코드는 실행되지 않는다.");
}

switch/case문의 인수에는 어떤 표현식이든 올 수 있다.

 

여러 개의 "case"문 묶기

let a = 3;

switch(a) {
    case 4:
        alert('Right!');
        break;

    case 3:
    case 5:
        alert("Wrong!");
        alert("Why don't you take a math class?");
        break;

    default:
        alert("The result is strange. Really.");
}

 

자료형의 중요성

switch문은 일치 비교로 조건을 확인한다. → 비교하려는 값과 case문의 값의 형과 값이 같아야 해당 case문이 실행된다.

let arg = prompt("값을 입력해 주세요.");
switch (arg) {
    case '0':
    case '1':
        alert('0 or 1');
        break;
    case '2':
        alert('2');
        break;
    case 3:
        alert('Never executes!');
        break;
    default:
        alert('An unknown value');
        break;
}

prompt를 통해 3을 입력해도, prompt는 문자열 '3'을 반환하기 때문에 case 3:은 절대 실행될 일이 없음에 유의한다.

 

과제

"switch"문을 "if"문으로 변환하기

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

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

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

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

"if"문을 "switch"문으로 변환하기

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

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

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

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

switch (a) {
    case 0:
    case 1:
        alert(a);
        break;

    case 2:
    case 3:
        alert('2,3');
        break;
}

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial