30장 Date

30.1 Date 생성자 함수

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

30.1 Date 생성자 함수

• 1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체가 나타내는 날짜와 시간까지의 밀리초를 나타낸다.
• Date객체는 내부적으로 정수값 0을 가지며, 1970년 1월 2일 0시를 나타내는 Date 객체는 내부적으로 정수값 86,400,000(24h 60m 60s * 1000ms)을 갖는다.

30.1.1 new Date()

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

new Date(); // Mon Jan 29 2024 23:11:58 GMT+0900 (한국 표준시)
Date(); // 'Mon Jan 29 2024 23:11:59 GMT+0900 (한국 표준시)'

30.1.2 new Date(milliseconds)

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

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

30.1.3 new Date(dateString)

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

new Date('May 26, 2020 10:00:00'); // Tue May 26 2020 10:00:00 GMT+0900 (한국 표준시)
new Date('2020/03/26/10:00:00'); // Thu Mar 26 2020 10:00:00 GMT+0900 (한국 표준시)

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

• 연, 월, 일, 시, 분, 초, 밀리초를 의미하는 숫자를 인수로 전달하면 지정된 날짜와 시간을 나타내는 Date 객체를 반환한다.
• 연, 월은 필수값이다.
• 인수는 다음과 같다.
  • year : 연을 나타내는 1900년 이후의 정수. 0부터 99는 1900부터 1999로 처리됨.
  • month : 월을 나타내는 0 ~ 11까지의 정수
  • day : 일을 나타내는 1 ~ 31까지의 정수
  • hour : 시를 나타내는 0 ~ 23까지의 정수
  • minute : 분을 나타내는 0 ~ 59까지의 정수
  • second : 초를 나타내는 0 ~ 59까지의 정수
  • millisecond : 밀리초를 나타내는 0 ~ 999까지의 정수

new Date(2020, 2); // Sun Mar 01 2020 00:00:00 GMT+0900 (한국 표준시)
new Date(2020, 2, 26, 10, 00, 00, 0); // Thu Mar 26 2020 10:00:00 GMT+0900 (한국 표준시)

Date 메서드

30.2.1 Date.now

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

Date.now();

30.2.2 Date.parse

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

// UTC
Date.parse('Jan 2, 1970 00:00:00 UTC'); // 86400000
// KST
Date.parse('Jan 2, 1970 00:00:00'); // 54000000
Date.parse('1970/01/02/09:00:00'); // 86400000

30.2.3 Date.UTC

• 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 지정 시간까지의 밀리초를 숫자로 반환한다.
• new Date(year, month[, day, hour, minute, second, millisecond])와 같은 형식의 인수를 사용해야 한다

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

30.2.4 Date.prototype.getFullYear

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

new Date('2020/07/24').getFullYear(); // 2020

30.2.4 Date.prototype.setFullYear

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

const today = new Date();

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

today.setFullYear(1900, 0, 1);
today.getFullYear(); // 1900

30.2.6 Date.prototype.getMonth

• Date 객체의 월을 나타내는 0 ~ 11의 정수를 반환한다.

new Date('2020/07/24').getMonth(); // 6

30.2.7 Date.prototype.setMonth

• Date 객체의 월을 나타내는 0 ~ 11의 정수를 설정한다.

const today = new Date();

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

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

30.2.8 Date.prototype.getDate

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

new Date('2020/07/24').getDate(); // 24

30.2.9 Date.prototype.setDate

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

const today = new Date();

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

30.2.10 Date.prototype.getDay

• Date 객체의 요일을 나타내는 정수를 반환한다.
• 일요일(0) / 월요일(1) / 화요일(2) / 수요일(3) / 목요일(4) / 금요일(5) / 토요일(6)

new Date('2020/07/24').getDay(); // 5

30.2.11 Date.prototype.getHours

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

new Date('2020/07/24/12:00').getHours(); // 12

30.2.12 Date.prototype.setHours

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

const today = new Date();

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

30.2.13 Date.prototype.getMinutes

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

new Date('2020/07/24/12:30').getMinutes(); //30

30.2.14 Date.prototype.setMinutes

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

const today = new Date();

today.setMinutes(50);
today.getMinutes(); // 50

30.2.15 Date.prototype.getSeconds

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

new Date('2020/07/24/12:30:10').getSeconds(); // 10

30.2.16 Date.prototype.setSeconds

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

const today = new Date();

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

30.2.17 Date.prototype.getMilliseconds

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

new Date('2020/07/24/12:30:10:150').getMilliseconds(); // 150

30.2.18 Date.prototype.setMilliseconds

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

const today = new Date();

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

30.2.19 Date.prototype.getTime

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

new Date('2020/07/24/12:30').getTime(); // 1595561400000

30.2.20 Date.prototype.setTime

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

const today = new Date();

today.getTime(86400000);
console.log(today); // Mon Jan 29 2024 23:39:22 GMT+0900 (한국 표준시)

30.2.21 Date.prototype.getTimezoneOffset

• UTC와 Date 객체에 지정된 locale 시간과의 차이를 분 단위로 반환한다.

const today = new Date();

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

30.2.22 Date.prototype.toDateString

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

const today = new Date('2020/7/24/12:30');

today.toString(); // 'Fri Jul 24 2020 12:30:00 GMT+0900 (한국 표준시)'
today.toDateString(); // 'Fri Jul 24 2020'

30.2.23 Date.prototype.toTimeString

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

const today = new Date('2020/7/24/12:30');

today.toString(); // 'Fri Jul 24 2020 12:30:00 GMT+0900 (한국 표준시)'
today.toTimeString(); // '12:30:00 GMT+0900 (한국 표준시)'

30.2.24 Date.prototype.toISOString

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

const today = new Date('2020/7/24/12:30');

today.toString(); // 'Fri Jul 24 2020 12:30:00 GMT+0900 (한국 표준시)'
today.toISOString(); // '2020-07-24T03:30:00.000Z'

30.2.25 Date.prototype.toLocaleString

• 인수로 전달한 locale을 기준으로 Date 객체의 날짜와 시간을 표현한 문자열을 반환한다.

const today = new Date('2020/7/24/12:30');

today.toString(); // 'Fri Jul 24 2020 12:30:00 GMT+0900 (한국 표준시)'
today.toLocaleString(); // '2020. 7. 24. 오후 12:30:00'
today.toLocaleString('ko-KR'); // '2020. 7. 24. 오후 12:30:00'
today.toLocaleString('en-US'); // '7/24/2020, 12:30:00 PM'
today.toLocaleString('ja-JP'); // '2020/7/24 12:30:00'

30.2.26 Date.prototype.toLocaleTimeString

• 인수로 전달한 locale을 기준으로 Date 객체의 시간을 표현한 문자열을 반환한다.

const today = new Date('2020/7/24/12:30');

today.toString(); // 'Fri Jul 24 2020 12:30:00 GMT+0900 (한국 표준시)'
today.toLocaleTimeString(); // '오후 12:30:00'
today.toLocaleTimeString('ko-KR'); // '오후 12:30:00'
today.toLocaleTimeString('en-US'); // '12:30:00 PM'
today.toLocaleTimeString('ja-JP'); // '12:30:00'

30.3 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';

    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} ${hours}:${minute}:${second} ${ampm}`;

    console.log(now);

    // 1초마다 prinNow 함수 재귀 호출
    setTimeout(printNow, 1000);

}())