[모던 자바스크립트 Deep Dive] 27. Date

• 표준 빌트인 객체인 Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수
• 현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정

Date 생성자 함수

• Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 가짐
• Date 객체는 1970년 1월 1일 0시를 기준으로 계산
• Date 생성자 함수로 생성한 Date 객체는 기본적으로 현재 날짜와 시간을 나타내는 정수값을 가짐

1. new Date()

• 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 갖는 Date 객체 반환
• 인수와 new 연산자 없이 호출하면 객체가 아닌 문자열 반환

new Date(); // Thu Nov 23 2023 21:35:43 GMT+0900 (한국 표준시) {}
Date();		// 'Thu Nov 23 2023 21:36:44 GMT+0900 (한국 표준시)'

 

2. new Date(milliseconds)

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

new Date(0); // Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)
new Date(86400000); // Thu Jan 02 1970 09:00:00 GMT+0900 (한국 표준시)

 

3. new Date(dateString)

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

new Date('November 23, 2023 21:40:00');	// Thu Nov 23 2023 21:40:00 GMT+0900 (한국 표준시)

 

4. new Date(year, month [,day, hour, minute, second, millisecond])

• 연, 월, 일, 시, 분, 초, 밀리초를 의미하는 숫자를 인수로 전달하면 지정된 날짜와 시간을 나타내는 Date 객체 반환
• 연, 월은 반드시 지정해야하며 지정하지 않은 옵션 정보는 0또는 1로 초기화

new Date(2023, 11);	// Fri Dec 01 2023 00:00:00 GMT+0900 (한국 표준시)
new Date(2023, 11, 23, 21, 43); // Sat Dec 23 2023 21:43:00 GMT+0900 (한국 표준시)

Date 메서드

1. Date.now

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

Date.now();	 // 1700743723118
new Date(1700743723118);  // Thu Nov 23 2023 21:48:43 GMT+0900 (한국 표준시)

 

2. Date.parse

• 1970년 1월 1일 00:00:00을 기점으로 인수로 전달된 자정 시간까지의 밀리초를 숫자로 반환

Date.parse('2023/11/23/21:50:00');	// 1700743800000

 

3. Date.UTC

• UTC를 기점으로 인수로 전달된 자정 시간까지의 밀리초를 숫자로 반환
• new Date(year, month [,day, hour, minute, second, millisecond]) 와 같은 형식의 인수 사용
• month 는 월을 의미하는 0 부터 11 (0 : 1월, 1 : 2월 ... 11 : 12월 )

Date.UTC(2023, 0, 2);	// 1672617600000

 

4. Date.prototype.getFullYear

• 연도를 나타내는 정수 반환

new Date('2023/11/23').getFullYear();	// 2023

 

5. Date.prototype.setFullYear

• 연도를 나타내는 정수 설정
• 옵션으로 월, 일도 설정 가능

const today = new Date();

today.setFullYear(2022);
today.getFullYear(); // 2022

today.setFullYear(2023, 11, 23);
today.getFullYear(); // 2023

 

6. Date.prototype.getMonth

• 월을 나타내는 0 ~ 11 정수 반환 (1월은 0, 12월은 11)

new Date('2023/11/23').getMonth();	// 10

 

7. Date.prototype.setMonth

• 월을 나타내는 0 ~ 11 의 정수 설정
• 월 이외에 옵션으로 일 설정 가능

const today = new Date();

today.setMonth(0);
today.getMonth(); // 0 (1월)

today.setMonth(11, 1);
today.getMonth(); // 11 (12월)

 

8. Date.prototype.getDate

• 날짜 (1 ~ 31)를 나타내는 정수 반환

new Date('2023/11/23');	// 23

 

9. Date.prototype.setDate

• 날짜 (1 ~ 31)를 나타내는 정수 설정

const today = new Date();

today.setDate(1);
today.getDate(); // 1

 

10. Date.prototype.getDay

• 요일(0 ~ 6)을 나타내는 정수 반환

월	화	수	목	금	토	일
1	2	3	4	5	6	0

new Date('2023/11/23').getDay();	//4

 

11. Date.prototype.getHours

• 시간 (0 ~ 23)을 나타내는 정수 반환

new Date('2023/11/23/22:04').getHours();	//22

 

12. Date.prototype.setHours

