본문 바로가기

JavaScript

[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문의 값 'value1'를 일치 비교한 후, 두 번째 case문의 'value2'와 비교한다.

case문에서 변수x의 값과 일치하는 값을 찾으면 해당 case문의 아래 코드가 실행된다. 이때, break문을 만나거나 switch문이 끝나면 코드의 실행은 멈춘다.

값과 일치하는 case문이 없다면, default문 아래의 코드가 실행된다.(default문이 있는 경우)

 

예시 / case4 출력

let a = 2 + 2;

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

 

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

: 표현식  +a를 평가하면 1이된다. 이 값은 첫번째 case표현식인 1과 일치하여 첫 번째 case문의 코드가 실행된다.

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

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

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

 

- 여러개 case문 묶기

: case3과 case5에서 실행하려는 코드가 같은 경우에 break없이 묶어 동일한 코드가 실행되도록 할수 있다.

let a = 3;

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

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

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

 

- 자료형의 중요성

: 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( '알 수 없는 값을 입력하셨습니다.' );
}
  • 0이나 1을 입력한 경우엔 첫 번째 alert문이 실행.
  • 2를 입력한 경우엔 두 번째 alert문이 실행.
  • 3을 입력하였더라도 세 번째 alert문은 실행되지 않는다. 앞서 배운 바와 같이 prompt 함수는 사용자가 입력 필드에 기재한 값을 문자열로 변환해 반환하기 때문에 숫자 3을 입력하더라도 prompt 함수는 문자열 '3'을 반환한다. 그런데 세 번째 case문에선 사용자가 입력한 값과 숫자형 3을 비교하므로, 형 자체가 다르기 때문에 case 3 아래의 코드는 절대 실행되지 않고, 대신 default문이 실행.

'JavaScript' 카테고리의 다른 글

[JavaScript] 함수 표현식  (0) 2022.04.24
[JavaScript] 함수  (0) 2022.04.24
[JavaScript] 반복문의 출력값 예상하기  (0) 2022.04.24
[JaveScript] nullish 병합 연산자 '??'  (0) 2022.04.23
[JavaScript] 논리 연산자  (0) 2022.04.23