✍ 공부하기 | switch 조건문

안녕하세요! 이번 내용은 조건문 switch에대해 다뤄볼겁니다

아주 기본적인 내용을 다루고 있으며

내용 원본은 모던 자바스크립트 입니다 👉 주소

switch문

저는 다시 한번 제대로 기억 하기위해 위 원본 내용을 그래도 쓰는겁니다

자세한 내용은 원본 사이트에서 확인해주세요!

 

 

 

---

 

 

 

switch문

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

(여기서 모든 의미를 다 함😆 switch를 쓰는 이유는 이 때문이다!!!!)

switch문은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다

문법은 아래와 같습니다

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

1. 변수 x의 값과 첫번째 case문의 값 'value1'를 일치 비교한 후, 두번째 case문의 값 'value2' 와 비교합니다. 이런 과정은 계속 이어집니다
2. case문에서 변수 x의 값과 일치하는 값을 찾으면 해당 case 문의 아래의 코드가 실행됩니다. 이때, break문을 만나거나 switch문이 끝나면 코드의 실행은 멈춥니다
3. 값과 일치하는 case문이 없다면 default문 아래의 코드가 실행됩니다 (default문은 필수가 아니며 없는 경우도 있습니다)

 

아래 예시를 살펴봅시다

let a = 2 + 2 // 4

switch (a) { // 현재 변수 a는 4임
	case 3:  // a가 3이면?
     alert ('비교하려는 값보다 작습니다');  // 실행
     break; 
    
    case 4:  // a가 4이면?
     alert('비교하려는 값과 일치합니다');  // 실행
     break;
     
     case 5: // a가 5이면?
      alert('비교하려는 값보다 큽니다')  // 실행
      break;
      
     default:
      alert("어떤 값인지 파악되지 않습니다");
}

1. 위 switch문은  a의 값인 4와 첫번째 case문의 값인 3을 비교 -> 두 값은 같지 않기 때문에 다음 case문으로 넘어감
2. a와 그 다음 case문의 값인 4는 일치 -> break문을 만날때까지 case 4 아래의 코드가 실행

💥 주의!! case문 안에 break문이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행합니다

✅ switch/case 문의 인수에는 어떤 표현식이든 올 수 있습니다

 

 

 

여러개의 case문 묶기

코드가 같은 case문은 한데 묶을 수 있습니다

let a = 3;

switch (a) {
	case 4:
      alert('맞습니다');
	  break;
     
     // case문 묶기
     case 3:
     case 5:
       alert('틀립니다');
	   break;
       
    default:
       alert('이상합니다');
}

case 3 과 case 5는 동일한 메시지를 보여줍니다

 

 

 

🤔 자료형의 중요성

생각보다 자바스크립트 공부하면서 반환값 자료형이 어떻게 되는지 따져서

다른 코드를 실행해야하는 경우가 많았습니다

모던 자바스크립트에서도 이와 같은 예제를 보여주고 있습니다

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 함수는 반환값이 문자열입니다

그래서 case '0', case '1'은 실행되지만 case 3은 실행되지 않습니다

만약 사용자가 3을 입력하면 case 3과 형 자체가 다르기에 아래 코드는 실행되지 않습니다

대신 default문이 실행됩니다

이런식으로 switch문을 쓸 수 있다는걸 알고 계시면 다양하게 응용해서 유용하게 쓸 수 있을겁니다!

 

 

 

🤗 마무리

개인적으로  switch문을 잘 모르고 있었습니다

if문이 있는데 굳이 다른 반복문 쓸 일이 있나? 싶은 생각이 컸고....

음... 그냥 switch를 잘 모르니까 조건문을 쓸 때 다른 방식을 써야겠다는 생각을 아예 못하고

여러개의 if문을 작성했었습니다 🤣

(이게 진짜 저세상의 가독성을 보여줍니다...)

이젠 변수에 무슨 값이 들어오냐에따라 각각 다른 코드가 실행되어야한다면

switch문을 써서 가독성에 신경써야겠습니다

하나의 변수로...여러개... 반복되는 if문.... 멈춰!