*위 내용은 <Do it! HTML+CSS+자바스크립트 웹 표준의 정석> 책을 기반으로
공부하면서 작성되었습니다.

프로그래밍을 할 때는 특정한 조건과 명령에 따라 실행 순서를 정해야 한다.
이 때, 특정 조건이 맞는지 확인하기 위해서 조건문을 사용하게 된다.

if문과 if~else문

if문과 if~else문을 사용하여 스크립트 안에서 조건을 체크할 수 있다.
if문에서는 괄호 안의 조건을 체크하여 결괏값이 true면 if문 다음에 나오는 명령을 실행하고, false면 아무것도 하지 않는다.
또한 조건을 만족했을 때, 실행할 명령이 여러 개라면 중괄호({})로 묶고 그 안에 명령을 나열하여 순서대로 한꺼번에 처리하라고 표시하게 된다.

if문의 기본형은 다음과 같다.

if(조건) {
   	조건 결괏값이 true일 때 실행할 명령
    }

if문은 결괏값이 true일 때만 실행하므로 ture가 아닐 때 명령을 수행하려면 어느 정도의 한계에 부딪히게 될 것이다. 따라서 else문이 등장하게 된 것이다.

if~else문의 기본형은 다음과 같다.

if(조건) {
   	조건 결괏값이 true일 때 실행할 명령
    } else {
    조건 결괏값이 false일 때 실행할 명령
    }

사용자가 입력한 숫자가 3의 배수인지 확인하는 예제를 통해 확인해보자.

<script>
 var userNumber = prompt("숫자를 입력하세요.");
 
 if(userNumber % 3 === 0)
  alert("3의 배수입니다.");
 else 
  alert("3의 배수가 아닙니다.");
 </script>

입력받은 변수를 3으로 나눈 후 그 나머지가 0이 된다면 3의 배수, 그렇지 않다면 3의 배수가 아닐 것이다.
따라서, 입력 변수를 3으로 나눈 나머지가 0이 되는 조건식을 만족한다면, "3의 배수입니다." 라는 경고창이 뜰 것이고, 그렇지 않다면 else 문을 실행하여 "3의 배수가 아닙니다."라는 경고창이 뜨게 된다.

하지만, 프로그래밍을 하게 되면, 하나의 if~else 문으로는 해결되지 않는 상황이 더욱 많기에 if~else 문 안에 또다시 if~else문을 사용하는 중첩된 if~else문을 사용하기도 한다.

앞에서 확인한 3의 배수인지 확인하는 예제에서 응용해보자.
해당 예제에서 사용자가 프롬프트 창에서 값을 입력하지 않고 [취소] 버튼을 누르게 된다면 어떻게 해야 할까?
사용자가[취소] 버튼을 눌렀는지 확인하고, 숫자를 입력한 후 [확인] 버튼을 눌렀을 경우에만 3의 배수를 체크해야 할 것이다.

프롬프트 창에서 [취소] 버튼을 누르면 변수에는 null이 저장될 것이다.
따라서, userNumber의 변숫값이 null인지 아닌지를 확인하는 과정에서 역시 if~else문을 사용하게 될 것이다.

따라서 userNumber 값이 null이 아니면 3의 배수인지 확인하고,
null이면 숫자가 입력되지 않았다고 알려주는 예제로 디벨롭시켜보자.

<script>
 var userNumber = prompt("숫자를 입력하세요.");
 
 if(userNumber !== null){  //입력값이 null이 아닐 시 if~else 문 실행
 	if(userNumber % 3 === 0)
      alert("3의 배수입니다.");
    else
      alert("3의 배수가 아닙니다.");
 } 
 else 
  alert("입력이 취소됐습니다.");  //입력값이 null일 시, 알림창을 보여줌
 </script>

조건 연산자로 조건 체크하기

만약 조건이 하나이고 true일 때와 false일 때 실행할 명령이 각각 하나 뿐이라면,
if~else문 대신 조건 연산자를 사용하는 것이 보다 간단한 경우가 많다.
여기서 조건 연산자는 '?'와 ':'기호로 이루어진다.

(조건) ? true일 때 실행할 명령 : false일 때 실행할 명령

예시로 바로 이전에 다뤘던 예제를 중첩된 if~else문 대신 조건 연산자를 사용한다면
다음과 같이 작성할 수 있다.

