[JS] new Date()

Park Bumsoo·2022년 6월 4일
0

new Date()

new Date()는 연도부터 초 단위까지 국제 표준시(UTC)를 기준으로 결과를 보여주는 함수이다.

1. new Date()의 표현

new Date()는 매개변수에 따라서 아래와같이 다양한 형태로 생성할 수 있다.

new Date()
new Date(value)
new Date(dateString)

new Date(year, monthIndex)
new Date(year, monthIndex, day)
new Date(year, monthIndex, day, hours)
new Date(year, monthIndex, day, hours, minutes)
new Date(year, monthIndex, day, hours, minutes, seconds)
new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)

출처 : MDN web docs

위 매개변수를 토대로 글 작성일인 6월4일을 예제로 들어보게 된다면

new Date() // 2022-06-04T06:33:29.459Z
new Date(1654301111111) // 2022-06-04T00:05:11.111Z
new Date('2022-06-04') // 2022-06-04T00:00:00.000Z

new Date(2022, 6) // 2022-06-30T15:00:00.000Z
new Date(2022, 5, 5) // 2022-06-04T15:00:00.000Z
new Date(2022, 5, 4, 12) // 2022-06-04T03:00:00.000Z

new Date(2022, 5, 4, 24, 30) // 2022-06-04T15:30:00.000Z 
new Date(2022, 5, 4, 24, 30, 30) // 2022-06-04T15:30:30.000Z
new Date(2022, 5, 4, 24, 30, 30, 321) // 2022-06-04T15:30:30.321Z

2. month

위와 같은 결과가 나오게 되는데, 몇 가지의 이상한 점이 있다.
new Date(2022, 5, 5) // 2022-06-04T15:00:00.000Z

산출된 결과는 분명 6월 4일인데 입력한 값은 new Date(2022, 5, 5)이다.
이 이유는

Javascript에서의 Month1~12의 범위가 아닌 Index와 동일하게 0~11의 값을 가지기 때문이다.

따라서 6월을 표기할 때는 6번째 Index인 5 를 입력해 주어야 한다.

3. hours

위와 같은 예제를 한번 더 보자
new Date(2022, 5, 5) // 2022-06-04T15:00:00.000Z
그렇다면 시간을 나타내는 hours는 왜 5 인데 6월 4일이 출력 되었을까?
이유는 국제표준시(UTC) 때문이다.

국제표준시(UTC)대한민국 시간대 는 9시간의 격차를 가지고 있으며

흔히 대한민국 시간대 === (GMT+9) 라고 표기한다.

그렇기 때문에 5일을 표기 하였음에도 -9시간이 적용된 4일 15시 가 나오게 된 것이다.

이를 한국 시간으로 바꾸려면

const now = new Date();

const utcValue = now.getTime()

const koreaTime = 9 * 60 * 60 * 1000; 

const koreaDate = new Date(utcValue + koreaTime);

now // 2022-06-04T06:59:09.255Z
koreaDate // 2022-06-04T15:59:09.255Z

의 형태로 (UTC)를 표기해주는 변수 now 에서 +9가 된 대한민국 시간인
koreaDate // 2022-06-04T15:59:09.255Z 을 얻을 수 있다.

4. new Date() 관련 메서드

Date.now()
Date.now() 함수는 1970.01.01 00:00:00을 기준으로 현재시간까지 경과한 밀리초를 기준으로
숫자로 반환하는 메서드 입니다.

예제)
Date.now() // 1654331397649
또한 반환된 숫자는 위에 있다싶이.
new Date(1654301111111) // 2022-06-04T00:05:11.111Z
같은 형태로 new Date()를 통해 반활 할 수 있습니다.

Date.parse()
Date.now() 함수는 1970.01.01 00:00:00을 기준으로 지정된시간(DateString의 형태)까지 경과한 밀리초를 기준으로숫자로 반환하는 메서드 입니다.
Date.parse('2022-06-04') // 1654300800000
Number 형태의 Value를 입력할 경우 NaN이 표시 된다.
Date.parse(1654300800000) // NaN
마찬가지로 반환값을 new Date()에 사용할 수 있다.
new Date(1654300800000) // 2022-06-04T00:00:00.000Z

Date.UTC()
Date.now() 함수는 1970.01.01 00:00:00을 기준으로 지정된시간(매개변수)까지 경과한 밀리초를 기준으로숫자로 반환하는 메서드 입니다.

Date.UTC(2022, 05, 04) // 1654300800000

위에서 말했다 싶이 두 번째로 받아오는 매개변수인 month는 0~11의 범위를 가지므로
Index값을 입력해 준다.

new Date(1654300800000) // 2022-06-04T00:00:00.000Z

5. 활용하기

new Date()를 이용한 초 단위까지 D-day 만들기
https://velog.io/@pbs1014/ReactJS-new-Date%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-D-day-%EB%A7%8C%EB%93%A4%EA%B8%B0

시작일~마감일 사이모든날짜 배열에 담기(출력하기)
https://velog.io/@pbs1014/JS-new-Date%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8B%9C%EC%9E%91%EC%9D%BC%EB%A7%88%EA%B0%90%EC%9D%BC-%EC%82%AC%EC%9D%B4%EB%AA%A8%EB%93%A0%EB%82%A0%EC%A7%9C-%EB%B0%B0%EC%97%B4%EC%97%90-%EB%8B%B4%EA%B8%B0

profile
프론트엔드 주니어 개발자(React, Next.js)

0개의 댓글