자바스크립트 Date 객체는 날짜 정보를 밀리 세컨드 단위로 저장합니다. 1970년 1월 1일이 기준 시점이 되며, 입력된 날짜값과의 차이가 Date 객체의 값입니다.
Date 객체 생성
자바스크립트의 내장 객체인 Date로 객체를 만들면, 빈 객체가 아닌 현재 시간 정보가 객체 안에 자동 삽입됩니다.
var 객체명 = new Date();코드를 실행해서 웹페이지를 새로고침 해보면 초단위 데이터가 계속 갱신되는 것을 확인해 볼 수 있습니다.
//Date 객체 생성
var today = new Date();
//객체 출력
document.write(today);결과
Mon Mar 25 2025 12:35:29 GMT+0900 (한국 표준시)Date() 생성자의 인수
Date 생성자는 괄호 안의 인수가 들어갑니다. 년도, 월, 일, 시간, 분, 초, 밀리 세컨드 단위까지 작성될 수 있습니다.
var 객체명 = new Date(년, 월, 일, 시, 분, 초, 밀리세컨드);인수의 각 단위는 아래 표와 같습니다. 밀리 세컨드는 1초를 1000으로 나눈 단위로 자바스크립트의 기본 시간 단위입니다.
| 연도 | 4자리 숫자 |
|---|---|
| 월 | 0~11 |
| 일 | 1~31 |
| 시 | 0~23 |
| 분 | 0~59 |
| 초 | 0~59 |
| 밀리 세컨드 | 0~999 |
1997년, 1월 3일 2시 23분 54초를 표현할 경우 아래와 같이 작성합니다. 1월 ~ 12월은 각각 0 ~ 11로 대응됩니다.
//Date 생성자에 인수 입력
var today = new Date(1997, 0, 3, 2, 23, 54);
//객체 출력
document.write(today);결과
Fri Jan 03 1997 02:23:54 GMT+0900 (한국 표준시)날짜 정보를 인수로 입력시 따옴표 사이에 문자 자료형 형태로도 작성할 수 있습니다.
var today = new Date('1997-01-03 02:23:54');
document.write(today);Date 객체의 메서드 : get 시리즈
Date 객체의 메서드는 지정된 날짜 데이터를 조작, 조회하는 함수입니다. 이 메서드는 Date.prototype.메서드 형식으로 지정되어 있습니다. 프로토타입이므로 Date 내장 객체 사용시 메서드명만 가져오면 사용할 수 있습니다.
get 키워드가 붙은 메서드는 데이터를 불러오는 함수입니다. 년, 월, 일, 요일, 시간 등을 조회하거나 계산할 때 사용됩니다.
| 메서드 | 기능 |
|---|---|
| getFullYear() | 연도 4자리 표현 |
| getMonth() | 월 0~11 표현 |
| getDate() | 일 1~31 표현 |
| getDay() | 요일 0~6 표현 |
| getHours() | 시간 0~23 표현 |
| getMinutes() | 분 0~59 표현 |
| getSeconds() | 초 0~59 표현 |
| getMilliseconds() | 밀리 세컨드 0~999 표현 |
| getTime() | 1970-01-01 00:00:00 부터 지정시간 값 ms 단위로 지정 |
get 메서드를 활용해서 2100년 12월 31일의 연도, 월, 일, 요일 데이터를 출력해보겠습니다.
var future = new Date(2100, 11, 31);
//년도를 4자리 수로 출력
document.write( future.getFullYear() + "<br>" );
//월 값을 0~11로 -1 줄여서 출력
document.write( future.getMonth() + "<br>" );
//일 값을 1~31로 출력
document.write( future.getDate() + "<br>" );
//요일을 0~6으로 -1 줄여서 출력
document.write( future.getDay() + "<br>" );결과
2100
11
31
5getFullYear() 는 연도 4자리를 2100으로 출력했습니다. getMonth() 는 월 값을 0 ~ 11사이로 출력합니다. 12월이므로 11을 출력했습니다.
getDate() 메서드는 일 데이터를 1 ~ 31 사이로 출력합니다. getDay() 메서드는 요일 데이터를 0 ~ 6으로 출력합니다. 출력 값이 5이면, 금요일이라는 뜻입니다.(일 0, 월 1, 화 2, 수 3, 목 4, 금 5, 토 6)
Date 객체의 메서드 : set 시리즈
set 메서드는 값을 수정(set) 하는 함수입니다.
| 메서드 | 기능 |
|---|---|
| setFullYear() | 연도 4자리 수정 |
| setMonth() | 월 0~11 수정 |
| setDate() | 일 1~31 수정 |
| setHours() | 시간 0~23 수정 |
| setMinutes() | 분 0~59 수정 |
| setSeconds() | 초 0~59 수정 |
set 메서드를 사용해 2100년 12월 31일로 지정한 멤버값을 2099년 1월 1일로 변경한 예제입니다.
var future = new Date(2100, 11, 31);
//연도 수정
future.setFullYear(2099);
//월 수정
future.setMonth(0);
//일 수정
future.setDate(1);
//출력
document.write( future.getFullYear() + "<br>");
document.write( future.getMonth() + "<br>");
document.write( future.getDate() + "<br>");결과
2099
0
1요일 정보는 날짜와 연계되는 정보이므로 임의로 변경할 수 없습니다. 따라서 요일을 조회하는 getDay() 메서드는 있어도 요일을 수정하는 setDay() 메서드는 없습니다.
D-Day 계산에 필요한 getTime() 메서드
getTime() 메서드를 사용하면, D-Day와 같은 목표 시험 대비 남은 날짜 등의 잔여 기간을 계산할 수 있습니다.
목표 시험이 2050년 3월 3일, 공부 시작일은 2050년 1월 24일인 경우 D-Day를 계산하는 예제입니다.
//시험 날짜
var test = new Date(2050, 3, 3);
//공부 시작
var start = new Date(2050, 1, 24);
//시험 날짜 - 공부 시간
var d_day = ( test.getTime() - start.getTime() );
//밀리 세컨드 → 일
d_day = d_day / (24 * 60 * 60 * 1000);
document.write(d_day);결과
38컴퓨터는 날짜 정보의 차이를 어떤 방법으로 계산할까요? 날짜 + 시간 정보를 밀리 세컨드 단위로 변환한 후 계산을 합니다.
밀리 세컨드는 1/1000초입니다. getTime() 메서드는 1970년 1월 1일 00:00:00 시점을 기준으로 경과 시간으로 표현됩니다.
예를 들어 2050년 3월 3일 정보가 적힌 객체에 getTime() 메서드를 사용하면, 1970년 기준 시점과의 경과시간이 밀리 세컨드 단위로 기록됩니다.
같은 방식으로 2050년 1월 24일 정보도 밀리 세컨드 단위로 기록이됩니다. 이 두 차이를 빼면 D-Day의 잔여 날짜가 나오게 됩니다.
시간 단위는 밀리 세컨드이므로, 사람이 알아보기 쉽게 다시 몇 가지 시간 단위로 나눠주면 일(Day) 단위로 표기가 됩니다.
이 예제의 경우 24시간 x 60분 x 60초 x 1000ms 단위를 나눠줬습니다.
따라서 아래 두 수식은 서로 같으며, 양방향으로 자유롭게 전환이 될 수 있습니다.
var 객체명 = Date(년, 월, 일, 시, 분, 초, 밀리 세컨드);var 객체명 = Date(밀리 세컨드);밀리 세컨드 단위는 무엇이고, 왜 Date 객체에서 필요한지 이해하는 것이 곧 자바스크립트 Date 객체의 본질을 이해하는 핵심이라 볼 수 있습니다.