<script>
 var userNumber = prompt("숫자를 입력하세요.");
 
 if(userNumber !== null)
   (userNumber % 3 === 0) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다."); //조건 연산자 사용
 else 
  alert("입력이 취소됐습니다."); 
 </script>

논리 연산자로 조건 체크하기

조건을 2개 이상 체크할 경우에는 논리 연산자를 사용하여 조건식을 만들 수 있다.
두 조건이 true일 경우와 조건 1개만 true일 경우 등과 같이 여러 경우의 수를 따질 때 논리 연산자를 사용한다.

OR 연산자

OR 연산자 기호는 '||'를 사용하며, 피연산자 2개 중에서 true가 하나라도 있으면 결괏값은 true가 된다.

예를 들어, OR 연산자를 사용해 50보다 작은 숫자 2개를 입력받아 둘 중 하나가 15보다 작은지를 판단하는 예제를 실행해보면 다음과 같다.

<script>
 var numberOne = prompt("50 미만인 숫자를 입력하세요.");
 var numberTwo = prompt("50 미만인 숫자를 입력하세요.");
 
 if(numberOne < 15 || numberTwo < 15)
  alert("숫자 2개 중에서 최소한 하나는 15 미만입니다.");
 else 
  alert("숫자 2개 중에서 15 미만인 수가 없습니다."); 
 </script>

AND 연산자

AND 연산자 기호는 '&&'를 사용한다.
이 때, 피연산자 2개 중에 false가 하나라도 있으면 결괏값은 false가 된다.

예시로 AND 연산자를 사용해 입력한 2개의 숫자가 30보다 작은지를 체크하는 예제를 실행해보면 다음과 같다.

<script>
 var numberOne = prompt("50 미만인 숫자를 입력하세요.");
 var numberTwo = prompt("50 미만인 숫자를 입력하세요.");
 
 if(numberOne < 30 || numberTwo < 30)
  alert("숫자 2개 모두 50 미만입니다.");
 else 
  alert("조건에 맞지 않는 숫자가 있습니다."); 
 </script>

NOT 연산자

NOT 연산자 기호는 '!'를 사용하며 true나 false를 반대로 뒤집는다.

앞에서 살펴본 3의 배수인지 확인하는 예제를 NOT 연산자 !를 사용해 작성해보면 다음과 같다.

if(userNumber !== null) { 실행할 명령 } // 입력값이 null이 아닐 시 if 문을 실행

switch 문

자바스크립트에서 조건을 체크할 때는 if~else문을 사용하지만, 처리할 명령이 많다면 if~else문을 여러 개 사용하는 것보다 switch문이 더 편리하다.
switch 문에서 조건을 체크한 후, case문을 사용해 명령을 처리할 수 있다.

switch 문의 기본 형식은 다음과 같다.

switch(조건)
{
	case 값1: 명령1
    	break
    case 값2: 명령2
    	break
    .....
    default: 명령n
 }

switch 문의 조건은 아래 case문의 값과 일대일로 일치해야 한다.
조건과 일치하는 case문의 명령을 실행한 후에는 switch문을 완전히 빠져나오게 된다.

예를 들어, switch의 조건이 case의 '값1'과 일치하면 '명령1'을 실행하고, 다음에 있는 break 문을 만나 switch 문을 빠져나간다. 또한 만약 조건이 case의 '값2'와 일치하면 '명령2'를 실행하게 된다.
그리고 조건과 일치하는 case문이 없다면 마지막 default문을 실행하게 된다.
default문은 switch문의 마지막에 작성하며 여기에는 break문을 쓰지 않는다는 것을 명심하도록 하자!

예시로 switch문을 사용해 관심 세미나를 체크하는 예제를 실행해보자.

<script>
 var session = prompt("관심 세미나를 선택해주세요. 1-기획, 2-개발, 3-디자인");
 
 switch(study){
  case "1": document.write("<p>기획 세미나는 <strong>401호</strong>에서 진행됩니다.</p>")
  	break;
  case "2": document.write("<p>개발 세미나는 <strong>403호</strong>에서 진행됩니다.</p>")
  	break;
  case "3": document.write("<p>디자인 세미나는 <strong>405호</strong>에서 진행됩니다.</p>")
  	break;
  default: alert("잘못 입력했습니다.") // 1,2,3이 아닌 값을 입력받을 시 출력
 </script>

이 때, case문에서는 값만 사용하고 식은 사용할 수 없다는 점에 주의하도록 하자!