[Javascript] 여러가지 경우를 한번에! switch case 사용법

조건문을 사용하는 방법에 대해서는 앞선 포스팅에서 다뤄봤습니다. 조건문 if는 true인지 false인지를 판단해서 그에 따라 프로그래밍이 실행되도록 만들어 보았습니다.

2021.04.16 - [쿤즈 Dev/HTML & CSS & Javascript] - [Javascript] 조건문 if ... else 사용 방법

조건문 if를 통해서도 여러 가지 조건을 만들어서 분기시킬 수 있는 반면, 오늘 알아볼 switch case 문법을 이용하면 조건의 결과에 따라서 다양한 처리를 할 수 있는 문법입니다.

오늘 포스팅에서는 switch case 문법에 대해서 알아보도록 하겠습니다.

---

switch case 사용 방법

먼저 switch case 문법의 사용 방법은 아래와 같습니다.

switch ( 변수 || 표현식 ) {
  case value1 :
    // body1
    break;
  case value2 :
    // body2
    break;
  ...
  default:
    break;
}

switch case 문법은 2가지로 분류됩니다.

먼저 switch에는 변수나 표현식, 즉 조건이 올 수 있습니다. 이 변수의 값에 따라서 case가 선택됩니다.

case는 여러가지 경우를 설정할 수 있는 것이라 생각하시면 됩니다. 다만 break와 동반되어 사용해야 합니다. 왜 그래야 하는지는 예제를 통해서 알아볼게요.

---

소스코드 1. switchcase1.js

let num = 2;

switch (num) {
    case 0:
        console.log("0");
        break;
    case 1:
        console.log("1");
        break;
    case 2:
        console.log("2");
        break;
    default:
        console.log("음수");
        break;
}

console.log("switch case end");

결과 1.

2
switch case end

위 switch case에서 보면 num 값은 2로 초기화했습니다. 그리고 siwtch에서 확인할 값을 num으로 입력했어요. 순서대로 따라가 보겠습니다.

case 0 : num값은 0이 아니므로 이 경우는 넘어갑니다.

case 1 : num값이 1이 아니므로 이 경우 역시 넘어갑니다.

case 2 : num값이 2이고 case가 2이므로 내부 로직으로 들어가서 2를 출력합니다. 그리고 break가 있기 때문에 switch case 문법을 빠져나오게 됩니다.

 

아주 간단한 문법입니다. 마치 여러개의 if문을 만들어 놓은 것과 비슷한 느낌이 드네요.

 

만약 break문이 없다면 어떻게 될까요?

---

소스코드 2. switchcase_nobreak.js

let num = 2;

switch (num) {
    case 0:
        console.log("0");
    case 1:
        console.log("1");
    case 2:
        console.log("2");
    default:
        console.log("음수");
}

console.log("switch case end");

결과 2.

2
음수
switch case end

break가 없을경우에는 조건에 맞는 case 이후의 모든 case가 실행됩니다. 위 소스에서는 2와 default가 실행된 모습을 보실 수 있어요. 그래서 상황에 따라 다르겠지만 조건에 일치하고 그 이후에는 switch 문을 빠져나오고 싶다면 반드시 break문을 사용하도록 합니다.

 

다음은 문자열을 이용해서 switch case문을 만들어 볼게요.

---

소스코드 3. switchcase_string.js

let device = "ipad";

switch (device) {
    case "iphone":
    case "galaxy":
        console.log(`${device} is phone.`);
        break;
    case "ipad":
    case "tab":
        console.log(`${device} is tablet.`);
        break;
    default:
        console.log(`${device} is computer.`);
        break;
}

console.log("switch case end");

결과 3.

ipad is tablet.
switch case end

소스코드 3은 문자 또는 문자열을 이용한 switch case의 예제입니다. 최초 입력된 ipad는 두 번째 case 문의 값과 일치합니다. 여기서 case 여러 개를 이어서 사용한 것은 or의 의미입니다. 여러 개 중에 하나라도 일치하면 case 내부를 실행합니다.

---

이번 포스팅에서는 Javascript에서 사용하는 switch case 문법에 대해서 알아보았습니다. 조건문과 같이 사용할 수 있는 문법이지만 어떻게 사용하느냐에 따라서 if문보다 훨씬 간결하고 편하게 사용할 수도 있는 문법입니다. 도움이 되셨으면 합니다. 이상입니다.