본문 바로가기
웹/JavaScript

JS Date 객체

by 보먀 2024. 1. 5.
728x90
반응형

Date 객체란?

JavaScript 의 Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담음

 

Date 객체 만들기

 

new Date(milliseconds)

// 1970년 1월 1일 00:00:00 UTC + 1000ms -> 기준이 되는 시간 + 1s
let date = new Date(1000); 
console.log(date); // 1970-01-01T00:00:01.000Z

// 1970년 1월 1일 00:00:00 UTC + 1000ms -> 기준이 되는 시간 + 0.5s
let date = new Date(500); 
console.log(date); // 1970-01-01T00:00:01.500Z

 

new Date(dataString)

// new Date('YYYY-MM-DD')
let date = new Date('2024-01-05'); // 2024년 1월 5일
console.log(date); // 2024-01-05T00:00:00.000Z -> 설정 시간이 없음 00: 00: 00

//new Date('YYYY-MM-DDThh:mm:ss')
let date = new date('2024-01-05T22:22:22'); // 2024년 1월 5일 22시 00분 00초
console.log(date); // 2024-01-05T22:22:00.000Z -> 설정한 시간 정보가 들어감 22: 22: 22

 

new Date(YYYY, MM[, DD, hh, mm, ss, ms])

  • 연도와 월까지는 필수, 나머지는 옵션
  • 월은 0 부터 시작, 즉 0은 1월을 나타냄
// 2024년 1월 5일 22시 22분 22s 22ms
let date = new Date(2024, 0, 05, 22, 22, 22, 22); 
console.log(date); // 2024-01-01T22:22:22.022Z

 

  • 년도와 월까지만 쓰고 나머지 옵션 부분을 생략할 경우 -> new Date(YYYY, MM, 1, 0, 0, 0, 0) 으로 처리됨
// 2024년 1월
let date = new Date(2024, 0); 
console.log(date); // 2024-01-01T00:00:00.000Z

 

Z는 무엇일까?👇
'Zulu time' 이라고 하며 UTC 를 표현하는 뜻

 

Date 객체의 형변환

 

let myDate = new Date('2024-1-5');

console.log(typeof myDate); // object
console.log(String(myDate)); // Fri Jan 05 2024 00:00:00 GMT+0000
console.log(Number(myDate)); // 11704412800000
console.log(Boolean(myDate)); // true

 

number type 으로 변환할 경우 객체끼리의 사칙연산이 가능해짐

let date1 = new Date('2024-1-4');
let date2 = new Date('2024-1-5');

let timeDiff = date2 - date1;
console.log(timeDiff); // 86400000 (ms)
console.log(timeDiff / 1000); // 86400 (sec)
console.log(timeDiff / 1000 / 60) // 1440 (min)
console.log(timeDiff / 1000 / 60 / 60) // 24 (hour)
console.log(timeDiff / 1000 / 60 / 60 / 24) // 1 (date)

 

Date 객체 관련 메서드

 

Date.now & getTime

  • 1970년 1월 1일 00: 00: 00 (UTC) 를 기점으로 혅재까지 경과한 ms 를 숫자로 반환
  • 메소드가 호출된 시점의 타임스템프 값을 반환
  • 자료형은 number
  • Date.now 와 getTime 은 같은 값
  • Date.now는 새로운 객체를 만들지 않기 때문에 코드가 단순해 가독성이 높고 메모리 부담이 줄어듦  -> 특정한 시점이 아니라 단순히 그 당시 시간 값이 필요한 경우 유리
let myDate = new Date();
console.log(Date.now() === myDate.getTime()); // true

// 자료형
console.log(Date.now()); // number
console.log(date.getTime()); // number

 

get/set메소드

/*
getFullYear(): 연도(네 자리수)를 반환
getMonth(): 월을 반환 (1월을 나타내는 0 ~ 12월을 나타내는 11)
getDate(): 일을 반환
getHours(): 시각을 반환
getMinutes(): 분을 반환
getSeconds(): 초를 반환
getMilliseconds(): 밀리초를 반환
getDay(): 요일을 반환 (일요일을 나타내는 0 ~ 토요일을 타내는 6)
*/

/*
setFullYear(): 연도를 설정
setMonth(): 월을 설정
setDate(): 일을 설정
setHours(): 시각을 설정
setMinutes(): 분을 설정
setSeconds(): 초를 설정
setMilliseconds(): 밀리초를 설정
*/

let date = new Date(2011, 1, 1, 1, 1, 1, 1);

console.log(`${date.getFullYear()}년 ${date.getMonth()}월 ${date.getDate()}일 ${date.getHours()}시 ${date.getMinutes()}분 ${date.getSeconds()}초 ${date.getMilliseconds()}밀리초`); 
// 2001년 1월 1일 1시 1분 1초 1밀리초

date.setFullYear(date.getFullYear() + 2);
date.setMonth(date.getMonth() + 2);
date.setDate(date.getDate() + 2);
date.setHours(date.getHours() + 2);
date.setMinutes(date.getMinutes() + 2);
date.setSeconds(date.getSeconds() + 2);
date.setMilliseconds(date.getMilliseconds() + 2);

console.log(`${date.getFullYear()}년 ${date.getMonth()}월 ${date.getDate()}일 ${date.getHours()}시 ${date.getMinutes()}분 ${date.getSeconds()}초 ${date.getMilliseconds()}밀리초`); 
// 2003년 3월 3일 3시 3분 3초 3밀리초

 

자동고침 (autocorrection)

 

  • 범위를 벗어나는 값을 설정하려고 하면 자동 고침 기능이 활성화 되어 값이 자동으로 수정됨
let date = new Date('2024-01-32');
console.log(date); // 2024년 2월 1일로 출력됨
let date = new Date('2024-01-01');
date.setDate(0); // 일의 최솟값은 1 이므로 0 을 입력하면 전 달의 마지막 날을 설정한 것과 같은 효과
console.log(date); // 2023년 12월 31일

 

 

 

📚References📚

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

 

Date - JavaScript | MDN

JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.

developer.mozilla.org

 

https://ko.javascript.info/date

 

Date 객체와 날짜

 

ko.javascript.info

 

728x90
반응형

' > JavaScript' 카테고리의 다른 글

[JavaScript] 기초 - 데이터와 형태  (0) 2024.07.29
Promise 객체  (0) 2024.05.27
[JavaScript/자바스크립트] 모듈, pakage.json, pakage-lock.json  (0) 2024.05.18
JS 배열 Array  (0) 2024.01.05
JS 객체와 속성  (0) 2024.01.04