자바스크립트 switch 조건문 예제 및 if else if와 차이점


자바스크립트 switch 조건문은 두 개이상의 조건을 비교할 때 사용하여 if else if와 유사합니다. switch 조건문은 case에는 상수값만 올 수 있어 변수, 비교식 등에는 사용할 수 없습니다.

자바스크립트 switch 조건문

자바스크립트 switch 조건문은 switch문과 case문으로 구성됩니다. switch()에 적힌 데이터와 case 뒤에 적힌 데이터를 서로 비교하여, 일치하면 실행, 일치하지 않으면 다음 case 문으로 넘어갑니다.


기준이 되는 switch()에 대해서 case문을 여러개 지정할 수 있기 때문에 switch 조건문은 두 개 이상의 조건을 지정할 때 사용합니다. 따라서 if else if 조건식과 유사합니다.

switch () 괄호안에는 변수, 상수, 비교연산자 등 자유롭게 데이터가 올 수 있습니다. 그러나 switch()와 같은지 비교를 할 case문 뒤에는 상수값만 올 수 있습니다.

<script>
  var 변수;

  switch ( 변수 )
  {
    case 상수1 :     //변수 = 상수1 이면, 실행문 A 실행
      실행문 A
      break;     //swtich { } 코드 블록 탈출

    case 상수2 :     //변수 != 상수1 이고, 변수 = 상수2 이면, 실행문 B 실행
      실행문 B
      break;     //swtich { } 코드 블록 탈출

    default :    //변수 != 상수1 이고, 변수 != 상수2 이면, 실행문 C 실행
      실행문 C

  }
</script>

예를 들어 switch(변수)를 삽입한 경우, 변수case상수1이 같은지 비교를 합니다. 같으면 실행문 A를 실행시킨 후 break문에 의해서 전체 switch 문을 빠져나옵니다. 변수case 상수1이 서로 다른 경우 다음 case 코드 블록으로 넘어갑니다. 같은 과정을 반복해서 switch(변수)가 모든 case 상수와 일치하지 않으면 default 코드 블록에 삽입된 코드가 실행되며 switch 조건문은 종료됩니다.


switch 조건문 문자 비교

음료수 자판기에서 음료수 이름을 입력하면 가격이 조회되는 프로그램입니다.

<script>
  var drink = prompt ( "가격 조회를 원하는 음료수를 입력하세요.( 콜라, 사이다, 커피 中 택1)", "" );

  //switch 조건문
  switch (drink)
  {
    case "콜라" :
      document.write ( "800원" );
      break;

    case "사이다" :
      document.write ( "900원");
      break;

    case "커피" :
      document.write ( "700원" );
      break;

    default :
      document.write ("잘못된 단어 입력");
  }
</script>

자바스크립트 switch 조건문 : 숫자 비교

switch ( )의 괄호안에는 변수이외에도 여러 연산자가 조합되어 값이 올 수 있습니다. 입력한 숫자가 홀수/짝수인지 맞추는 switch 조건문입니다. switch () 괄호안에 변수와 산술 연산자가 같이 등장한 케이스입니다.

산술 연산자의 나머지 연산자(%)를 사용해서 정수는 2로 나눠서 나머지가 0이면 짝수, 1이면 홀수라는 성질을 이용한 조건문입니다.


<script>
  var num = prompt( "원하는 정수를 입력해주세요.", "" );

  //switch 조건문 홀/짝 맞추기
  switch ( num % 2 )
  {
    case 0 :
      document.write ( "입력한 숫자는 짝수입니다." );
      break;

    case 1 :
      document.write ( "입력한 숫자는 홀수입니다." );
      break;

    default :
      document.write ( "정수값을 입력해주세요." );
  }
</script>

자바스크립트 switch 조건문 장점 : 간결성

switch 조건문은 if else if 조건식으로 변환할 수 있습니다. 두 식을 비교해보면 switch 조건문이 조금더 간결하고 가독성이 높습니다.

<script>
  var drink = prompt ( "가격 조회를 원하는 음료수를 입력하세요.( 콜라, 사이다, 커피 中 택1)", "" );

  //if else if 조건문
  if ( drink = "콜라" )
  {
    document.write ( "800원" );
  }
  else if (drink = "사이다")
  {
    document.write ( "900원" );
  }
  else if (drink = "커피")
  {
    document.write ( "700원" );
  }
  else
  {
    document.write ( "잘못된 단어 입력" );
  }
</script>

자바스크립트 switch 조건문 단점 : 상수

자바스크립트 swtich 조건문에는 case 값에 상수만 올 수 있습니다. 숫자 3, 문자 "Hello"와 같은 값을 상수라고 합니다.


switch ()의 괄호 사이에는 자유롭게 데이터가 올 수 있습니다. 하지만 case 뒤에는 변수, 조건식 등을 사용할 수 없습니다. 아래 예제는 switch 조건문이 작동되지 않습니다.

 <script>
   var num = prompt( "원하는 숫자를 입력하세요.", "" );

   switch ( num )
   {
     case num > 0 :    //변수와 비교 불가
      document.write ( "입력한 숫자는 양수입니다." );
      break;

    case num = 0 :     //변수와 비교 불가
      document.write ( "입력한 숫자는 0입니다." );
      break;

    case num < 0 :     //변수와 비교 불가
      document.write ( "입력한 숫자는 음수입니다." );
      break;

    default
      document.write ( "숫자를 입력해주세요." );
   }
 </script>

비교 대상에 변수나 조건식을 비교해야 할 경우 switch문 대신 if else if 조건문을 사용해야 합니다.

<script>
   var num = prompt( "원하는 숫자를 입력하세요.", "" );

   if ( num > 0 )
   {
     document.write ( "입력한 숫자는 양수입니다." );
   }
   else if ( num = 0 )
   {
     document.write ( "입력한 숫자는 0입니다." );
   }
   else if ( num < 0)
   {
     document.write ( "입력한 숫자는 음수입니다." );
   }
   else
   {
     document.write ( "숫자를 입력해주세요." );
   }
</script>

비교 대상이 상수값이면 switch 조건문이 가능하고 그 밖에 보편적인 경우에는 if 조건문을 사용합니다.