JavaScript로 주어진 연도가 윤년인지 확인하는 방법

JavaScript를 활용하면 간단한 조건문만으로 입력된 연도가 윤년인지 손쉽게 판별할 수 있습니다. 이 글에서는 사용자가 연도를 입력하고 버튼을 클릭하면 윤년 여부를 화면에 표시해 주는 예제를 단계별로 살펴보겠습니다.

윤년 판별 기준

그레고리력에서 윤년은 다음 규칙에 따라 결정됩니다.

연도가 4로 나누어 떨어지면 윤년입니다.
단, 100으로 나누어 떨어지는 연도는 평년입니다.
예외적으로 400으로 나누어 떨어지는 연도는 다시 윤년입니다. (예: 2000년)

예제 코드

<!DOCTYPE html>
<html lang="en">
<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: 18px;
    font-weight: 500;
    color: blueviolet;
}
</style>
</head>
<body>
<h1>Check Leap year or not</h1>
Enter the year<input class="year" type="text" />
<button class="Btn">CHECK</button>
<div class="result"></div>
<h3>Click on the above button check if the year above is leap year or not</h3>
<script>
let resultEle = document.querySelector(".result");
let yearEle = document.querySelector(".year");
document.querySelector(".Btn").addEventListener("click", () => {
    if (yearEle.value % 4 == 0) {
        resultEle.innerHTML = yearEle.value + " is a leap year ";
    } else resultEle.innerHTML = yearEle.value + " is not a leap year";
});
</script>
</body>
</html>

코드 설명

.year 입력창에서 사용자가 입력한 연도 값을 가져옵니다.
CHECK 버튼을 클릭하면 yearEle.value % 4 == 0 조건으로 연도를 4로 나눈 나머지가 0인지 검사합니다.
조건을 만족하면 “~ is a leap year(윤년입니다)”, 그렇지 않으면 “~ is not a leap year(윤년이 아닙니다)”라는 결과가 .result 영역에 출력됩니다.

실행 결과

JavaScript로 주어진 연도가 윤년인지 확인하는 방법

연도를 입력한 뒤 ‘CHECK’ 버튼을 클릭하면 아래와 같이 판별 결과가 화면에 표시됩니다.

JavaScript로 주어진 연도가 윤년인지 확인하는 방법

더 정확한 윤년 판별 로직

위 예제는 4로 나누어 떨어지는지만 검사하기 때문에, 1900년처럼 100으로는 나누어 떨어지지만 실제로는 윤년이 아닌 해까지 윤년으로 잘못 판별할 수 있습니다. 앞서 설명한 완전한 규칙을 적용하려면 아래와 같은 조건식을 사용하는 것이 좋습니다.

const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

이 조건식을 기존 예제의 if 문에 적용하면 2000년은 윤년으로, 1900년과 2100년은 평년으로 정확하게 판별할 수 있습니다.