[JS] Date

📌 표준 빌트인 객체 Date

• Date는 날짜와 시간(연, 월, 일, 시, 분, 초, 밀리초)을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수임
• Date 객체는 UTC(협정 세계시, 기술적인 표기에서 사용됨)를 사용함
• 현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정됨

 

📌 Date 생성자 함수

• Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 가짐
  (1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체가 나타내는 날짜와 시간까지의 밀리초)
• Date 생성자 함수로 생성한 Date 객체는 기본적으로 현재 날짜와 시간을 나타내는 정수값을 가지며, 다른 날짜와 시간을 다루고 싶은 경우 Date 생성자 함수에 명시적으로 해당 날짜와 시간 정보를 인수로 지정할 수 있음

 

new Date()

• Date 생성자 함수를 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 가지는 Date 객체를 반환함
• Date 생성자 함수를 new 연산자 없이 호출하면 Date 객체를 반환하지 않고 날짜와 시간 정보를 나타내는 문자열을 반환함

// new 연산자와 함께 호출
new Date(); // -> Fri Jul 19 2024 02:54:26 GMT+0900 (한국 표준시)

// new 연산자 없이 호출
Date(); // -> 'Fri Jul 19 2024 02:54:41 GMT+0900 (한국 표준시)'

 

new Date(milliseconds)

• Date 생성자 함수에 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을 나타내는 Date 객체를 반환함

// 한국 표준시 KST는 협정 세계시 UTC에 9시간을 더한 시간
new Date(0); // -> Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)

// 86400000는 1day를 의미함
new Date(86400000); // -> Fri Jan 02 1970 09:00:00 GMT+0900 (한국 표준시)

 

new Date(dateString)

• Date 생성자 함수에 날짜와 시간을 나타내는 문자열을 인수로 전달하면 지정된 날짜와 시간을 나타내는 Date 객체를 반환함
• 인수로 전달한 문자열은 Date.parse 메서드에 의해 해석 가능한 형식이어야 함

new Date('July 19, 2024 03:00:00'); // -> Fri Jul 19 2024 03:00:00 GMT+0900 (한국 표준시)

new Date('2024/07/19/03:00:00'); // -> Fri Jul 19 2024 03:00:00 GMT+0900 (한국 표준시)

 

new Date(yaer, month[, date, hour, minute, second, millisecond])

• Date 생성자 함수에 연, 월, 일, 시, 분, 초, 밀리초를 의미하는 숫자를 인수로 전달하면 지정된 날짜와 시간을 나타내는 Date 객체를 반환함
• 인수로 연, 월은 반드시 지정해야 하며, 나머지 지정하지 않은 옵션 정보는 0 또는 1로 초기화됨
• 연, 월을 지정하지 않은 경우 1970년 1월 1일 00:00:00(UTC)을 나타내는 Date 객체를 반환함

인수	내용
year	연을 나타내는 1900년 이후의 정수, 0부터 99는 1900부터 1999로 처리됨
month	월을 나타내는 0 ~ 11까지의 정수 (주의: 0부터 시작, 0 = 1월)
day	일을 나타내는 1 ~ 31까지의 정수
hour	시를 나타내는 0 ~ 23까지의 정수
minute	분을 나타내는 0 ~ 59까지의 정수
second	초를 나타내는 0 ~ 59까지의 정수
millisecond	밀리초를 나타내는 0 ~ 999까지의 정수

 

// 월을 나타내는 6은 7월을 의미함
new Date(2024, 6); // -> Mon Jul 01 2024 00:00:00 GMT+0900 (한국 표준시)

new Date(2024, 6, 19, 3, 00, 00, 0); // -> Fri Jul 19 2024 03:00:00 GMT+0900 (한국 표준시)

// 다음처럼 표현하면 가독성이 훨씬 좋음
new Date('2024/7/19/03:00:00'); // -> Fri Jul 19 2024 03:00:00 GMT+0900 (한국 표준시)

 

📌 Date 메서드

Date.now

• 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환함

const now = Date.now();
console.log(now); // 1721326385398

new Date(now); // -> Fri Jul 19 2024 03:13:05 GMT+0900 (한국 표준시)

 

Date.parse

• 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 지정 시간(new Date(dateString)의 인수와 동일한 형식)까지의 밀리초를 숫자로 반환함

