Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript 조건문 완벽 정리: if, if-else, else if 문의 이해와 활용

프로그래밍에서 조건문(Conditional Statement)은 주어진 조건에 따라 코드의 실행 흐름을 제어하는 핵심 요소입니다. JavaScript에서도 다양한 상황에 맞게 로직을 분기 처리할 수 있도록 여러 형태의 조건문을 제공합니다.

JavaScript 조건문의 세 가지 종류

  • if 문 − 특정 조건이 참(true)일 때만 if 블록 내부의 코드를 실행합니다. 단순히 하나의 조건을 검사할 때 유용합니다.
  • if...else 문 − 두 가지 경우 중 하나를 선택해야 할 때 사용합니다. 조건이 참이면 if 블록이, 거짓이면 else 블록이 실행됩니다.
  • if...else if...else 문 − 두 개 이상의 복수 조건을 순차적으로 검사해야 할 때 사용합니다. 위에서부터 차례대로 조건을 확인하며, 처음으로 참이 되는 블록만 실행됩니다.

그럼 실제로 JavaScript에서 조건문을 어떻게 구현하는지 예제를 통해 살펴보겠습니다. 아래 예제는 입력한 숫자가 2로 나누어떨어지는지, 3으로 나누어떨어지는지, 혹은 둘 다 나누어떨어지는지 판별하는 프로그램입니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScript 조건문 예제</h1>
<input type="text" class="numInput" />
<button class="Btn">확인</button><br />
<div class="result"></div>
<h3>위 버튼을 클릭하면 입력한 숫자가 2, 3 또는 둘 다로 나누어떨어지는지 확인할 수 있습니다.</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let numInputEle = document.querySelector(".numInput");
    BtnEle.addEventListener("click", () => {
        if (numInputEle.value % 2 === 0 && numInputEle.value % 3 === 0) {
            resEle.innerHTML = "입력한 숫자는 2와 3 모두로 나누어떨어집니다";
        } else if (numInputEle.value % 3 === 0) {
            resEle.innerHTML = "입력한 숫자는 3으로 나누어떨어집니다";
        } else if (numInputEle.value % 2 === 0) {
            resEle.innerHTML = "입력한 숫자는 2로 나누어떨어집니다";
        } else {
            resEle.innerHTML = "입력한 숫자는 2나 3으로 나누어떨어지지 않습니다";
        }
    });
</script>
</body>
</html>

코드 설명

이 예제의 핵심 로직은 다음과 같습니다.

  • %(나머지 연산자)를 사용해 입력값을 2와 3으로 각각 나눈 나머지가 0인지 검사합니다.
  • &&(논리 AND 연산자)를 활용해 두 조건이 동시에 만족되는 경우를 먼저 확인합니다.
  • else if를 통해 3으로만 나누어떨어지는 경우, 그다음 2로만 나누어떨어지는 경우를 순차적으로 검사합니다.
  • 어떤 조건에도 해당하지 않으면 마지막 else 블록이 실행됩니다.

실행 결과

JavaScript 조건문 완벽 정리: if, if-else, else if 문의 이해와 활용

숫자를 입력한 후 '확인' 버튼을 클릭하면 아래와 같이 결과가 화면에 표시됩니다.

JavaScript 조건문 완벽 정리: if, if-else, else if 문의 이해와 활용

이처럼 조건문을 활용하면 사용자의 입력값에 따라 서로 다른 결과를 출력하는 동적인 웹 페이지를 손쉽게 만들 수 있습니다. 조건의 개수가 많아질수록 if...else if...else 구조가 유용하게 활용되며, 상황에 따라 switch 문을 대안으로 고려해볼 수도 있습니다.