switch 구문? - 가끔 사용되니 if와 비교하여 이 참에 정리

코딩을 조금이라도 학습해본 사람이라면, 조건을 핸들링해야 할 때 if 조건문을 가장 먼저 떠 올리게 될 것입니다. 그런데 현업실무에서는 때때로 switch 구문을 이용해서 조건을 처리하는 경우도 왕왕 존재합니다. if 구문와 switch 구문이 비슷하게 동작한다고 하면 어떤 모습으로 서로 다르게 사용되는 지 정리해두면 좋습니다.

switch 기본 구문

다음 코드로 살펴봅시다. 사용자가 1 또는 2를 입력(선택)하는 상황을 가정해보았습니다.

      let yourChoice = 1;
      switch (yourChoice) {
        case 1:
          alert("1을 선택했습니다!");
          break;
        case 2:
          alert("2를 선택했습니다!");
          break;
      }

yourChoice 변수에 1이 담겼으니, case 1: 이하가 실행이 됩니다. 변수에 2가 담기면 case 2: 이하로 실행됩니다.

switch 구문 간단하게 살펴보기

여기에서 한 가지 살펴볼 것은 break; 입니다. 코드는 보통 위에서부터 아래로 한줄씩 실행이 되므로, break를 써주지 않으면 그 아래 구문까지 모두 실행이 되어버립니다. 그래서 케이스별로 끊어주기 위해서 반드시 break를 써줘야 합니다.

만약, 사용자가 1, 2가 아니라 3, 4, 5 등의 다른 수를 입력한다면 어떻게 해야 할까요?

switch - default

코드 맨 아래에 default:를 추가해주면 됩니다.

      let yourChoice = 3;
      switch (yourChoice) {
        case 1:
          alert("1을 선택했습니다!");
          break;
        case 2:
          alert("2를 선택했습니다!");
          break;
        default:
          alert("1, 2 둘 중의 하나를 선택해주세요.");
      }

switch 구문에는 default를 사용할 수 있다

뭔가 if 조건문의 else와 같은 느낌이 들죠?

switch와 if 조건문의 차이점 그리고 굳이 switch를 쓰는 이유

if 조건문의 경우에는 변수가 가지고 있는 값을 다양하게 비교할 수 있습니다.
변수가 10보다 작은가? 변수가 참인가 거짓인가? 이 변수와 저 변수가 같은가 다른가? 등등...

반면, switch는 변수의 값 하나만 가지고 판정합니다. 이후 case라는 단어가 나오는 것만 봐도 유추해볼 만한 내용입니다.
활용할 수 있는 기능이 적은데도 굳이 switch를 사용하는 이유는 바로 if 조건문 보다 구문이 간결해지기 때문입니다. 사실 별건 없다고도 볼 수 있겠습니다.

예시가 너무 간단해서 if구문과 switch 구문이 간결해지는 차이를 바로 느껴지지 않을수도 있지만, 아무튼 그렇습니다.^^;

      let yourChoice = 1;
      switch (yourChoice) {
        case 1:
          alert("1을 선택했습니다!");
          break;
        case 2:
          alert("2를 선택했습니다!");
          break;
        default:
          alert("1, 2 둘 중의 하나를 선택해주세요.");
      }


     // 위 아래는 동일한 동작 결과를 가져다 줍니다.
     

      let yourChoice = 1;
      if (yourChoice == 1) {
        alert("1을 선택했습니다!");
      } else if (yourChoice == 2) {
        alert("2를 선택했습니다!");
      } else {
        alert("1, 2 둘 중의 하나를 선택해주세요.");
      }

switch 구문 활용 예제

배웠으면 바로 한번 써 먹어봐야겠죠? 가위바위보 게임 같은 게 간단할 것 같아서, 앞에서 학습했던 부트스트랩 CSS를 적용하고 바로 코드로 짜봅니다.(이미지는 구글 검색해서 대충 넣어봤습니다)

    <div class="container text-center">
      <h4 class="text-white">가위 바위 보</h4>
      <div>
        <img src="scissors.png" alt="" width="200px" />
      </div>
      <h4 class="text-warning mt-5 mb-5">당신의 선택은?</h4>
      <button class="btn btn-primary">가위</button>
      <button class="btn btn-primary">바위</button>
      <button class="btn btn-primary">보</button>
    </div>

    <style>
      body {
        background-color: #333;
        padding: 50px;
      }
    </style>

가위바위보 게임처럼 UI를 만들었습니다

이렇게 하면 UI는 대충 뚝딱 만들어지는 것 같습니다.
이제 Javascript로 이 녀석들을 제어해주면 되는 것이겠죠?

addEventListener는 어디에 붙일까?

가위, 바위, 보 버튼 3개에 각각 이벤트리스너를 붙일 수도 있지만, 이전 포스팅에서 "이벤트 버블링"에 대해서 정리했던 적이 있습니다.

이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리

이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리

addEventListener는 적게 붙일수록 좋으니, 부모 요소인 div.container에다가 한 개를 붙인 후 e.target으로 버튼을 구별하면 되지 않을까요?(이 부분 바로 이해가 안되면 이전 포스팅을 참고해주세요)

Javascript 코드는 이렇게 구성해보았습니다.

      document.querySelector(".container").addEventListener("click", function (e) { 
        console.log(e.target.innerHTML);       //무엇을 선택했는지 콘솔을 통해서 확인
         
        let yourChoice = e.target.innerHTML;   //클릭한 대상의 TEXT문자열을 변수에 넣어주고
        
        switch (yourChoice) {                  //이후 switch로 조건 분기
          case "가위":
            alert("비겼습니다!");
            break;
          case "바위":
            alert("이겼습니다!");
            break;
          case "보":
            alert("졌습니다!");
            break;                             // 아래쪽에 default가 없다면 안 붙여도 되긴하죠.
        }
      });

조금만 손 보면, 게임으로 만들 수 있을듯합니다

저는 바위 버튼을 클릭했고, console에도 잘 찍히고, 결과도 바르게 동작하는 것 같습니다. 성공!

마치며

익숙한 if 조건문 대신에, switch 구문을 사용해보았습니다. 막상 사용해보니 스위치 구문의 장점이 살짝 느껴지는 것도 같습니다.

여기서 접지 마시고, 상대방의 손 모양을 움직이게 만들고, 사용자가 버튼을 클릭했을 시 상대방의 결과를 랜덤하게 뽑아서 비교해보면서 결과를 판정해주도록 코드를 개선해보면, 바로 <가위 바위 보 게임>으로 만들 수 있지 않을까요?

한번 도전해보세요.



즐거운 코딩 생활, 즐코딩
KINcoding.