Post

[모던 자바스크립트 Deep Dive]30장 Date

Posted
By your_full_name 15 min read
  • 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체인 동시에 생성자 함수
  • 현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정

30.1 Date 생성자 함수

  • Date 생성자 함수로 생성한 Date 객체
    • 내부적으로 날짜와 시간을 나타내는 정수값을 가짐
    • 정확히는, 1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체가 나타내는 날짜와 시간까지의 밀리초

30.1.1 new Date()

  • 현재 날짜와 시간을 가지는 Date 객체 반환

  • 콘솔에 출력하면 기본적으로 날짜와 시간 정보를 출력

    1

      new Date(); // -> Mon Jul 06 2020 01:03:18 GMT+0900 (대한민국 표준시)
  • new 연산자 없이 호출하는 경우
    • Date 객체를 반환하지 않고 날짜와 시간 정보를 나타내는 문자열 반환
    1

      Date(); // -> "Mon Jul 06 2020 01:10:47 GMT+0900 (대한민국 표준시)"

30.1.2 new Date(milliseconds)

1
2
3
4
5
6
7
8
9
10
11

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

/*
86400000ms는 1day를 의미한다.
1s = 1,000ms
1m = 60s * 1,000ms = 60,000ms
1h = 60m * 60,000ms = 3,600,000ms
1d = 24h * 3,600,000ms = 86,400,000ms
*/
new Date(86400000); // -> Fri Jan 02 1970 09:00:00 GMT+0900 (대한민국 표준시)
  • 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을 나타내는 Date 객체 반환

30.1.3 new Date(dateString)

1
2
3
4
5

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 (대한민국 표준시)
  • 인수로 전달된 날짜와 시간을 나타내는 Date 객체 반환
  • 인수로 전달한 문자열은 Date.parse 메서드에 의해 해석 가능한 형식이어야 함

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

1
2
3
4
5
6
7
8
9
10
11

// 월을 나타내는 2는 3월을 의미한다. 2020/3/1/00:00:00:00
new Date(2020, 2);
// -> Sun Mar 01 2020 00:00:00 GMT+0900 (대한민국 표준시)

// 월을 나타내는 2는 3월을 의미한다. 2020/3/26/10:00:00:00
new Date(2020, 2, 26, 10, 00, 00, 0);
// -> Thu Mar 26 2020 10:00:00 GMT+0900 (대한민국 표준시)

// 다음처럼 표현하면 가독성이 훨씬 좋다.
new Date('2020/3/26/10:00:00:00');
// -> Thu Mar 26 2020 10:00:00 GMT+0900 (대한민국 표준시)
  • 인수로 전달된 날짜와 시간을 나타내는 Date 객체 반환
    • year: 1900년 이후의 정수이며, 0부터 99는 1900부터 1999로 처리된다.
    • month: 0부터 11까지의 정수, 즉 0이 1월이다.
  • 연과 월은 반드시 지정
    • 지정하지 않은 경우 1970년 1월 1일 00:00:00(UTC)을 나타내는 Date 객체 반환
  • 지정하지 않은 옵션 정보는 0 또는 1로 초기화

30.2 Date 메서드

30.2.1 Date.now

1
2
3
4
5
6

const now = Date.now(); // -> 1593971539112

// Date 생성자 함수에 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00(UTC)을
// 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을 나타내는 Date 객체를 반환한다.
// (30.1.2절 "new Date(milliseconds)" 참고)
new Date(now); // -> Mon Jul 06 2020 02:52:19 GMT+0900 (대한민국 표준시)
  • 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시각까지 경과한 밀리초를 숫자로 반환

30.2.2 Date.parse

1
2
3
4
5
6
7
8

// UTC
Date.parse('Jan 2, 1970 00:00:00 UTC'); // -> 86400000

// KST
Date.parse('Jan 2, 1970 09:00:00'); // -> 86400000

// KST
Date.parse('1970/01/02/09:00:00');  // -> 86400000
  • 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 지정 시간까지의 밀리초를 숫자로 반환
    • 이때 인수는 new Date(dateString)의 인수와 동일한 형식

30.2.3 Date.UTC

1
2

Date.UTC(1970, 0, 2); // -> 86400000
Date.UTC('1970/1/2'); // -> NaN
  • 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 지정 시간까지의 밀리초를 숫자로 반환
    • 이때 인수는 new Date(year, month[, day, hour, minute, second, millisecond])의 인수와 동일한 형식
  • 인수는 로컬 타임(KST)이 아닌 UTC로 인식된다.

30.2.4 Date.prototype.getFullYear

1

new Date('2020/07/24').getFullYear(); // -> 2020
  • Date 객체의 연도를 나타내는 정수를 반환

30.2.5 Date.prototype.setFullyear

1
2
3
4
5
6
7
8
9

const today = new Date();

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

// 년도/월/일 지정
today.setFullYear(1900, 0, 1);
today.getFullYear(); // -> 1900
  • Date 객체에 연도를 나타내는 정수를 설정
  • 연도 이외에 월, 일도 설정 가능

30.2.6 Date.prototype.getMonth

1

new Date('2020/07/24').getMonth(); // -> 6
  • Date 객체의 월을 나타내는 정수 반환
  • 정수는 0에서 11까지이며 0이 1월이다.

30.2.7 Date.prototype.setMonth

1
2
3
4
5
6
7
8
9

const today = new Date();

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

// 월/일 지정
today.setMonth(11, 1); // 12월 1일
today.getMonth(); // -> 11
  • Date 객체에 월을 나타내는 정수를 설정
  • 정수는 0에서 11까지이며 0이 1월이다.
  • 월 이외에 일도 설정 가능

