JavaScript 날짜 메서드란?
JavaScript의 Date 객체는 현재 날짜와 시간을 손쉽게 조회하고 조작할 수 있도록 다양한 getter 메서드를 제공합니다. 연도, 월, 일뿐만 아니라 시, 분, 초, 밀리초까지 세밀하게 가져올 수 있어 달력, 타이머, 로그 기록 등 다양한 기능을 구현할 때 유용하게 활용됩니다.
다음은 자주 사용되는 대표적인 날짜 메서드 목록입니다.
| 메서드 | 설명 |
|---|---|
| getFullYear() | 연도를 4자리 숫자로 반환합니다. (예: 2024) |
| getMonth() | 월을 숫자로 반환합니다. 단, 0이 1월이므로 실제 월보다 1 작은 값이 나옵니다. |
| getDate() | 일(날짜)을 숫자로 반환합니다. (1~31) |
| getHours() | 시를 반환합니다. (0~23) |
| getMinutes() | 분을 반환합니다. (0~59) |
| getSeconds() | 초를 반환합니다. (0~59) |
| getMilliseconds() | 밀리초를 반환합니다. (0~999) |
| getTime() | 1970년 1월 1일 이후 경과된 시간을 밀리초 단위로 반환합니다. |
| getDay() | 요일을 숫자로 반환합니다. 0이 일요일이며, 토요일은 6입니다. |
| Date.now() | 1970년 1월 1일 00:00:00 UTC 이후 경과된 밀리초 수를 반환합니다. |
특히 getMonth()와 getDay()는 0부터 시작하는 값을 반환하기 때문에, 실제 화면에 표시할 때는 +1을 하거나 배열로 요일 이름을 매핑하는 방식을 많이 사용합니다.
예제 코드
다음은 JavaScript에서 몇 가지 날짜 메서드를 실제로 사용하는 예제입니다.
<!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;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Date Methods</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 다양한 날짜 메서드의 결과를 확인할 수 있습니다.
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let date = new Date();
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML += "getFullYear() = " + date.getFullYear() + "<br>";
sampleEle.innerHTML += "getMinutes() = " + date.getMinutes() + "<br>";
sampleEle.innerHTML += "Date.now() = " + Date.now() + "<br>";
sampleEle.innerHTML += "getMonth() = " + date.getMonth() + "<br>";
});
</script>
</body>
</html>실행 결과
페이지가 로드되면 아래와 같이 버튼과 안내 문구가 화면에 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 각 날짜 메서드의 실행 결과가 div 영역에 순차적으로 추가되어 나타납니다.
정리
Date 객체의 getter 메서드들은 모두 호출 시점의 날짜 정보를 기준으로 값을 반환합니다. Date.now()처럼 인스턴스 생성 없이 바로 호출할 수 있는 정적 메서드도 있으니, 용도에 맞게 선택하여 사용하면 됩니다. 특히 타임스탬프가 필요한 경우에는 getTime() 또는 Date.now()를 활용하는 것이 가장 간편합니다.