Date 객체와 날짜

zimablue·2023년 11월 10일
JavaScript

javascript

목록 보기
29/30

Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도 등으로도 활용할 수 있습니다.



객체 생성

new Date()

인수 없이 호출하면 현재 날짜와 시간이 저장된 Date 객체가 반환됩니다.

let now = new Date();
alert( now ); // 현재 날짜 및 시간이 출력



new Date(milliseconds)

UTC 기준(UTC+0) 1970년 1월 1일 0시 0분 0초에서 milliseconds 밀리초(1/1000 초) 후의 시점이 저장된 Date 객체가 반환됩니다.

new Date(timestamp)

// 1970년 1월 1일 0시 0분 0초(UTC+0)를 나타내는 객체
let Jan01_1970 = new Date(0);
alert( Jan01_1970 );

// 1초는 1000밀리초, 1시간은 3600초, 하루는 24시간

// 1970년 1월 1일의 24시간 후는 1970년 1월 2일(UTC+0)임
let Jan02_1970 = new Date(24 * 3600 * 1000);
alert( Jan02_1970 );

// 1970년 1월 1일의 24시간 전은 Dec 1969년 12월 31일
let Dec31_1969 = new Date(-24 * 3600 * 1000);
alert( Dec31_1969 );



new Date(datestring)

인수가 하나인데, 문자열이라면 해당 문자열은 자동으로 구문 분석(parsed)됩니다.

new Date(datestring)

let date = new Date("2017-01-26");
alert(date);
// 인수로 시간은 지정하지 않았기 때문에 GMT 자정이라고 가정하고
// 코드가 실행되는 시간대(timezone)에 따라 출력 문자열이 바뀜
// 따라서 얼럿 창엔
// Thu Jan 26 2017 11:00:00 GMT+1100 (Australian Eastern Daylight Time)
// 혹은
// Wed Jan 25 2017 16:00:00 GMT-0800 (Pacific Standard Time)등이 출력



new Date(year, month, date, hours, minutes, seconds, ms)

주어진 인수를 조합해 만들 수 있는 날짜가 저장된 객체가 반환됩니다.
(지역 시간대 기준)
첫 번째와 두 번째 인수만 필수값입니다.

new Date(2011, 0, 1, 0, 0, 0, 0); // 2011년 1월 1일, 00시 00분 00초
new Date(2011, 0, 1); // hours를 비롯한 인수는 기본값이 0이므로 위와 동일

let date = new Date(2011, 0, 1, 2, 3, 4, 567);
alert( date ); // 2011년 1월 1일, 02시 03분 04.567초

  • year
    : 반드시 네 자리 숫자여야 합니다. 2013은 괜찮고 98은 괜찮지 않습니다.

  • month
    : 0(1월)부터 11(12월) 사이의 숫자여야 합니다.

  • date
    : 일을 나타내는데, 값이 없는 경우엔 1일로 처리됩니다.

  • hours/ minutes/ seconds/ ms에 값이 없는 경우엔 0으로 처리됩니다.





날짜 구성요소 얻기

getFullYear()

연도(네 자릿수)를 반환합니다.

const today = new Date();
const year = today.getFullYear();

year // 2023



getMonth()

월을 반환합니다.
(0 이상 11 이하)

var Xmas95 = new Date("December 25, 1995 23:15:30");
var month = Xmas95.getMonth();

console.log(month); // 11



getDate()

일을 반환합니다.
(1 이상 31 이하)

const Xmas95 = new Date("December 25, 1995 23:15:30");
const day = Xmas95.getDate();

console.log(day); // 25



getHours()

주어진 날짜의 현지 시간 기준 시를 나타내는 0에서 23 사이의 정수를 반환합니다.

var Xmas95 = new Date("December 25, 1995 23:15:30");
var hours = Xmas95.getHours();

console.log(hours); // 23



getMinutes()

주어진 날짜의 현지 시간 기준 분을 나타내는 0에서 59 사이의 정수를 반환합니다.

const Xmas95 = new Date("December 25, 1995 23:15:30");
const minutes = Xmas95.getMinutes();

console.log(minutes); // 15



getSeconds()

현지 시간 기준 초를 나타내는 0에서 59 사이의 정수를 반환합니다.

const Xmas95 = new Date("December 25, 1995 23:15:30");
const seconds = Xmas95.getSeconds();

console.log(seconds); // 30



getMilliseconds()

주어진 날짜의 현지 시간 기준 밀리초를 나타내는 0에서 999 사이의 정수를 반환합니다.

const today = new Date();
const milliseconds = today.getMilliseconds();

console.log(milliseconds); // 789



getDay()

일요일을 나타내는 0부터 토요일을 나타내는 6까지의 숫자 중 하나를 반환합니다. 

// 현재 일시
let date = new Date();

// 현지 시간대가 UTC 시간대와 다르다면 아래 예시를 실행했을 때 얼럿창엔 다른 값이 출력됩니다.

