자바스크립트 Date 객체와 날짜

kiki97 ㅣ 2022. 9. 28. 21:46

내장 객체 Date

날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체Date

객체 생성하기

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

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

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

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

new Date(milliseconds) - 1970년 1월 1일 0시 0분 0초에서 밀리초 후의 시점이 저장된 Date객체 반환
1970년의 첫날을 기준으로 흘러간 밀리초를 나타내는 정수를 타임스탬프라고 부른다.
타임스탬프를 사용하면 날짜를 숫자 형태로 간편하게 나타낼 수 있다.

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(datestring) - 인수가 문자열이라면 해당 문자열은 자동으로 구문 분석이 된다.

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 - 반드시 네자리 숫자여야 한다.
month - 0(1월) 부터 11(12월) 사이의 숫자
date - 일을 나타내는데, 값이 없는 경우엔 1일로 처리
hours/minutes/seconds/ms - 값이 없는 경우엔 0으로 처리

날짜 구성요소 얻기

Date객체의 메서드를 사용하면 연, 월, 일 등의 값을 얻을 수 있습니다.

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

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

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

getHours(), getMinutes(), getSeconds(), getMilliseconds() - 시, 분, 초, 밀리초를 반환합니다.

getDay() - 일요일(0) 부터 토요일(6)까지의 숫자 반환

getYear()[더는 사용되지 않는 비표준 메서드] 말고 getFullYear()를 사용하자.

날짜 구성요소 설정하기

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

setMonth(month, [date])

setDate(date)

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

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

setSeconds(sec, [ms])

setMilliseconds(ms)

setTime(milliseconds) (1970년 1월 1일 00:00:00 UTC부터 밀리초 이후를 나타내는 날짜를 설정)

자동 고침

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

범위를 벗어나는 값을 설정하려고 하면 자동 고침 기능이 활성화되면서 값이 자동으로 수정됨

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

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

윤년인지 아닌지 생각할 필요 없이 이틀을 더해주면 Date객체가 알아서 처리해준다.

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

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

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

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

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

현재 타임스탬프를 반환하는 메서드

이 메소드는 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.now()를 사용하면 성능이 더 좋다.

벤치마크 테스트

비교 대상을 두고 성능을 비교하여 시험하고 평가할 때 쓰인다.

function diffSubtract(date1, date2) {
  return date2 - date1;
}

function diffGetTime(date1, date2) {
  return date2.getTime() - date1.getTime();
}

function bench(f) {
  let date1 = new Date(0);
  let date2 = new Date();

  let start = Date.now();
  for (let i = 0; i < 100000; i++) f(date1, date2);
  return Date.now() - start;
}

let time1 = 0;
let time2 = 0;

// 함수 bench를 각 함수(diffSubtract, diffGetTime)별로 10번씩 돌립니다.
for (let i = 0; i < 10; i++) {
  time1 += bench(diffSubtract);
  time2 += bench(diffGetTime);
}

alert( 'diffSubtract에 소모된 시간: ' + time1 );
alert( 'diffGetTime에 소모된 시간: ' + time2 );

좀 더 신뢰할만한 벤치마크 테스트를 만들려면 bechmark를 번갈아 가면서 여러 번 돌려야 한다.

Date.parse와 문자열

메서드 Date.parse(str)을 사용하면 문자열에서 날짜를 읽어올 수 있다.

단, 문자열의 형식은 YYYY-MM-DDTHH:mm:ss.sssZ 이여야 한다.

YYYY-MM-DD – 날짜(연-월-일)
"T" – 구분 기호로 쓰임
HH:mm:ss.sss – 시:분:초.밀리초
'Z'(옵션) – +-hh:mm 형식의 시간대를 나타냄. Z 한 글자인 경우엔 UTC+0을 나타냄

YYYY-MM-DD, YYYY-MM, YYYY같이 더 짧은 문자열 형식도 가능하다.

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

alert(ms); // 1327611110417  (타임스탬프)

문자열과 대응하는 날짜의 타임스탬프가 반환된다.
문자열의 형식이 조건에 맞지 않은 경우엔 NaN 반환

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

alert(date);

Date.parse(str)를 이용하면 타임스탬프만으로도 새로운 Date객체를 바로 만들 수 있다.

kiki-dev