2-14 switch 문

bi_sz·2020년 5월 25일
0

JavaScript

목록 보기
17/22
post-custom-banner

switch 문

복수의 if 조건문은 switch문으로 바꿀 수 있다.

switch 문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다.
코드 자체가 비교 상황을 잘 설명한다는 장점도 있다.

1. 문법

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 문이 있는 경우) .

2. 예시

실제 실행 가능한 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 문 아래의 코드가 실행된다.

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

위 예시에서 case 3 이 참인 경우엔 ( * ) 로 표시한 줄 아래의 코드가 실행되는데,
그 아래 줄엔 case 5 가 있고 break 문도 없기 때문에
12번째 줄의 break 문을 만날 때까지 코드는 계속 실행된다.

4. 자료형의 중요성

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 문이 실행된다.

본문 : https://ko.javascript.info/switch

profile
https://li-yo.tistory.com/ 티스토리 블로그 이전 하였습니다.
post-custom-banner

0개의 댓글