JavaScript if...else if...문 완벽 정리 – 여러 조건을 처리하는 방법

if...else if... 문은 기본적인 if...else 문의 확장 형태로, JavaScript에서 여러 개의 조건 중 하나를 선택하여 올바른 판단을 내릴 수 있도록 해줍니다.

조건이 두 개 이상일 때 각 조건을 순서대로 검사하고, 참(true)이 되는 첫 번째 블록의 코드만 실행합니다. 어떤 조건도 만족하지 않으면 마지막 else 블록이 실행됩니다.

기본 문법

if-else-if 문의 기본 구조는 다음과 같습니다.

if (표현식 1) {
    표현식 1이 참일 때 실행할 코드
}
else if (표현식 2) {
    표현식 2가 참일 때 실행할 코드
}
else if (표현식 3) {
    표현식 3이 참일 때 실행할 코드
}
else {
    모든 표현식이 거짓일 때 실행할 코드
}

동작 방식

JavaScript는 위에서부터 아래로 조건을 차례대로 평가합니다. 처음으로 참이 되는 조건의 블록을 실행한 후 나머지 조건은 더 이상 검사하지 않습니다. 따라서 조건의 순서를 신중하게 배치하는 것이 중요합니다.

예제

다음 예제를 직접 실행해 보면 JavaScript에서 if...else if 문이 어떻게 동작하는지 쉽게 이해할 수 있습니다.

<html>
   <body>
      <script>
         var book = "maths";
         
         if (book == "history") {
            document.write("<b>역사책</b>");
         }
         else if (book == "maths") {
            document.write("<b>수학책</b>");
         }
         else if (book == "economics") {
            document.write("<b>경제학책</b>");
         }
         else {
            document.write("<b>알 수 없는 책</b>");
         }
      </script>
   </body>
</html>

실행 결과

변수 book의 값이 "maths"이므로, 첫 번째 조건("history")은 거짓이 되고 두 번째 조건("maths")이 참이 되어 화면에 수학책이 출력됩니다.

정리

if...else if... 문은 여러 조건을 순차적으로 검사할 때 사용합니다.
참인 첫 번째 조건의 블록만 실행되며, 이후 조건은 건너뜁니다.
모든 조건이 거짓일 경우 마지막 else 블록이 실행됩니다.
else 블록은 선택 사항이지만, 예외 상황을 처리하기 위해 작성하는 것이 좋습니다.