[JS] switch문

switch 문을 사용하는 이유

조건문 중 하나에 속한다. if문 보다 간결성과 가독성이 좋다. 다양한 조건에 따라 서로 다른 구문을 수행해야 할 때 사용한다.

• 예 : 과일 가격 알려주기, 테마 고르기, 방향에 따른 캐릭터의 움직임, 평가된 값에 따라 변환을 해주어야 할 때

switch문은 조건이 많아져도 인터럭션(*CPU가 명령을 수행하기 위해서 메모리 상에서 명령어를 읽어오는 과정)이 늘어나지 않으므로 조건이 많은 경우에는 switch문을 사용하는 것이 if문을 사용하는 것보다 더 좋다고 할 수 있다. 

 

switch syntax

switch문은 ===를 사용해서 엄격하게 비교한다. (===, using the strict comparison)

switch (expression) {
  case value1:
    // expression과 value1이 일치하면 실행
    // 여러개의 value와 같다면 첫번째 case가 선택됨
    [break;]
  case value2:
    // expression과 value2이 일치하면 실행
    [break;]
  ...
  case valueN:
    // optional
    // expression과 valueN이 일치하면 실행
    [break;]
  [default:
    // optional
    // expression과 value가 아무것도 일치하지 않으면 실행
    // default문이 없으면 switch문이 끝나는데로 종료함
    // default문은 마지막에 쓰는게 보편적이나 항상 그러지는 않아도 됨
    [break;]]
}

 

switch문과 if문 비교

모든 switch문을 if문으로 바꿀 수 있으나, 모든 if문을 switch문으로 바꿀 수는 없다. 

// switch문
const fruit = 'watermelon';
switch (fruit) {
  case "apple":
    console.log("사과는 1개에 1,500원입니다.");
    break;
  case "banana":
    console.log("바나나는 1송이에 3,000원입니다.");
    break;
  case "watermelon":
    console.log("수박은 1통에 15,000원입니다.");
    break;
  default:
    console.log("찾으시는 과일이 저희 가게에는 없습니다.");
}

 

// if문
const fruit = 'watermelon';
if (fruit === "apple") {
  console.log("사과는 1개에 1,500원입니다.");
} else if (fruit === "banana") {
  console.log("바나나는 1송이에 3,000원입니다.");
} else if (fruit === "watermelon") {
  console.log("수박은 1통에 15,000원입니다.");
} else {
  console.log("찾으시는 과일이 저희 가게에는 없습니다.");
}

 

switch문에서는 이렇게 비교는 할 수 없다.

const number = 5;
switch (number) {
  case number > 1:
  console.log('case 1') // 실행안됨
  break;
  case number > 3:
  console.log('case 2') // 실행안됨
  break;
  case 5:
  console.log('case 3') //실행
}

 

 

이렇게 활용할 수 있다.

// 다양하게 파라미터를 받을 수 있도록 함수 안에 넣어봄
function howMuchIsTheFruit(fruit) {
  switch (fruit) {
    case "apple":
      console.log("사과는 1개에 1,500원입니다.");
      break;
    case "banana":
      console.log("바나나는 1송이에 3,000원입니다.");
      break;
    case "watermelon":
      console.log("수박은 1통에 15,000원입니다.");
      break;
    default:
      console.log("찾으시는 과일이 저희 가게에는 없습니다.");
  }
}

 

break문

break문이 없으면 조건이 충족되는 case부터 실행되며 이후는 조건 충족여부 상관없이 구문이 끝날 때까지 실행된다. 원하는 결과만 출력하고 싶다면 잊지 말고 break문을 넣어줘야한다.

// break문이 없을 때
// 조건이 충족되는 case부터 실행되며 이후는 조건 충족여부 상관없이 구문이 끝날 때까지 실행됨
function howMuchIsTheFruit(fruit) {
  switch (fruit) {
    case "apple":
      console.log("사과는 1개에 1,500원입니다.");
    case "banana":
      console.log("바나나는 1송이에 3,000원입니다.");
    case "watermelon":
      console.log("수박은 1통에 15,000원입니다.");
    default:
      console.log("찾으시는 과일이 저희 가게에는 없습니다.");
  }
}

howMuchIsTheFruit("banana")
// 바나나는 1송이에 3,000원입니다.
// 수박은 1통에 15,000원입니다.
// 찾으시는 과일이 저희 가게에는 없습니다.

 

default문

default문이 없을 때는 value와 일치하는 것이 없으면 아무것도 실행되지 않는다.

// default문이 없을 때 : value와 일치하는 것이 없으면 아무것도 실행되지 않음
function howMuchIsTheFruit(fruit) {
  switch (fruit) {
    case "apple":
      console.log("사과는 1개에 1,500원입니다.");
    case "banana":
      console.log("바나나는 1송이에 3,000원입니다.");
    case "watermelon":
      console.log("수박은 1통에 15,000원입니다.");
  }
}

howMuchIsTheFruit("kiwi")
// undefined

 

Multi-case : single operation

여러 case에서 출력해야하는 값이 같다면 겹쳐서 쓸 수 있다.

const Animal = 'Giraffe';
switch (Animal) {
  case 'Cow':
  case 'Giraffe':
  case 'Dog':
  case 'Pig':
    console.log('This animal is not extinct.'); // 같은 기능을 할 때 case를 한번에 쓸 수 있음
    break;
  case 'Dinosaur':
  default:
    console.log('This animal is extinct.');
}

 

 

위의 문법을 적용해 아까 만든 howMuchIsTheFruit함수에 배와 사과가 가격이 같다면 이렇게 적을 수 있다.

function howMuchIsTheFruit(fruit) {
  switch (fruit) {
    case "apple":
    case "pear":
      console.log("사과와 배는 1개에 1,500원입니다.");
    case "banana":
      console.log("바나나는 1송이에 3,000원입니다.");
    case "watermelon":
      console.log("수박은 1통에 15,000원입니다.");
    default:
      console.log("찾으시는 과일이 저희 가게에는 없습니다.");
  }
}

 

Multi-case : chained operations

break문을 적절히 사용하여 입력에 따라 다른 출력을 얻을 수 있다.

const foo = 1;
let output = 'Output: ';
switch (foo) {
  case 0:
    output += 'So '; // So What Is Your Name?
  case 1:
    output += 'What '; // What Is Your Name?
    output += 'Is ';
  case 2:
    output += 'Your '; // Your Name?
  case 3:
    output += 'Name'; // Name?
  case 4:
    output += '?'; // ?
    console.log(output);
    break;
  case 5:
    output += '!'; // !
    console.log(output);
    break;
  default:
    console.log('Please pick a number from 0 to 5!');
}

 

switch의 스코프

한 switch문에서 동일한 변수를 선언하면 동일 블록 스코프라서 message가 중복 선언되어 오류가 난다.

const action = 'say_hello';
switch (action) {
  case 'say_hello':
    let message = 'hello';
    console.log(message);
    break;
  case 'say_hi':
    let message = 'hi';
    console.log(message);
    break;
  default:
    console.log('Empty action received.');
}

 

{ }로 개별 스코프를 만들어주면 된다.

// 해결방법
switch (action) {
  case 'say_hello':{
    let message = 'hello';
    console.log(message);
    break;}
  case 'say_hi':{
    let message = 'hi';
    console.log(message);
    break;}
  default:
    console.log('Empty action received.');
}

 

 

사용 예시

let day;
switch (new Date().getDay()) { // 오늘 요일을 받아옴
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerText = "Today is " + day; // 받아온 요일을 더한 문자열을 출력