// 현지 시간 기준 시
alert( date.getHours() );

// 표준시간대(UTC+0, 일광 절약 시간제를 적용하지 않은 런던 시간) 기준 시
alert( date.getUTCHours() );



getUTC

위 메서드 이름에 있는 ‘get’ 다음에 'UTC’를 붙여주면 표준시(UTC+0) 기준의 날짜 구성 요소를 반환해주는 메서드를 만들 수 있습니다.
( getUTCFullYear(), getUTCMonth(), getUTCDay() ... )



getTime()

주어진 일시와 1970년 1월 1일 00시 00분 00초 사이의 간격(밀리초 단위)인 타임스탬프를 반환합니다.

// 월은 0부터 시작하여 생일은 1995 년 1 월 10 일이됩니다.
var birthday = new Date(1994, 12, 10);

birthday.getTime() // 789663600000



getTimezoneOffset()

현지 시간과 표준 시간의 차이(분)를 반환합니다.

// UTC-1 시간대에서 이 예시를 실행하면 60이 출력됩니다.
// UTC+3 시간대에서 이 예시를 실행하면 -180이 출력됩니다.
alert( new Date().getTimezoneOffset() );





날짜 구성요소 설정하기

아래 메서드를 사용하면 날짜 구성요소를 설정할 수 있습니다.

setFullYear(year, [month], [date])

현지 시간에 따라 지정된 날짜의 전체 연도를 설정합니다.
1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자를 반환합니다.


  • yearValue
    연도의 숫자 값을 지정하는 정수입니다 (예 : 1995).

  • monthValue
    선택 과목. 1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.

  • dayValue
    선택 과목. 한 달의 날짜를 나타내는 1 - 31 사이의 정수입니다. dayValue 매개 변수를 지정하는 경우 monthValue도 지정해야합니다.


var theBigDay = new Date();
theBigDay.setFullYear(1997); // 879151599227

theBigDay // Mon Nov 10 1997 17:46:39 GMT+0900 (한국 표준시)



setMonth(month, [date])

현재 설정된 연도에 따라 지정된 날짜의 월을 설정합니다.
1970년 1월 1일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자를 반환합니다.


  • monthValue
    연도의 시작에서 오프셋된 연도의 월을 나타내는 0 기반 정수입니다. 그래서 0은 1월, 11은 12월, -1은 전년도의 12월, 12는 다음 해의 1월을 나타냅니다.

  • dayValue
    선택 사항. 한 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.


const theBigDay = new Date();
theBigDay.setMonth(6); // 1688979113924

theBigDay // Mon Jul 10 2023 17:50:54 GMT+0900 (한국 표준시)



setDate(date)

현재 설정된 월의 시작 부분을 기준으로 Date 객체의 날짜를 설정합니다.
1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 밀리 초를 반환합니다. (Date 개체도 변경됩니다).


  • dayValue
    월의 일을 나타내는 정수입니다.

const theBigDay = new Date(1962, 6, 7); // 1962-07-07
theBigDay.setDate(24); // 1962-07-24
theBigDay.setDate(32); // 1962-08-01
theBigDay.setDate(22); // 1962-08-22



setHours(hour, [min], [sec], [ms])

현지 시간에 따라 지정된 날짜의 시간을 설정합니다.
1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자를 반환합니다.


  • hoursValue
    시를 나타내는 0에서 23 사이의 정수입니다.

  • minutesValue
    선택 과목. 분을 나타내는 0에서 59 사이의 정수입니다.

  • secondsValue
    선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.

  • msValue
    선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.


const theBigDay = new Date();
theBigDay.setHours(7); // 1699570503466

theBigDay // Fri Nov 10 2023 07:55:03 GMT+0900 (한국 표준시)
let today = new Date();

today.setHours(0);
alert(today); // 날짜는 변경되지 않고 시만 0으로 변경됩니다.

today.setHours(0, 0, 0, 0);
alert(today); // 날짜는 변경되지 않고 시, 분, 초가 모두 변경됩니다(00시 00분 00초).



setMinutes(min, [sec], [ms])

현지 시간에 따라 지정된 날짜의 분을 설정합니다.
1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자를 반환합니다.


  • minutesValue
    분을 나타내는 0에서 59 사이의 정수입니다.

  • secondsValue
    선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.

  • msValue
    선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.


const theBigDay = new Date();
theBigDay.setMinutes(45); // 1699605912143

theBigDay // Fri Nov 10 2023 17:45:12 GMT+0900 (한국 표준시)



setSeconds(sec, [ms])

현지 시간에 따라 지정된 날짜의 초를 설정합니다.
1970년 1월 1일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자를 반환합니다.


  • secondsValue
    초를 나타내는 0에서 59 사이의 정수입니다.

  • msValue
    선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다


var theBigDay = new Date();
theBigDay.setSeconds(30); // 1699606770335

