switch문 (switch statement)

어떤 대상과 조건값이 일치하는지를 확인하고 그 결과에 따라 다른 동작이 필요할때는 switch문을 활용할 수 있다.

switch (비교할_값){
	case 조건값_1:
    	동작부분; // 비교할_값과 조건값_1이 일치하면 동작 
        break;  // switch문을 빠져나오는 기능 
    case 조건값_2:
    	동작부분;
        break;
    default: 
    	동작부분; // 비교할_값이 모든 조건과 일치하지 않을때 동작할 코드 작성
                   (else와 유사함, 필요 없을 경우에는 생략 가능) 
    } 

예시를 보고 switch문을 직접 작성해보자.

let myChoice = 2; 
switch(myChoice){
  case 1:
  	console.log('연어구이를 선택한 분은 이쪽으로 오시면...') 
    break; 
  case 2: 
  	console.log('소고기를 선택한 분은 이쪽으로 오시면...') 
    break; 
  case 3: 
  	console.log('삼겹살을 선택한 분은 이쪽으로 오시면...') 
    break; 
  default: 
  	console.log('세가지 메뉴중에 하나 꼭 골라주세요');
 } 

선택지를 담아둘 변수를 하나 만들고(let myChoice;) 2번을 선택할때는 숫자2를 할당해준다. 변수를 switch문의 비교할 값에 넣어주면 case 2에 해당하는 '소고기를 선택한 분은 이쪽으로 오시면...'이 출력된다.
만약 break를 삭제하고 실행해보면 case1을 제외한 case2부터 모든 동작이 실행되고 값이 출력된다. ('소고기를 선택한 분은 이쪽으로 오시면...' '삼겹살을 선택한 분은 이쪽으로 오시면...' '세가지 메뉴중에 하나 꼭 골라주세요') 조건값과 일치하는 조건을 찾은 다음에는 break문을 만날때까지 모든 동작을 실행하게 된다. 그러므로 break문을 작성해야 안정적인 코드를 만들 수 있다.

if문 vs switch문

if문을 활용하면 switch문을 if문으로 대체할 수도 있다.

let myChoice = 2;
switch(myChoice) {
  case 1:
    console.log('연어구이를 선택한 분은 이쪽으로 오시면...');
    break;
  case 2:
    console.log('소고기를 선택한 분은 이쪽으로 오시면...');
    break;
  case 3:
    console.log('삼겹살을 선택한 분은 이쪽으로 오시면...');
    break;
  default:
    console.log('세가지 메뉴중에 하나 꼭 골라주세요');
}

if (myChoice === 1) {
  console.log('연어구이를 선택한 분은 이쪽으로 오시면...');
} else if (myChoice === 2) {
  console.log('소고기를 선택한 분은 이쪽으로 오시면...');
} else if (myChoice === 3) {
  console.log('삼겹살을 선택한 분은 이쪽으로 오시면...');
} else {
  console.log('세가지 메뉴중에 하나 꼭 골라주세요');
}

위의 두 코드는 동작이 동일하게 일어난다. 그런데 보면 if문의 경우 myChoice를 조건 값과 함께 비교하는 조건식을 매번 작성해야 하는 번거로움도 있고, 코드 길이만 봤을 땐 좀 더 간결한 것 같지만, switch문이 가독성이 더 우수하다는 것을 알수 있다.
if문과 switch문 모두 특정한 조건에 따라 다르게 동작하는 코드를 만들 수 있지만, 어떤 넓은 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 좀 더 효과적이고 특정한 값에 일치하는 조건을 만들 때는 switch문이 좀 더 효과적이다.

switch문 주의사항

switch문을 작성할때 주의할 점은 조건식에서 등호를 반드시 3개 입력해 주어야 한다는 점이다. switch문은 암시적 형 변환을 허용하지 않는다. 아래의 예를 확인해보자.

let myChoice = '2';
switch(myChoice) {
  case 1:
    console.log('연어구이를 선택한 분은 이쪽으로 오시면...');
    break;
  case 2:
    console.log('소고기를 선택한 분은 이쪽으로 오시면...');
    break;
  case 3:
    console.log('삼겹살을 선택한 분은 이쪽으로 오시면...');
    break;
  default:
    console.log('세가지 메뉴중에 하나 꼭 골라주세요');
}

if (myChoice === 1) {
  console.log('연어구이를 선택한 분은 이쪽으로 오시면...');
} else if (myChoice === 2) {
  console.log('소고기를 선택한 분은 이쪽으로 오시면...');
} else if (myChoice === 3) {
  console.log('삼겹살을 선택한 분은 이쪽으로 오시면...');
} else {
  console.log('세가지 메뉴중에 하나 꼭 골라주세요');
}

위의 경우처럼 변수 myChoice에 숫자2가 아닌 문자열 2를 할당하고 실행시켜보면 switch문의 경우 default문이 실행되어서 '세가지 메뉴중에 하나 꼭 골라주세요'가 출력되고 if문 역시 else문이 실행되어 같은 값이 출력된다.

그런데 이 상태에서 if문을 '==='을 등호 두 개(==)로 비교하면 어떻게 될까?

let myChoice = '2';
switch(myChoice) {
  case 1:
    console.log('연어구이를 선택한 분은 이쪽으로 오시면...');
    break;
  case 2:
    console.log('소고기를 선택한 분은 이쪽으로 오시면...');
    break;
  case 3:
    console.log('삼겹살을 선택한 분은 이쪽으로 오시면...');
    break;
  default:
    console.log('세가지 메뉴중에 하나 꼭 골라주세요');
}

if (myChoice == 1) {
  console.log('연어구이를 선택한 분은 이쪽으로 오시면...');
} else if (myChoice == 2) {
  console.log('소고기를 선택한 분은 이쪽으로 오시면...');
} else if (myChoice == 3) {
  console.log('삼겹살을 선택한 분은 이쪽으로 오시면...');
} else {
  console.log('세가지 메뉴중에 하나 꼭 골라주세요');
}

if문의 경우는 문자열 2가 들어가도 동등 비교가 이루어지면 true라는 결과가 나오기 때문에, 위의 코드를 실행해보면 switch는 default문이 실행되어서 '세가지 메뉴중에 하나 꼭 골라주세요'가 출력되고 if문은 '소고기를 선택한 분은 이쪽으로 오시면...'이 출력된다.
switch문은 값들을 비교할 때 자료형을 엄격하게 구분한다는 것과 if문으로 대체할 때는 반드시 등호 3개(===)로 일치비교를 해야한다는 것을 꼭 기억해두어야 한다.