[Javascript] Date 빌트인 객체의 프로퍼티와 메서드

1. Date 빌트인 객체의 쓰임새

Math 빌트인 객체는 자바에서의 Date와 유사점이 많은데요.

다만 자바처럼 여러 Date 내장 객체가 있는건 아니기에 JS에서의 날짜 내장 객체는 Date가 대표적이라는 점만 알아두시면 될 듯 합니다. (물론 JS를 위한 여러 커스텀 라이브러리들 또한 존재합니다.)

아무튼 이러한 JS에서의 Date객체는 크게 getter와 setter 두 가지 메서드로 나누어져 있으며, 초반에 생성하는 방법은 다음과 같습니다.

// 매개변수를 넣지 않을 경우 컴퓨터 시스템 상의 시간대를 기준으로 현재 날짜와 시간이 생성됩니다.
let date1 = new Date(); 
// 매개변수를 넣을 경우 연, 월, 일, 시, 분, 초로 넣습니다. (이 지정의 경우 월은 +1로 처리되기 때문에 사용시 주의가 필요합니다.)
let date2 = new Date(2024, 1, 1, 12, 0, 0);
// 문자열로 서식을 지정해서 넣어도 됩니다.
let date3 = new Date('2024-01-01 12:00:00');
console.log(date1)
console.log(date2)
console.log(date3)
// 현재 날짜 인스턴스를 ISO(국제 표준 시간) 기준으로 포맷팅함
console.log(date3.toISOString())

2. Getter 메서드

getter 메서드는 날짜 인스턴스의 특정 정보를 가져올 때 사용되며, 주로 DOM 요소에서 날짜를 출력할 때 사용합니다.

getFullYear, getMonth, getDate, getDay

각각 연도, 월, 일, 요일의 번호를 가져올 때 사용되는 메서드이며, 각 메서드의 범위는 다음과 같습니다.

• getFullYear : 4자리 숫자 형식의 연도
• getMonth : 0(1월) 부터 11(12월) 까지의 정수를 가져옵니다. 이 메서드를 사용할 때는 월이 0부터 시작하기 때문에 출력하거나 지정할 때 무조건 +1 처리를 해줘야 합니다.
• getDate : 1부터 31 까지의 정수를 가져옵니다.
• getDay : 0(일요일)부터 6(토요일) 까지의 정수를 가져옵니다.

let date1 = new Date();
let y = date1.getFullYear();
let m = date1.getMonth() + 1;
let d = date1.getDate();
let w = date1.getDay();
let week = ["일", "월", "화", "수", "목", "금", "토"]
let resultDate = `${y}-${m}-${d}-${week[w]}`;
console.log(resultDate);

getHours, getMinutes, getSeconds, getMilliseconds

각각 시, 분, 초, 밀리초를 가져오며, 주로 DOM 요소에서 즉각적으로 반영되는 시간 UI를 나타낼때 사용됩니다.

• getHours : 0부터 23까지의 정수를 가져옵니다.
• getMinutes : 0부터 59까지의 정수를 가져옵니다.
• getSeconds : 0부터 59까지의 정수를 가져옵니다.
• getMilliseconds : 0부터 999까지의 정수를 가져옵니다.

let date1 = new Date();
let h = date1.getHours();
let m = date1.getMinutes();
let s = date1.getSeconds();
let mm = date1.getMilliseconds();
let resultTime = `${h}:${m}:${s}:${mm}`;
console.log(resultTime);

3. Setter 메서드

setter 메서드는 날짜 인스턴스의 특정 정보를 새로 지정할 때 사용됩니다.

setFullYear, setMonth, setDate

각각 연도, 월, 일자를 세팅할 때 사용합니다.

• setFullYear : 4자리 숫자 형식의 연도를 기준으로 세팅합니다.
• setMonth : 0(1월) 부터 11(12월) 까지의 정수 범위 내에서 세팅합니다. 이 메서드를 사용할 때는 월이 0부터 시작하기 때문에 지정할 경우 무조건 +1 처리를 해줘야 합니다.
• setDate : 1부터 31 까지의 정수 범위 내에서 세팅합니다.

// 현재 날짜 객체 생성 후 출력
let date1 = new Date();
let y = date1.getFullYear();
let m = date1.getMonth() + 1;
let d = date1.getDate();
let resultDate = `${y}-${m}-${d}`;
console.log(resultDate);

// 특정 날짜로 세팅 후 출력
date1.setFullYear(2002);
date1.setMonth(5) + 1;
date1.setDate(18);
y = date1.getFullYear();
m = date1.getMonth();
d = date1.getDate()
resultDate = `${y}-${m}-${d}`;
console.log(resultDate);

setHours, setMinutes, setSeconds, setMilliseconds

각각 생성된 날짜 인스턴스의 시, 분, 초, 밀리초를 세팅할때 사용합니다.

• getHours : 0부터 23까지의 정수 범위 안에서 세팅합니다.
• getMinutes : 0부터 59까지의 정수 범위 안에서 세팅합니다.
• getSeconds : 0부터 59까지의 정수 범위 안에서 세팅합니다.
• getMilliseconds : 0부터 999까지의 정수 범위 안에서 세팅합니다.

// 현재 날짜 객체 생성 후 시간 정보 출력
let date1 = new Date();
let h = date1.getHours();
let m = date1.getMinutes();
let s = date1.getSeconds();
let mm = date1.getMilliseconds();
let resultTime = `${h}:${m}:${s}:${mm}`;
console.log(resultTime);

// 특정 시간으로 세팅 후 시간 정보 출력
date1.setHours(18);
date1.setMinutes(30);
date1.setSeconds(59);
date1.setMilliseconds(500);
h = date1.getHours();
m = date1.getMinutes();
s = date1.getSeconds();
mm = date1.getMilliseconds();
resultTime = `${h}:${m}:${s}:${mm}`;
console.log(resultTime);

4. getTime

getTime은 1970년 1월 1일 00:00:00 UTC (Unix epoch) 이후의 밀리초 수를 반환받는데 사용됩니다. 이러한 getTime메서드는 JS에서 굉장히 유용하게 사용되기 때문에 알아둬야할 필요가 있는데요. 기본적으로 특정 날차간의 차이를 계산하는데 사용되며, Counter나 D-Day 예제에 매우 유용하게 사용됩니다.

// 현재 날짜 객체 생성 후 밀리초로 환산
let date1 = new Date();
let mm = date1.getTime();
console.log(mm);

D-Day 간단 예제

// 현재 날짜
let today = new Date();

// D-day로 설정할 날짜 
let d_Day = new Date('2024-12-31 00:00:00');

// 현재 날짜와 D-day 사이의 밀리초의 차이를 계산
let differTime = d_Day.getTime() - today.getTime();

// 밀리초를 일(day) 단위로 변환
// 1일은 1000밀리초 * 60초 * 60분 * 24시간, 만약 월을 구하고 싶다면 여기에 *12를 곱하면 됨.
let leftedDay = Math.ceil(differTime / (1000 * 60 * 60 * 24)); 

// 웹페이지에 표시
document.write(`D-day까지 남은 일수: ${leftedDay}일`);