[모던 자바스크립트 딥다이브] 30장 Date

Date 생성자 함수

new Date()

Date 생성자 함수를 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 가지는 Date 객체를 반환한다.

new Date(); // Thu Aug 08 2024 21:36:47 GMT+0900 (한국 표준시)

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

Date 생성자 함수에 연, 월, 일, 시, 분, 초, 밀리초를 의미하는 숫자를 인수로 전달하면 지정된 날짜와 시간을 나타내는 Date 객체를 반환한다.

// 월을 나탄내는 2는 3월을 의미한다. 
new Date(2024,2); // Fri Mar 01 2024 00:00:00 GMT+0900 (한국 표준시)

new Date(2024,2,19,10,00,00,0); // Tue Mar 19 2024 10:00:00 GMT+0900 (한국 표준시)

// 다음처럼 표현하면 가독성이 훨씬 좋다.
new Date('2024/3/26/10:00:00:00'); // Tue Mar 26 2024 10:00:00 GMT+0900 (한국 표준시)

Date 메서드

Date.now

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

const now = Date.now(); // 1723121049806

// 인수로 전달된 밀리초만큼 경과한 날짜와 시간을 나타내는 Date 객체를 반환한다.
new Date(now); // Thu Aug 08 2024 21:44:37 GMT+0900 (한국 표준시)

Date.parse

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

Date.parse('Jan 2, 1970 00:00:00 UTC'); // 86400000
Date.parse('Jan 2, 1970 00:00:00'); // 54000000
Date.parse('2024/08/08/10:00:00'); // 1723078800000

Date.UTC

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

Date.UTC 메서드는 new Date(year, month[, day, hour, minute, second, millisecond])]와 같은 형식의 인수를 사용해야 한다.

Date.UTC(1970, 0, 2); // 86400000
Date.UTC('2020/02/02'); // NaN

Date.prototype.getFullYear

Date 객체의 연도를 나타내는 정수를 반환한다.

const today = new Date('2024/08/08').getFullYear(); // 2024

// 년도 지정
today.setFullYear(2020); 
today.getFullYear(); // 2020

// 년도/월/일 지정
today.setFullYear(2010,12,12);
today.getFullYear(); // 2010

Date.prototype.getMonth

월을 나타내는 0 ~ 11의 정수를 반환한다. 1월은 0, 12월은 11

new Date('2024/08/08').getMonth(); // 7

Date.prototype.setMonth

const today = new Date();

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

Date.prototype.getDate

객체의 날짜(1~31)를 나타내는 정수를 반환한다.

new Date('2024/12/12').getDate(); // 12

Date.prototype.setDate

Date 객체의 날짜를 나타내는 정수를 설정한다.

const today = new Date()


// 날짜 지정
today.setDate(2);
today.getDate(); // 2

Date.prototype.getDay

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

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

Date.prototype.getHours

Date 객체의 시간(0 ~ 23)을 나타내는 정수를 반환한다.

new Date('2024/08/08/12:00').getHours(); // 12

Date.prototype.setHours

Date 객체의 시간(0 ~ 23)을 나타내는 정수를 설정한다.

const today = new Date();

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

Date.prototype.getMinutes

Date 객체의 분(0 ~ 59)을 나타내는 정수를 반환한다.

new Date('2024/08/08/12:30').getMinutes(); // 30

Date.prototype.setMinutes

Date 객체의 분(0 ~ 59)을 나타내는 정수를 설정한다.

const today = new Date();

// 분 지정
today.setMinutes(48);
today.getMinutes(); // 48

Date.prototype.getSeconds

Date 객체의 초(0 ~ 59)를 나타내는 정수를 반환한다.

new Date('2024/08/08/12:30:10').getSeconds(); // 10

Date.prototype.setSeconds

Date 객체의 초(0 ~ 59)를 나타내는 정수를 설정한다.

const today = new Date();

// 초 지정
today.setSeconds(24);
today.getSeconds(); // 24

Date.prototype.getMilliseconds

Date 객체의 밀리초(0 ~ 999)를 나타내는 정수를 반환한다.

new Date('2024/08/08/12:30:10:123').getMilliseconds(); // 123

Date.prototype.setMilliseconds

Date 객체의 밀리초(0 ~ 999)를 나타내는 정수를 설정한다.

const today = new Date();

// 밀리초 지정
today.setMilliseconds(156);
today.getMilliseconds(); // 156

Date.prototype.getTime

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

new Date('2024/08/08/12:30').getTime(); // 1723087800000

Date.prototype.setTime

1970년 1월 1일 00:00:00(UTC)을 기점으로 경과된 밀리초를 설정한다.

const today = new Date();

today.setTime(86400000);

console.log(today); // Fri Jan 02 1970 09:00:00 GMT+0900 (한국 표준시)

Date를 활용한 시계 예제

다음 예제는 현재 날짜와 시간을 초 단위로 반복 출력한다.

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

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

  // getDay 메서드는 해당 요일(0 ~ 6)을 나타내는 정수를 반환한다.

  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가 0이면 12를 재할당
  hour = hour || 12;

  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);
})();