30.2.8 Date.prototype.getDate

1

new Date('2020/07/24').getDate(); // -> 24
  • Date 객체의 날짜를 나타내는 정수 반환
  • 정수는 1에서 31까지다.

30.2.9 Date.prototype.setDate

1
2
3
4
5

const today = new Date();

// 날짜 지정
today.setDate(1);
today.getDate(); // -> 1
  • Date 객체에 날짜를 나타내는 정수를 설정

30.2.10 Date.prototype.getDay

1

new Date('2020/07/24').getDay(); // -> 5
  • Date 객체의 요일을 나타내는 정수를 반환
  • 일요일부터 0으로 시작하며 토요일까지 6으로 끝난다.

30.2.11 Date.prototype.getHours

1

new Date('2020/07/24/12:00').getHours(); // -> 12
  • Date 객체의 시간을 나타내는 정수를 반환
  • 정수는 0에서 23까지다.

30.2.12 Date.prototype.setHours

1
2
3
4
5
6
7
8
9

const today = new Date();

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

// 시간/분/초/밀리초 지정
today.setHours(0, 0, 0, 0); // 00:00:00:00
today.getHours(); // -> 0
  • Date 객체에 시간을 나타내는 정수를 설정
  • 시간 이외에 분, 초, 밀리초도 설정 가능

30.2.13 Date.prototype.getMinutes

1

new Date('2020/07/24/12:30').getMinutes(); // -> 30
  • Date 객체의 분을 나타내는 정수를 반환
  • 정수는 0에서 59까지다.

30.2.14 Date.prototype.setMinutes

1
2
3
4
5
6
7
8
9

const today = new Date();

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

// 분/초/밀리초 지정
today.setMinutes(5, 10, 999); // HH:05:10:999
today.getMinutes(); // -> 5
  • Date 객체에 분을 나타내는 정수를 설정
  • 분 이외에 초, 밀리초도 설정 가능

30.2.15 Date.prototype.getSeconds

1

new Date('2020/07/24/12:30:10').getSeconds(); // -> 10
  • Date 객체의 초을 나타내는 정수를 반환
  • 정수는 0에서 59까지다.

30.2.16 Date.prototype.setSeconds

1
2
3
4
5
6
7
8
9

const today = new Date();

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

// 초/밀리초 지정
today.setSeconds(10, 0); // HH:MM:10:000
today.getSeconds(); // -> 10
  • Date 객체에 초를 나타내는 정수를 설정
  • 초 이외에 밀리초도 설정 가능

30.2.17 Date.prototype.getMilliseconds

1

new Date('2020/07/24/12:30:10:150').getMilliseconds(); // -> 150
  • Date 객체의 밀리초를 나타내는 정수를 반환
  • 정수는 0에서 999까지다.

30.2.18 Date.prototype.setMilliseconds

1
2
3
4
5

const today = new Date();

// 밀리초 지정
today.setMilliseconds(123);
today.getMilliseconds(); // -> 123
  • Date 객체에 밀리초를 나타내는 정수를 설정

30.2.19 Date.prototype.getTime

1

new Date('2020/07/24/12:30').getTime(); // -> 1595561400000
  • 1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체의 시간까지 경과된 밀리초 반환

30.2.20 Date.prototype.setTime

1
2
3
4
5

const today = new Date();

// 1970년 1월 1일 00:00:00(UTC)를 기점으로 경과된 밀리초 설정
today.setTime(86400000); // 86400000는 1day를 나타낸다.
console.log(today); // -> Fri Jan 02 1970 09:00:00 GMT+0900 (대한민국 표준시)
  • Date 객체에 1970년 1월 1일 00:00:00(UTC)을 기점으로 경과된 밀리초 설정

30.2.21 Date.prototype.getTimezoneOffset

1
2
3
4

const today = new Date(); // today의 지정 로캘은 KST다.

//UTC와 today의 지정 로캘 KST와의 차이는 -9시간이다.
today.getTimezoneOffset() / 60; // -9
  • UTC와 Date 객체에 지정된 로캘(locale) 시간과의 차이를 분 단위로 반환
  • 참고) UTC = KST - 9h

30.2.22 Date.prototype.toDateString

1
2
3
4

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
  • 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 날짜 반환

30.2.23 Date.prototype.toTimeString

1
2
3
4

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 (대한민국 표준시)
  • 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 시간 반환

30.2.24 Date.prototype.toISOString

1
2
3
4
5
6
7

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

today.toISOString().slice(0, 10); // -> 2020-07-24
today.toISOString().slice(0, 10).replace(/-/g, ''); // -> 20200724
  • ISO 8601 형식의 문자열로 Date 객체의 날짜와 시간 반환

30.2.25 Date.prototype.toLocaleString

1
2
3
4
5
6
7

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

30.2.26 Date.prototype.toLocaleTimeString

1
2
3
4
5
6
7

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

30.3 Date를 활용한 시계 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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

  // 1초마다 printNow 함수를 재귀 호출한다. 41.2.1절 "setTimeout / clearTimeout" 참고
  setTimeout(printNow, 1000);
}());

/*
2022년 9월 12일 (월요일) 11:55:43 AM
2022년 9월 12일 (월요일) 11:55:44 AM
2022년 9월 12일 (월요일) 11:55:45 AM
...
*/
book_notes
모던 자바스크립트 Deep Dive
This post is licensed under CC BY 4.0 by the author.