❏ javascript - 조건문 ➋

안녕하세요! (ง˙∇˙)ว

이번 시간에는 저번 시간에 이어서 자바스크립트의 기본 문법인 조건문의 switch문에 대해서 알아보겠습니다!

---

switch문은 상수값에 해당되는 case절을 실행합니다.

상수값에는 숫자 혹은 문자데이터는 가능하지만. 비교 구문은 입력할 수 없습니다.

또한 default절은 case 절의 값이 모두 일치하지 않는 경우 실행합니다.

 

✏ switch문의 구조

switch (상수값) {
    case 상수 값1 :
        //실행할 코드
      	break;
    case 상수 값2 :
        //실행할 코드
        break;
    case 상수 값3 :
        //실행할 코드
        break;
  	default : //case절의 상수값이 모두 일치하지 않은 경우
    	//실행할 코드
        break;
}

switch문 상수 값을 판단하고 해당하는 case 절로 바로 찾아가 실행합니다.

또한 실행할 코드를 작성 후 꼭 break; 를 꼭 작성해야합니다.

 

그럼 이번엔 switch문 활용한 예제를 해보겠습니다!

---

 

✎ 활용 예제

 

라이언은 이번 학기를 마치고 성적을 확인해보려고 합니다.

라이언은 해당 과목의 총점수를 87점을 받았습니다.

그럼 몇 등급일까요?

 

 

 

 

 

 

---

먼저 상수로 라이언의 성적을 변수로 선언해야 합니다.

또한 switch문이 끝난 후 메시지가 출력되어야 하니 출력될 수 있도록 선언해줍니다.

let a = 87;
let msg = "";

switch(Math.floor(a/10)){
    case 10:
        msg = "축하합니다! A등급 입니다.";
        break;
    case 9:
        msg = "축하합니다! B등급 입니다.";
        break;
    case 8:
        msg = "축하합니다! C등급 입니다.";
        break;
    case 7:
        msg = "축하합니다! D등급 입니다.";
        break;
    default:
        msg = "재수강 입니다."
        break;
}

처음에 a라는 변수에 87이라는 수를 선언했었습니다.

그러나 switch문에는 비교 구문과 연산자를 넣을 수 없기 때문에 정확한 상수를 입력해야 합니다. 

그렇기 때문에 a/10을 해서 8.7이라는 수를 얻을 수 있습니다. 그러나 8.7이라는 수도 정확하지 않기 때문에

math.floor함수를 사용하여 소수점을 절삭합니다. 

 

math.floor함수 자세한 설명은 요기!     👇 👇 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

Math.floor() - JavaScript | MDN

 

그러면 정상적으로 출력이 되는 모습을 볼 수 있습니다.

 

그렇기에 라이언은 B등급을 받은걸 확인할 수 있었습니다!

---

🖐 혹시 switch 문의 상수에는 숫자만 와야 하나요?

 

이번에는 상수에 문자 데이터를 집어넣어 보겠습니다. 

let a = "elephant";
let msg = "";

switch(a){
    case "cat":
        msg = "상수값에 고양이를 입력하셨습니다.";
        break;
    case "monkey":
        msg = "상수값에 원숭이를 입력하셨습니다.";
        break;
    case "rabbit":
        msg = "상수값에 토끼를 입력하셨습니다.";
        break;    
    case "elephant":
        msg = "상수값에 코끼리를 입력하셨습니다.";
        break;
    default:
        msg = "상수값에 일치한 문자데이터가 없습니다."
        break;
}

이번엔 문자 데이터를 넣은 switch문은 실행이 될까요?

상수값에 문자데이터를 넣어도 잘 실행되는 것을 볼 수 있었습니다!

---

✏  break;의 중요성

 

만약 break; 를 작성하지 않으면 어떻게 될까요??

위의 코드와 동일하지만 디폴트만 제외하고 나머지 구문의 break를 삭제해보겠습니다.

let a = 87;
let msg = "";

switch(Math.floor(a/10)){
    case 10:
       msg = "A등급입니다.";
    case 9:
        msg = "B등급입니다.";
    case 8:
        msg = "C등급입니다.";
    case 7:
       msg = "D등급입니다.";      
    default:
         msg ="재수강입니다.";
        break;
}

 

 

 break;를 작성했던 출력 값과 작성하지 않았을 때의 출력 값이 다른 걸 볼 수 있습니다.

그렇기에 아무리 기준에 부합하더라도  break;가 있는 절로 가서 끝나 완전히 다른 결과의 모습을 볼 수 있었습니다.

---

✏  if문과 switch문의 차이점

 

if문은 조건식에 비교 연산을 사용할 수 있습니다. 그러나 if문은 조건식을 위에서부터 아래로 실행하며 비교하게 되고 만약 일치하는 조건이 아래에 있다면 비교하지 않아도 되는 조건들을 모두 비교해보고 가기 때문에 비효율성이 있습니다.

 

switch문은 상수값을 판단하고 바로 부합하는 case 절로 바로 찾아갑니다. 그렇기 때문에 상대적으로 if문보다는 비교적 효율적입니다.

 

그러나 조건식에 비교연산을 사용할 수 있기에 자바스크립트 구현시에는 if문을 가장 많이 사용한다고 합니다!

---

(°∀°)b