[JavaScript] Switch 문법

 

 

 

if else 문법 대신 쓸 수 있는 switch라는 문법이 있다.

if else 문법으로도 모든 걸 할 수 있지만 좀 더 간단하게 적고 싶을 때 switch 문법을 사용한다.

 

switch 문법 사용법

// 문법
switch (변수){
  case 값1 :
    실행문;
    break;
  case 값2 :
    실행문;
    break;
  case default :
    실행문;
}

// 사용법
let 변수 = 2 + 2;
switch (변수){
  case 3 :
    alert('변수가 3이네요');
    break;
  case 4 :
    alert('변수가 4네요');
    break;
  case default :
    alert('아무것도 해당 안 됨');
    break;  
}

▲ switch의 소괄호에는 조건식이 아니라 검사해 볼 변수를 넣으면 된다.

그리고 변수가 3일 때 코드를 실행해 주세요~라고 코드를 짜고 싶으면 case 문법은 위처럼 사용하면 된다.

코드 실행을 끝내고 싶으면 break를 추가해 주면 되는데, 그러면 switch 중괄호를 탈출해 준다.

else 같은 걸 사용하고 싶으면 default : 추가해 주면 된다. case에 해당되는 게 하나도 없을 때 안에 있는 코드를 실행해 준다.

 

 

if문으로도 모든 걸 만들 수 있는데 switch를 쓰는 이유는 변수 값에 따른 조건 분기를 만들고 싶을 때 조금 더 간편하게 적을 수 있어서 그렇다. if else문보다 괄호가 적은 그 이유밖에 없다.

 

 

<div id="quiz">
    <h4>아침에 일어나면 뭐부터 할래?</h4>
    <button>물 마시기</button>
    <button>씻기</button>
    <button>침대 정리하기</button>
</div>

<script>
    document.querySelector('#quiz').addEventListener('click', function(e){
        switch(e.target.innerHTML){
            case '물 마시기' : 
                alert('물 마시기를 선택하셨네요.');
                break;
            case '씻기' : 
                alert('씻기를 선택하셨네요.');
            	break; 
            case '침대 정리하기' : 
                alert('침대 정리하기를 선택하셨네요.');
                break;
        }
    });
</script>

▲ 이런 식으로 변수 하나의 값에 따라서 각각 다른 기능을 실행하고 싶을 때 쓰면 깔끔해 보일 수 있다.

 

(참고)

3개의 버튼에 이벤트 리스너를 달지 않고 부모 요소에 이벤트 리스너를 달아서 어떤 버튼을 눌러도 버튼 입력을 모두 감지할 수 있다. 

e.target : 현재 누른 html 요소 감지해 줌

e.target.innerHTML : 그 요소 안에 있는 텍스트 출력해 줌.

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.