• 시간 (0 ~ 23)을 나타내는 정수 설정
• 시간 외에도 옵션으로 분, 초, 밀리초 설정 가능

const today = new Date();

today.setHours(7);
today.getHours(); // 7

today.setHours(0, 0, 0, 0); // 00:00:00:00
today.getHours(); // 0

 

13. Date.prototype.getMinutes

• 분(0 ~ 59)를 나타내는 정수 반환

new Date('2023/11/23/22:06').getMinutes();	// 06

 

14. Date.prototype.setMinutes

• 분(0 ~ 59)를 나타내는 정수 설정
• 분 외에도 초, 밀리초 설정 가능

const today = new Date();

today.setMinutes(7);
today.getMinutes(); // 07

today.setMinutes(9, 10, 999); // HH:09:10:999
today.getMinutes(); // 9

 

15. Date.prototype.getSeconds

• 초(0 ~ 59)를 나타내는 정수 반환

new Date('2023/11/23/22:09:10').getSeconds();	// 10

 

16. Date.prototype.setSeconds

• 초(0 ~ 59)를 나타내는 정수 설정
• 초 외에도 밀리초 설정 가능

const today = new Date();

today.setSeconds(30);
today.getSeconds(); // 30

today.setSeconds(56, 0); // HH:MM:56:000
today.getSeconds(); // 56

 

17. Date.prototype.getMilliseconds

• 밀리초(0 ~ 999)를 나타내는 정수 반환

new Date('2023/11/23/22:11:123').getMilliseconds();	// 123

 

18. Date.prototype.setMilliseconds

• 밀리초(0 ~ 999)를 나타내는 정수 설정

const today = new Date();

today.setMilliseconds(123);
today.getMilliseconds(); // 123

 

19. Date.prototype.getTime

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

// new Date() Thu Nov 23 2023 22:13:50 GMT+0900 (한국 표준시) {}
new Date(new Date()).getTime(); // 1700745252813

 

20. Date.prototype.setTime

• 1970년 1월 1일 00:00:00 를 기점으로 경과된 밀리초 설정

const today = new Date();

today.setTime(86400000); // 86400000 는 하루를 나타냄
console.log(today);	// Fri Jan 02 1970 09:00:00 GMT+0900 (한국 표준시)

 

21. Date.prototype.getTimezoneOffset

• UTC와 Date 객체에 저장된 locale 시간과의 차이를 분 단위로 반환
• UTC = KST - 9h

const today = new Date();

console.log(today.getTimezoneOffset() / 60); // -9

 

22. Date.prototype.toDateString

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

const today = new Date();
today.toString();	// 'Thu Nov 23 2023 22:43:06 GMT+0900 (한국 표준시)'
today.toDateString();	// 'Thu Nov 23 2023'

 

23. Date.prototype.toTimeString

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

const today = new Date();

today.toTimeString();	//'22:43:06 GMT+0900 (한국 표준시)'

 

24. Date.prototype.toISOString

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

const today = new Date();
today.toISOString();	// '2023-11-23T13:43:06.226Z'

 

25. Date.prototype.toLocaleString

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

const today = new Date();

today.toLocaleString();	//'2023. 11. 23.'
today.toLocaleString('en-US');	//'11/23/2023'

 

26.Date.prototype.toLocaleTimeString

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

const today = new Date();

today.toLocaleTimeString();	// '오후 10:43:06'
today.toLocaleTimeString('en-US');	// '10:43:06 PM'

 

Date 를 활용한 시계 예제

(function printNow() {
  const today = new Date();

  const dayNames = ["(일요일)", "(월요일)", "(화요일)", "(수요일)", "(목요일)", "(금요일)", "(토요일)"];

  const day = dayNames[today.getDay()];

  const year = today.getFullYear();
  const month = today.getMonth() + 1;
  const date = today.getDate();
  let hour = today.getHours();
  let minute = today.getMinutes();
  let second = today.getSeconds();

  const ampm = hour >= 12 ? "PM" : "AM";

  // 12시간제로 변경
  hour %= 12;
  hour = hour || 12; // hour 0인 경우 12를 재할당

  // 10 미만인 분,초 2자리로 변경
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;

  const now = `${year}년 ${month}월 ${date}일 ${day} ${hour}:${minute}:${second} ${ampm}`;

  console.log(now);

  setTimeout(printNow, 1000); // 1초마다 타이머 함수 재귀호출
})();