JavaScript [switch문]

복수의 if 조건문은 switch 문으로 바꿀 수 있습니다.

switch 문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다. 코드 자체가 비교 상황을 잘 설명한다는 장점도 있습니다.

 

 

문법

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

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

• 변수 x의 값과 첫 번째 case 문의 값 'value'1'를 일치 비교한 후, 두 번째 case문의 값 'value2'와 비교합니다. 이런 과정은 계속 이어집니다.
• 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의 값인 4와 첫 번째 case 문의 값인 3을 비교합니다. 두 값은 같지 않기 때문에 다음 case 문으로 넘어갑니다.

a와 그다음 case 문의 값인 4는 일치합니다. 따라서 break문을 만날 때까지 case 4 아래의 코드가 실행됩니다.

case문 안에 break 문이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case 문을 실행합니다.

break문이 없는 경우의 예시를 보겠습니다.

let a = 2 + 2;

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

이 코드를 실행하면 default를 제외한 case 3개의 alert가 실행됩니다.

 

여러 개의 'case'문 묶기

코드가 같은 case문은 하나에 묶을 수 있습니다.

case 3과 case 5 에서 실행하려는 코드가 같은 경우에 대한 예시를 살펴보겠습니다.

let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

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

 

case 3과 case 5는 동일한 메세지를 보여줍니다.

switch / case 문에서 break가 없는 경우 조건에 상관없이 다음 case가 실행됩니다. 위 예시에서 case 3의 경우 바로 case 5가 실행되는데, 그 아래 줄엔 case 5가 있고 break가 있기 때문에 여기서 멈추게 됩니다.

 

 

자료형의 중요성

switch 문은 일치 비교로 조건을 확인합니다. 비교하려는 값과 case 문의 값의 형과 값이 같아야 case문이 실행됩니다.

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. 0, 1을 입력한 경우엔 첫 번째 alert이 실행됩니다.
2. 2 를 입력한 경우 두 번째 alert가 실행됩니다.
3. 3 을 입력한 경우 세 번째 alert가 실행되지 않습니다. prompt는 문자열로 반환하기 때문에 숫자열 3으로 적은 case 3과 같지 않기 때문입니다.
4. default 는 0~2가 아닌 숫자를 입력했을 때 실행됩니다. 앞서 3을 적으면 이 코드의 alert가 실행됩니다.

 

 

실습

switch 문을 if 문으로 변환해보세요

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

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

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

변환

let browser = prompt('어떤 브라우저를 사용하시나요?' , ''); 

if (browser == 'Edge'){
	alert("Edge를 사용하고 계시네요!");
    } else if ( browser == 'Chrom' || 'Firefox' || 'Safari' || '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 :
    	alert(0);
    	break;
    case 1 :
    	alert(1);
        break;
    case 2:
    case 3:
    	alert('2,3');
        break;