// UTC
Date.parse('July 19, 2024 00:00:00 UTC'); // -> 1721347200000

// KST
Date.parse('July 19, 2024 09:00:00'); // -> 1721347200000

// KST
Date.parse('2024/07/19/09:00:00'); // -> 1721347200000

 

Date.UTC

• 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 지정 시간까지의 밀리초를 숫자로 반환함
• Date.UTC 메서드는 new Date(year, month[,day, hour, minute, second, millisecond])와 같은 형식의 인수를 사용해야 함
• Date.UTC 메서드의 인수는 로컬 타임(KST)이 아닌 UTC로 인식됨

Date.UTC(2024, 6, 20); // -> 1721433600000

Date.UTC('2024/7/20'); // -> NaN

 

Date.prototype.getFullYear

• Date 객체의 연도를 나타내는 정수를 반환함

new Date('2024/07/20').getFullYear(); // -> 2024

 

Date.prototype.setFullYear

• Date 객체의 연도를 나타내는 정수를 설정함
• 연도 이외에 옵션으로 월, 일도 설정 가능함

const today = new Date();

// 년도 지정
today.setFullYear(2000);
today.getFullYear(); // -> 2000

// 년도/월/일 지정
today.setFullYear(1999, 0, 1);
today.getFullYear(); // -> 1999

 

Date.prototype.getMonth

• Date 객체의 월을 나타내는 0 ~ 11의 정수를 반환함
• 1월은 0, 12월은 11임

new Date('2024/07/20').getMonth(); // -> 6

 

Date.prototype.setMonth

• Date 객체의 월을 나타내는 0 ~ 11의 정수를 설정함
• 월 이외에 옵션으로 일도 설정할 수 있음

const today = new Date();

// 월 지정
today.setMonth(0);
today.getMonth(); // -> 1

// 월/일 지정
today.setMonth(11, 1); // 12월 1일
today.getMonth(); // -> 11

 

Date.prototype.getDate

• Date 객체에 날짜(1 ~ 31)를 나타내는 정수를 반환함

new Date('2024/07/20').getDate(); // -> 20

 

Date.prototype.setDate

• Date 객체에 날짜(1 ~ 31)를 나타내는 정수를 설정함

const today = new Date();

// 날짜 지정
today.setMonth(1);
today.getMonth(); // -> 1

 

Date.prototype.getDay

• Date 객체의 요일(0 ~ 6)을 나타내는 정수를 반환함

요일	반환값
일요일	0
월요일	1
화요일	2
수요일	3
목요일	4
긐요일	5
토요일	6

 

new Date('2024/07/20').getDay(); // -> 6

 

Date.prototype.getHours

• Date 객체에 시간(0 ~ 23)을 나타내는 정수를 반환함

new Date('2024/07/22/15:00').getHours(); // -> 15

 

Date.prototype.setHours

• Date 객체에 시간(0 ~ 23)을 나타내는 정수를 설정함
• 시간 이외에 옵션으로 분, 초, 밀리초도 설정할 수 있음

const today = new Date();

// 시간 지정
today.setHours(7);
today.getHours(); // -> 7

// 시간/분/초/밀리초 지정
today.setHours(9, 0, 0, 0); // 00:00:00:00
today.getHours(); // -> 9

 

Date.prototype.getMinutes

• Date 객체에 분(0 ~ 59)을 나타내는 정수를 반환함

new Date('2024/07/22/15:24').getMinutes(); // -> 24

 

Date.prototype.setMinutes

• Date 객체에 분(0 ~ 59)을 나타내는 정수를 설정함
• 분 이외에 옵션으로 초, 밀리초도 설정할 수 있음

const today = new Date();

// 분 지정
today.setMinutes(50);
today.getMinutes(); // -> 50

// 분/초/밀리초 지정
today.setMinutes(5, 10, 999); // HH:05:10:999
today.getMinutes(); // -> 5

 

Date.prototype.getSeconds

• Date 객체에 초(0 ~ 59)를 나타내는 정수를 반환함

new Date('2024/07/22/15:24:45').getSeconds(); // -> 45

 

Date.prototype.setSeconds

• Date 객체에 초(0 ~ 59)를 나타내는 정수를 설정함
• 초 이외에 옵션으로 밀리초도 설정할 수 있음

const today = new Date();

