티스토리 뷰
if문을 활용하면 switch문을 if문으로 대체할 수도 있습니다.
let myChoice = 2;
switch(myChoice) {
case 1:
console.log('토끼를 선택한 당신, ...');
break;
case 2:
console.log('고양이를 선택한 당신, ...');
break;
case 3:
console.log('코알라를 선택한 당신, ...');
break;
case 4:
console.log('강아지를 선택한 당신, ...');
break;
default:
console.log('1에서 4사이의 숫자를 선택해 주세요.');
}
if (myChoice === 1) {
console.log('토끼를 선택한 당신, ...');
} else if (myChoice === 2) {
console.log('고양이를 선택한 당신, ...');
} else if (myChoice === 3) {
console.log('코알라를 선택한 당신, ...');
} else if (myChoice === 4) {
console.log('강아지를 선택한 당신, ...');
} else {
console.log('1에서 4사이의 숫자를 선택해 주세요.');
}
동작은 switch문으로 만든 원리와 똑같이 동작합니다.
이 상태로 코드를 실행해보면, 동일한 결과가 두 번 나타나게 됩니다.
그런데 if문 쪽을 보시면 myChoice를 조건 값과 함께 비교하는 조건식을 매번 작성해야 하는 번거로움도 있고, 코드 길이만 봤을 땐 좀 더 간결한 것 같지만, 뭔가 switch문이 조금 더 눈에 잘 읽힙니다.
if문과 switch문 모두 특정한 조건에 따라 다르게 동작하는 코드를 만들 수 있지만, 어떤 넓은 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 좀 더 효과적이고 특정한 값에 일치하는 조건을 만들 때는 switch문이 좀 더 효과적입니다.
한 가지 주의할 점은 조건식에서 등호를 반드시 3개를 입력해 주어야 한다는 점인데요. switch문은 암시적 형 변환을 허용하지 않기 때문입니다.
let myChoice = '2';
switch(myChoice) {
case 1:
console.log('토끼를 선택한 당신, ...');
break;
case 2:
console.log('고양이를 선택한 당신, ...');
break;
case 3:
console.log('코알라를 선택한 당신, ...');
break;
case 4:
console.log('강아지를 선택한 당신, ...');
break;
default:
console.log('1에서 4사이의 숫자를 선택해 주세요.');
}
if (myChoice === 1) {
console.log('토끼를 선택한 당신, ...');
} else if (myChoice === 2) {
console.log('고양이를 선택한 당신, ...');
} else if (myChoice === 3) {
console.log('코알라를 선택한 당신, ...');
} else if (myChoice === 4) {
console.log('강아지를 선택한 당신, ...');
} else {
console.log('1에서 4사이의 숫자를 선택해 주세요.');
}
위 코드 처럼
변수 myChoice에 숫자 2가 아니라 문자열 '2'를 할당하고 실행해보면 default문과, else문이 실행되는 모습을 확인할 수 있는데요.
1에서 4사이의 숫자를 선택해 주세요.
1에서 4사이의 숫자를 선택해 주세요.
이 상태에서 else if문을 등호 두 개로 비교하면 어떻게 될까요?
let myChoice = '2';
switch(myChoice) {
case 1:
console.log('토끼를 선택한 당신, ...');
break;
case 2:
console.log('고양이를 선택한 당신, ...');
break;
case 3:
console.log('코알라를 선택한 당신, ...');
break;
case 4:
console.log('강아지를 선택한 당신, ...');
break;
default:
console.log('1에서 4사이의 숫자를 선택해 주세요.');
}
if (myChoice == 1) {
console.log('토끼를 선택한 당신, ...');
} else if (myChoice == 2) {
console.log('고양이를 선택한 당신, ...');
} else if (myChoice == 3) {
console.log('코알라를 선택한 당신, ...');
} else if (myChoice == 4) {
console.log('강아지를 선택한 당신, ...');
} else {
console.log('1에서 4사이의 숫자를 선택해 주세요.');
}
if문의 경우에는 문자열 2가 들어가서 동등 비교가 이뤄지면, true라는 결과가 나오기 때문에, 위 코드를 실행해보면, switch문은 default문이 실행되고, if문에서는 첫번째 else if문이 실행되는걸 확인할 수 있습니다.
1에서 4사이의 숫자를 선택해 주세요.
고양이를 선택한 당신, ...
그렇기 때문에, switch문은 값들을 비교할 때 자료형을 엄격하게 구분해야하고 if문으로 대체할 때는 반드시 등호 3개로 일치비교를 해야합니다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
[제어문] 10. for문 Tip (0) | 2022.09.28 |
---|---|
[제어문] 09. for문 (0) | 2022.09.27 |
[제어문] 06. switch문 (0) | 2022.09.25 |
[객체] 07. 객체와 메소드 (0) | 2022.09.24 |
[객체] 05. 객체 다루기 (0) | 2022.09.24 |
- Total
- Today
- Yesterday
- 비교 연산자
- map
- EVERY
- undefined
- null
- findindex
- 타입변환
- redux-middleware
- some
- redux-thunk
- redux
- filter
- 얕은복사
- find
- redux thunk
- 느슨한 타입(loosely typed)
- 기본형 데이터
- redux middleware
- 참조형 데이터
- 불변 객체
- 동적(dynamic) 언어
- foreach
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |