Swtich문

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

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

문법

switch문은 하나 이상의 case문으로 구성된다. 대개 default문도 있지만, 이는 필수가 아니다.

EX.

• 변수 x의 값과 첫 번째 case문의 값 'value1'을 일치 비교한 후, 두 번째 case문의 값 'value2'와 비교한다. 이런 과정이 계속 이어진다.
• case문에서 변수 x의 값과 일치하는 값을 찾으면 해당 case문의 아래의 코드가 실행된다. 이때, break문을 만나거나 switch문이 끝나면 코드의 실행은 멈춘다.
• 값과 일치하는 case문이 없다면, default문 아래의 코드가 실행된다.(default문이 있는 경우)

예시

실제 실행 가능한 switch문 예시를 살펴보자.
switch문은 a의 값인 4와 첫번째 case문의 값인 3을 비교한다. 두 값은 같지 않기에 다음 case로 넘어간다.

a와 그 다음 case문의 값인 4는 일치한다. 따라서 break문을 만날 때까지 case 4 아래의 코드가 실행된다.

💡 case문 안에 break문이 없다면?

조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행한다.

break문이 없는 예시

위 예시를 실행하면 아래 3개의 alert문이 실행된다.

💡 switch/case문의 인수에는 어떤 표현식이든 올 수 있다.

여러 개의 'case'문 묶기

코드가 같은 case문은 한데 묶을 수 있다. 다음 예시를 보자.
case 3과 case 5는 동일한 메시지를 보여준다.

switch/case문에서 break문이 없는 경우, 조건에 상관없이 다음 case문이 실행되는 부작용이 발생한다. 위 예시에서는 case 3이 참인 경우에도 12번째 줄의 break문을 만날 때까지 코드는 계속 실행된다.

자료형의 중요성

switch문은 일치 비교로 조건을 확인한다. 비교하려는 값과 case문의 값의 형과 값이 같아야 해당 case문이 실행된다. 다음 예시를 보자.
1. 0이나 1을 입력한 경우, 첫 번째 alert문이 실행된다.
2, 2를 입력한 경우, 두 번째 alert문이 실행된다.
3. 3을 입력하였더라도 세번째 alert문은 실행되지 않는다.

왜❓

입력받은 3은 문자열 '3'이고, 세번째 case문의 값의 자료형은 int형 3이다. 형 자체가 다르기 때문에 case 3 대신 default문이 실행된다.

💻 과제

1. switch문을 if문으로 변환하기

📌 답

if(browser === "Edge") {
	alert("Edge를 사용하고 계시네요!");
} else if(browser === "Chrome" || browser === "Firefox" || browser === "Safari" || browser === "Opera") {
	alert("저희 서비스가 지원하는 브라우저를 사용하고 계시네요.");
} else alert("현재 페이지가 괜찮아 보이길 바랍니다!");

2. if문을 switch문으로 변환하기

📌 답

let a = +prompt('a?', '');

switch(a) {
	case 0:
    	alert(0);
        break;
    case 1:
    	alert(1);
        break;
    case 2:
    case 3:
    	alert('2,3');
        break;
}

이 글은 https://ko.javascript.info/ 를 참고하여 작성하였습니다.