티스토리 뷰

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
링크
«   2024/12   »
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
글 보관함