theBigDay // Fri Nov 10 2023 17:59:30 GMT+0900 (한국 표준시)



setMilliseconds(ms)

현지 시간에 따라 지정된 날짜의 밀리 초를 설정합니다.
1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자를 반환합니다.


  • millisecondsValue
    밀리 초를 나타내는 0에서 999 사이의 숫자입니다

var theBigDay = new Date();
theBigDay.setMilliseconds(100); // 1699606904100

theBigDay // Fri Nov 10 2023 18:01:44 GMT+0900 (한국 표준시)





자동 고침

Date 객체는 범위를 벗어나는 값을 설정하려고 하면 자동 고침 기능이 활성화되면서 값이 자동으로 수정됩니다.

let date = new Date(2013, 0, 32); // 2013년 1월 32일은 없습니다.
alert(date); // 2013년 2월 1일이 출력됩니다.

'2016년 2월 28일’의 이틀 뒤 날짜를 구하고 싶을 때 답은 3월 2일 혹은 3월 1일(윤년)이 될 수 있습니다.
Date 객체는 자동 고침으로 알아서 처리해 주기 때문에 2016년이 윤년인지 아닌지 생각할 필요 없이 단순히 이틀을 더해주기만 하면 답을 구할 수 있습니다. 

let date = new Date(2016, 1, 28);
date.setDate(date.getDate() + 2);

alert( date ); // 2016년 3월 1일

자동 고침은 일정 시간이 지난 후의 날짜를 구하는데도 종종 사용됩니다. 

let date = new Date();
// 지금부터 70초 후
date.setSeconds(date.getSeconds() + 70);

alert( date ); // 70초 후의 날짜가 출력됩니다.

0이나 음수를 날짜 구성요소에 설정하는 것도 가능합니다.

let date = new Date(2016, 0, 2); // 2016년 1월 2일

date.setDate(1); // 1일로 변경합니다.
alert( date ); // 01 Jan 2016

date.setDate(0); // 일의 최솟값은 1이므로 0을 입력하면 전 달의 마지막 날을 설정한 것과 같은 효과를 봅니다.
alert( date ); // 31 Dec 2015





Date 객체를 숫자로 변경해 시간차 측정하기

Date 객체를 숫자형으로 변경하면 타임스탬프(date.getTime()을 호출 시 반환되는 값)가 됩니다.

let date = new Date();
alert(+date); // 타임스탬프(date.getTime()를 호출한 것과 동일)
// 1699607369910

이를 응용하면 날짜에 마이너스 연산자를 적용해 밀리초 기준 시차를 구할 수 있습니다.

let start = new Date(); // 측정 시작

// 원하는 작업을 수행
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}

let end = new Date(); // 측정 종료

alert( `반복문을 모두 도는데 ${end - start} 밀리초가 걸렸습니다.` );





Date.now()

현재 타임스탬프를 반환하는 메서드 Date.now()를 응용하여 Date 객체를 만들지 않고도 시차를 측정할 수 있습니다.

Date.now()는 new Date().getTime()과 의미론적으로 동일하지만 중간에 Date 객체를 만들지 않는다는 점이 다릅니다. 따라서 new Date().getTime()를 사용하는 것보다 빠르고 가비지 컬렉터의 일을 덜어준다는 장점이 있습니다.

let start = Date.now(); // 1970년 1월 1일부터 현재까지의 밀리초

// 원하는 작업을 수행
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}

let end = Date.now(); // done

alert( `반복문을 모두 도는데 ${end - start} 밀리초가 걸렸습니다.` ); // Date 객체가 아닌 숫자끼리 차감





Date.parse와 문자열

Date.parse(str)를 사용하면 문자열에서 날짜를 읽어올 수 있습니다.
단, 문자열의 형식은 YYYY-MM-DDTHH:mm:ss.sssZ처럼 생겨야 합니다.
YYYY-MM-DD, YYYY-MM, YYYY같이 더 짧은 문자열 형식도 가능합니다.
문자열의 형식이 조건에 맞지 않은 경우엔 NaN이 반환됩니다.


  • YYYY-MM-DD
    : 날짜(연-월-일)

  • "T"
    : 구분 기호로 쓰임

  • HH:mm:ss.sss
    : 시:분:초.밀리초

  • 'Z'(옵션)
    : +-hh:mm 형식의 시간대를 나타냄.
    Z 한 글자인 경우엔 UTC+0을 나타냄


let ms = Date.parse('2012-01-26T13:51:50.417-07:00');

alert(ms); // 1327611110417  (타임스탬프)
let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );

alert(date); // Fri Jan 27 2012 05:51:50 GMT+0900 (한국 표준시)





출처: 모던 JavaScript 튜토리얼

profile
zimablue
이전 포스트

정규 표현식

다음 포스트

낯선 debounce 함수 구조, 코드 흐름 익숙해지기

0개의 댓글