// 초 지정
today.setSeconds(30);
today.getSeconds(); // -> 30

// 초/밀리초 지정
today.setSeconds(10, 0); // HH:MM:10:000
today.getSeconds(); // -> 10

 

Date.prototype.getMilliseconds

• Date 객체에 밀리초(0 ~ 59)를 나타내는 정수를 반환함

new Date('2024/07/22/15:24:45:150').getMilliseconds(); // -> 150

 

Date.prototype.setMilliseconds

• Date 객체에 밀리초(0 ~ 59)를 나타내는 정수를 설정함

const today = new Date();

// 밀리초 지정
today.setMilliseconds(123);
today.getMilliseconds(); // -> 123

 

Date.prototype.getTime

• 1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체의 시간까지 경과된 밀리초를 반환함

new Date('2024/07/22/15:30').getTime(); // -> 1721629800000

 

Date.prototype.setTime

• Date 객체에 1970년 1월 1일 00:00:00(UTC)을 기점으로 경과된 밀리초를 설정

const today = new Date();

today.setTime(1721629800000);
console.log(today); // Mon Jul 22 2024 15:30:00 GMT+0900 (한국 표준시)

 

Date.prototype.getTimezoneOffset

• UTC와 Date 객체에 지정된 로캘(locale) 시간과의 차이를 분 단위로 반환함
• KST는 UTC에 9시간을 더한 시간 (UTC = KST - 9h)

const today = new Date();

today.getTimezoneOffset() / 60; // -> -9

 

Date.prototype.toDateString

• 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 날짜를 반환함

const today = new Date('2024/07/22/15:30');

today.toString(); // -> 'Mon Jul 22 2024 15:30:00 GMT+0900 (한국 표준시)'
today.toDateString(); // -> 'Mon Jul 22 2024'

 

Date.prototype.toTimeString

• 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 시간을 표현한 문자열을 반환함

const today = new Date('2024/07/22/15:30');

today.toString(); // -> 'Mon Jul 22 2024 15:30:00 GMT+0900 (한국 표준시)'
today.toTimeString(); // -> '15:30:00 GMT+0900 (한국 표준시)'

 

Date.prototype.toISOString

• ISO 8601 형식으로 Date 객체의 날짜와 시간을 표현한 문자열을 반환함

const today = new Date('2024/07/22/15:30');

today.toString(); // -> 'Mon Jul 22 2024 15:30:00 GMT+0900 (한국 표준시)'
today.toISOString(); // -> '2024-07-22T06:30:00.000Z'

today.toISOString().slice(0, 10); // -> '2024-07-22'
today.toISOString().slice(0, 10).replace(/-/g, ''); // -> '20240722'

 

Date.prototype.toLocaleString

• 인수로 전달한 로캘을 기준으로 Date 객체의 날짜와 시간을 표현한 문자열을 반환함
• 인수를 생략한 경우 브라우저가 동작 중인 시스템의 로캘을 적용함

const today = new Date('2024/07/22/15:30');

today.toString(); // -> 'Mon Jul 22 2024 15:30:00 GMT+0900 (한국 표준시)'
today.toLocaleString(); // -> '2024. 7. 22. 오후 3:30:00'

today.toLocaleString('ko-KR'); // -> '2024. 7. 22. 오후 3:30:00'
today.toLocaleString('en-US'); // -> '7/22/2024, 3:30:00 PM'
today.toLocaleString('ja-JP'); // -> '2024/7/22 15:30:00'

 

Date.prototype.toLocaleTimeString

• 인수로 전달한 로캘을 기준으로 Date 객체의 시간을 표현한 문자열을 반환함
• 인수를 생략한 경우 브라우저가 동작 중인 시스템의 로캘을 적용함

const today = new Date('2024/07/22/15:30');

today.toString(); // -> 'Mon Jul 22 2024 15:30:00 GMT+0900 (한국 표준시)'
today.toLocaleTimeString(); // -> '오후 3:30:00'

today.toLocaleTimeString('ko-KR'); // -> '오후 3:30:00'
today.toLocaleTimeString('en-US'); // -> '3:30:00 PM'
today.toLocaleTimeString('ja-JP'); // -> '15:30:00'

 

 

 

참고문헌 및 출처 : 모던 자바스크립트 Deep Dive (이웅모)