JS. Switch 조건문

MJ·2022년 8월 26일
0

Java Script

목록 보기
19/57
post-thumbnail

switch문

  • 복수의 if () 조건문을 swtich 로 사용하면 간결하게 작성할 수 있습니다.

  • 특정 변수를 다양한 상황에서 사용할 수 있게 해줍니다.


1. switch 문법

let x;

switch(x) {
       case 'value1': 			// 이는 if (x===value1) 와 일치한지 비교       
    	...
        [break]
    
  		case 'value2':			// if (x===value2) 와 일치한지 비교
    	...
        [break]
    
  		default:
    	...
        [break]
}


/* */
switch(x) 
1) 변수 x에 대한 조건을 지정할 수 있음
  
case 'value1':
1) 변수 x의 값이 'value1' 와 일치 하다면 아래 코드를 수행한다. 
2) 값이 일치하지 않는다면, 다음 케이스문 수행
  
case 'value'2: ...  ~~
1) 변수 x의 값이 'value2'와 일치하다면 아래 코드 수행
2) 일치하지 않다면 다음 케이스문 수행


default:
1) case문과 일치하는 값이 없다면 default의 아래 코드가 실행 된다.
2) if문의 else절과 비슷하다.


/* */
1) case문에서 break를 만나면 반복문을 종료합니다.
2) case에 해당하는 값이 없다면 default문을 실행 합니다.
3) switch문은 하나 이상의 case문이 있어야 합니다.

1.1 switch 사용

let a = 2+2;		// 4

switch(a) {
  case 3:
    alert(' 비교 하려는 값 보다 작습니다 ');
    break;
  
  case 4:		// a(4) === 4와 일치, 조건 만족
    alert(' 비교 하려는 값과 일치합니다 ');	// 수행 됨
    break;
          
  case 5:
    alert(' 비교 하려는 값 보다 큽니다 ');
    break;
    
  default:
 	alert(' 어떤 값인지 파악할 수 없습니다 ');
    break;
}


/* */
swtich(a)
1) a 변수를 가지고 case 또는 default를 수행

case 3:
1) a와 3은 값이 일치하지 않다. 다음 case문 수행 

case 4:
1) a와 4는 값이 일치하다. 아래 함수 실행 후 break를 통해 반복문 종료

1.2 break 지시자가 없는 경우

let a = 2+2;

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


/* */
break가 없는 경우에는 조건문이 종료되지 않는다,, 변수 a값이 case문과 하나라도 일치하다면, 그 아래의 모든 case문과 default문까지 실행 된다.

case 4:
1) a와 4의 값이 일치하기에 아래 함수 수행 > break문이 없기에 case5와 default문 까지 실행하고 종료 됨

코드 확인


1.3 switch 문과 표현식

let a = '1';
let b = 0;

switch(+a) {
  case b+1:
    alert('표현식 +a는 b+1과 일치합니다. (+a=1 , b+1=1)');
    break;
    
  deafult:
    alert('이 코드는 종료됩니다.');
}


/* */
a는 문자열 '1' 이지만, switch(+a)으로 인해, 숫자형 1로 변합니다.
그래서 b+1(0+1)=1 과 일치하는 값이므로 case b+1의 아래코드가 실행됩니다.

2. 여러 개의 case문 묶기

  • 코드가 같은 case문은 묶어서 사용할 수 있습니다.
let a = 3;

switch(a) {
  case 4:
    alert('계산이 맞습니다');
    break;
    
  case 3:
  case 5:
    alert('계산이 틀립니다!');
    alert('다시 계산 해주세요');
    break;
    
  default:
    alert('계산 결과가 이상합니다');
}


/* */
case 3case 5는 동일한 메세지를 보여줍니다.

switch문은 case와 변수의 값이 일치하면, 해당 case문의 아래 코드를 실행하고 break문을
만나기 전 까지 종료되지 않는데요.

a(3) : case(3) 구문에서 값이 일치하여 case(3) 문이 실행되지만 break문이 없기에
조건이 만족하지 않는 case(5)도 실행되고 case(5)break를 만날 때 코드가 종료됩니다.

이러한 문제를 예방하기 위해서는, 항상 break문을 같이 사용해야 합니다.



3. 자료형의 중요성

  • switch문은 일치 비교로 조건을 확인합니다. 이는 비교하려는 값들은 자료형이 같아야
    비교할 수 있습니다.

  • 자료형이 다른 경우에 어떻게 동작하는지 살펴보겠습니다.

let arg = prompt('값을 입력해주세요','');

switch(arg) {
    
  case '0':
  case '1':
    alert('문자열 0 또는 1을 입력하셨습니다');
    break;
    
  case 2:
    alert('이 코드는 실행되지 않습니다');
    break;
    
  default:
    alert('값을 알 수 없습니다');
    
}


/* 해석 */
prompt 함수를 통해서, 사용자가 입력한 값을 문자열로 arg 변수에 반환합니다.

사용자가 0이나 1을 입력했다면
case '0' || case '1'과 일치하므로 alert 구문이 실행됩니다.

사용자가 2를 입력하면 case 2: 가 실행될까요?
실행되지 않습니다. prompt에서 반환된 값은 숫자가 아니라 문자열 '2' 입니다.
case 2:는 숫자형 2이기 때문에 서로 다른 자료형이라 비교할 수 없습니다.

case 조건문이 모두 만족하지 않아서 default 구문이 실행되게 됩니다.



정리

Switch 문은 if ( )문을 여러 상황에서 사용해야 하는 경우, switch/case문으로 대체해서
사용하면 코드량을 간소화 시키고 가독성이 좋게 작성할수 있다.


caseif ( )문의 조건(condition)과 동일한 역할을 한다.

if(a==2)	==	case 2:

switch문에서 a가 조건으로 들어온 경우, 위의 코드는 동일하다.

defaultif ( ) 문의 else절과 동일한 역할을 한다.

if () {

} else { if 조건이 안맞을 시 else 실행

}

switch () {
	
    case 1:
    ...
    break;
    
    default :
    case문과 조건이 일치하는 값이 없을 시, default 실행
}
profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글