JavaScript에서는 날짜(Date 객체)를 아주 간단하게 비교할 수 있습니다. 비교 대상이 과거, 현재, 미래 중 어느 시점의 날짜든 상관없으며, 과거 날짜를 미래 날짜와 비교하거나 미래 날짜를 현재 날짜와 비교하는 것도 모두 가능합니다.
날짜 비교의 기본 원리
JavaScript의 Date 객체는 내부적으로 1970년 1월 1일(UTC) 자정부터 경과한 밀리초 단위의 숫자 값으로 저장됩니다. 따라서 두 Date 객체를 >, <, >=, <= 같은 비교 연산자로 바로 비교하면 이 밀리초 값을 기준으로 크고 작음이 판단됩니다. 즉, 더 나중의 날짜일수록 더 큰 값을 가지므로 일반적인 숫자 비교와 동일한 방식으로 처리할 수 있습니다.
예제 1: 과거 날짜와 현재 날짜 비교
다음 예제에서는 2000년의 특정 날짜를 오늘 날짜와 비교한 후, 비교 결과에 따라 알맞은 메시지를 화면에 출력합니다.
<html>
<body>
<p id="compare"></p>
<script>
var today = new Date();
var otherday = new Date();
otherday.setFullYear(2000, 2, 14);
if (otherday > today) {
var msg = "입력하신 날짜는 미래 날짜입니다";
} else {
var msg = "입력하신 날짜는 과거 날짜입니다";
}
document.getElementById("compare").innerHTML = msg;
</script>
</body>
</html>
실행 결과
입력하신 날짜는 과거 날짜입니다
2000년으로 설정된 날짜는 현재 시점보다 확실한 과거이므로, 조건문의 else 블록이 실행되어 위와 같은 메시지가 출력됩니다.
예제 2: 미래 날짜와 현재 날짜 비교
이번에는 2900년의 날짜를 오늘 날짜와 비교해 보겠습니다.
<html>
<body>
<p id="compare"></p>
<script>
var today = new Date();
var otherday = new Date();
otherday.setFullYear(2900, 2, 14);
if (otherday > today) {
var msg = "입력하신 날짜는 미래 날짜입니다";
} else {
var msg = "입력하신 날짜는 과거 날짜입니다";
}
document.getElementById("compare").innerHTML = msg;
</script>
</body>
</html>
실행 결과
입력하신 날짜는 미래 날짜입니다
2900년으로 설정된 날짜는 현재보다 훨씬 이후의 시점이므로 if 조건이 참이 되어, 미래 날짜라는 메시지가 출력됩니다.
함께 알아두면 좋은 팁
- 월(month)은 0부터 시작합니다. setFullYear(2000, 2, 14)에서 두 번째 인자인 월은 0이 1월을 의미하므로, 여기서 2는 실제로 3월을 가리킵니다.
- 같은 날짜인지 확인할 때는 getTime()을 사용하세요. == 또는 === 연산자로 Date 객체를 직접 비교하면 객체 참조가 서로 달라 항상 false가 반환됩니다. 날짜의 동등성을 확인하려면 date1.getTime() === date2.getTime()처럼 밀리초 값으로 변환한 뒤 비교해야 합니다.