switch문

해당 공부는 아래의 링크를 보며 작성하였습니다. 전 쓰면서 공부해야 공부가 되는 타입이라 해당 내용은 동일합니다. 다만 초보자로 제가 이해 안되는 부가 설명은 더 적어놧습니다.
https://ko.javascript.info/switch#ref-89

switch문

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

문법

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

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

    case 'value2':  // if (x === 'value2')
      ...
      [break]

    default:
      ...
      [break]
  }

예시

실제 실행 가능한 switch문 예시

  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( "어떤 값인지 파악이 되지 않습니다." );
  }

위 예시를 실행할 경우 아래 3개의 alert문이 실행됩니다.

  alert( '비교하려는 값과 일치합니다.' );
  alert( '비교하려는 값보다 큽니다.' );
  alert( "어떤 값인지 파악이 되지 않습니다." );

switch/case 문의 인수엔 어떤 표현식이든 올 수 있습니다.

switch 문과 case 문은 모든 형태의 표현식을 인수로 받습니다.

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

switch (+a) {
  case b + 1:
    alert("표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행됩니다.");
    break;

  default:
    alert("이 코드는 실행되지 않습니다.");
}

표현식 +a를 평가하면 1이 됩니다. 여기서 전 실수했는데 ++ 와 +를 혼동하지 말아야합니다. 이 값은 첫번째 case문의 표현식 b+1을 평가한 값 (1)과 일치하죠, 따라서 첫 번째case문 아래의 코드가 실행됩니다.

여러 개의 "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문이 실행되는 부작용이 발생합니다.

제가 이 부분에서 이해한 내용은

• break를 쓰지 않음으로 아래의 case문을 실행하도록 유도할 수 있다.
• 고의로 break를 쓰지 않는 경우가 있다.

자료형의 중요성

switch문은 일치 비교로 조건을 확인합니다. 비교하려는 값과 case문의 값의 형과 값이 같아야 해당 case문이 실행됩니다.
예시를 통해 switch문에서 자료형이 얼마나 중요한지 살펴보도록 합시다.

let arg = prompt("값을 입력해주세요.");
switch (arg) {
  case '0':
  case '1':
    alert( '0이나 1을 입력하셨습니다.' );
    break;

  case '2':
    alert( '2를 입력하셨습니다.' );
    break;

  case 3:
    alert( '이 코드는 절대 실행되지 않습니다!' );
    break;
  default:
    alert( '알 수 없는 값을 입력하셨습니다.' );
}

자료형인 prompt을 사용하여 값을 받아서 맞는 형태의 케이스를 적용시킬 수 있다.