[Javascript] switch문
📌 참고 사이트
switch문
ko.javascript.info
📋 switch문
➡️ 복수의 if를 사용한 조건문은 switch문으로 바꿀 수 있다. (if문만이 여러 개 있는 것을 말한다. elif X!)
➡️ switch문은 특정 변수를 다양한 상황에서 비교할 수 있게 해주고, 코드 자체가 비교 상황을 잘 설명해 준다.
📍 문법
switch(변수명)으로 시작하여 하나 이상의 case문으로 구성되고, 마지막의 default 문은 옵션이다.
switch(x) {
case 'value1': // if (x === 'value1')과 동일
.....
[break]
case 'value2': // if (X === 'value2')와 동일
.....
[break]
default:
.....
[break]
}
➡️ 변수 x의 값과 case문의 값을 맨 위에 위치한 case문부터 차례로 비교해나간다.
➡️ 비교해서 변수 x의 값과 일치하면 해당 case문의 아래에 위치한 코드가 실행되는데, 그것이 break문이거나 switch문이 끝나는 부분이면 코드의 실행이 멈춘다.
➡️ 같은 값이 없어 마지막으로 default문을 만난다면 default문 아래의 코드가 실행된다.
📍 default문을 사용한 예시
💻 break문이 있는 경우
let a = 2 + 2; // 변수 a에 4 할당
switch (a) {
case 3:
alert('비교하려는 값보다 작다.');
break;
case 4: // 일치
alert('비교하려는 값과 일치한다.'); // 실행
break; // switch문 빠져나가기
case 5:
alert('비교하려는 값보다 크다.');
break;
default:
alert('어떤 값인지 파악이 되지 않는다.');
}
1️⃣ switch문은 a 값인 4와 첫 번째 case문의 값인 3을 비교한다. 일치하지 않으므로 바로 다음 case문으로 넘어간다.
2️⃣ switch문은 a 값 4와 두 번째 case문 값 4를 비교한다. 일치하므로 해당 case 문 아래의 코드를 실행한다.
→ alert문이 실행되어 '비교하려는 값과 일치한다.'가 알림창에 출력되게 된다.
→ break 문을 만났으므로 swtich문이 종료되게 된다.
💻 break문이 없는 경우
let a = 2 + 2;
switch (a) {
case 3:
alert('비교하려는 값보다 작다.');
case 4:
alert('비교하려는 값과 일치한다.');
case 5:
alert('비교하려는 값보다 크다.');
default:
alert('어떤 값인지 파악이 되지 않는다.');
}
첫번째 case문의 값부터 a 값과 비교하여 일치하는 값을 찾는 것은 break문이 있을 때랑 동일하다. (일치하는 값을 찾기 전까지는 case문의 아래 코드가 실행되지 않는다.)
but case문 안에 break문이 없으면 조건에 부합하는지 여부에 상관없이 이어지는 case문을 실행한다는 점에서 다르다.
따라서 위의 경우 case 4 부터 default까지에 속한 alert문이 전부 실행되게 된다.
💻 switch / case문의 인수로 다양한 표현식 넣기
switch문과 case문은 위의 예시처럼 단순 변수 뿐만 아니라 모든 형태의 표현식을 인수로 받을 수 있다.
let a = "1";
let b = 0;
swich (+a) { // +a를 하면 숫자 1이 된다.
case b + 1; // b + 1은 숫자 1이다. 따라서 +a와 일치!
alert('표현식 +a는 1, 표현식 b+1은 1이므로 이 코드가 실행된다.'); // 실행
break; // switch문 종료
default:
alert('이 코드는 실행되지 않는다.');
}
📋 여러 개의 case문 묶기
코드가 같은 case문의 경우 하나로 묶을 수 있다.
<ex>
let a = 3;
switch (a) {
case 4:
alert('계산이 맞습니다!');
break;
// 아래에서 두 case문을 묶었다. (a가 3이거나 5일 경우 실행되어야 할 코드가 같다.)
case 3:
case 5:
alert('계산이 틀립니다!');
alret('수학 수업을 다시 들어보는 걸 권유 드립니다.');
break;
default:
alert('계산 결과가 이상하네요.');
}
a에는 3이 할당되어 있고, 첫번째 case문의 값 4와 일치하지 않아 바로 다음 case문으로 넘어가게 되고, 이때 3과 일치하게 되어 case 3 아래의 코드가 실행되게 된다.
break를 만나거나 switch문의 끝을 만날 때까지 실행되므로 case 5 또한 실행되게 된다. 5와 일치하는지도 확인한다는 의미이다. 일치하지는 않지만 그런 여부에 상관 없이 break문이 나올 때까지 코드가 실행되게 된다.
📋 자료형의 중요성
case문의 값의 자료형과 값 모두가 같아야 해당 case문이 실행된다.
<ex>
let arg = prompt('값을 입력해주세요.'); // arg에는 string type이 들어간다.
switch (arg) {
case '0': // string type 0
case '1': // string type 1
alert('0이나 1을 입력하셨습니다.');
break;
case '2': // string type 2
alert('2를 입력하셨습니다.');
break;
case 3: // number type 3
alert('이 코드는 절대 실행되지 않습니다!');
break;
default:
alert('알 수 없는 값을 입력하셨습니다.');
}
➡️ 0이나 1을 입력하면 첫 번째 alert문이 실행된다.
➡️ 2를 입력한 경우에는 두 번째 alert문이 실행된다.
3️⃣ 3을 입력한 경우에는 default문이 실행된다. 세 번째 alert문은 실행되지 않는다. arg는 string type의 3이지만 case 3에서의 3은 number type의 3으로 서로 자료형이 다르기 때문이다.
✏️ 과제
📍 switch문을 if문으로 변환하기
switch문을 사용해 작성된 아래 코드를 if ... else문을 사용한 코드로 변환해 보자.
switch (browser) {
case 'Edge':
alert('Edge를 사용하고 계시네요!');
break;
case 'Chrome':
case 'Firefox':
case 'Safari':
case 'Opera':
alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.');
break;
default:
alert('현재 페이지가 괜찮아 보이길 바랍니다!');
}
🅰️
if (browser === 'Edge') {
alert('Edge를 사용하고 계시네요!');
}
else if (browser === 'Chrome'
|| browser === 'Firefox'
|| browser === 'Safari'
|| browser === 'Opera') {
alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.');
}
else {
alert('현재 페이지가 괜찮아 보이길 바랍니다!');
}
// switch문을 이용한 코드가 더 깔끔하다는 것을 알 수 있다.
📍 if문을 switch문으로 변환하기
아래 코드를 switch문을 사용한 코드로 바꿔 보자. swich문은 하나만 사용해야 한다.
let a = +prompt('a?', '');
if (a == 0) {
alert(0);
}
if (a == 1) {
alert(1);
}
if (a == 2 || a == 3) {
alert('2, 3');
}
🅰️
let a = +prompt('a?', '');
switch (a) {
case 0:
alert(0);
break;
case 1:
alert(1);
break;
case 2:
case 3:
alert('2, 3');
break; // 사실 맨 마지막 줄에는 어차피 switch문의 끝이기 때문에 break문이 없어도 무방하다.
}