Date
아마 자바스크립트를 사용하다보면 날짜를 나타내기 위해서 Date를 한번은 사용했던 경험이 있을텐데, 자세히 알고 써보자는 생각에 책에 있는 내용을 정리해봤습니다 😀
Date는 날짜와 시간(연,월,일,시,분,초,밀리초)을 다루는 메서드를 제공하는 빌트인 객체 이면서 생성자 함수 이며 Date를 써서 나오는 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정되어 나타나게 됩니다!
UTC = 국제 표준 시 = GMT (그리니치 평균시)
KST = 한국 표준시 = UTC + 9시간
UTC 00:00 AM = KST 09:00 AM
Date 생성자 함수
Date를 보면 기준이 되는 날짜가 하나 있는데, 1970년 1월 1일 00:00:00(UTC) 입니다.
왜 1970의 첫날일까 찾아보니 과거 유닉스 개발자들이 적당한 과거의 날짜를 찾다가 시간을 측정하는 기준점으로 1970년 1월 1일을 선택했고 자바스크립트가 개발될때도 유닉스 시간이 기준이 되어서 널리 사용되어서 지금까지 표준으로 쭉 사용되고 있다고 하네요..😅
그래서 Date 객체는 이 기준 시점(정수값 0)으로부터 경과된 밀리초 단위의 정수값을 기반으로 날짜와 시간을 계산합니다.
🕖
86,400,000ms = 1일
1s = 1,000ms
1m = 60s 1,000ms = 60,000ms
1h = 60m 60,000ms(1m) = 3,600,000ms
1d = 24h * 3,600,000ms(1h) = 86,400,000ms
예를 들어 1970년 1월 2일 00:00:00(UTC)는 1월 1일에서 하루가 지났기 때문에 정수값 86,400,000입니다.
Date 생성 방법
Date는 여러 방식으로 생성 할 수 있습니다.
new Date() // Wed Aug 13 2025 23:49:17 GMT+0900 (한국 표준시)
Date() // 'Wed Aug 13 2025 23:49:26 GMT+0900 (한국 표준시)'여기서 new Date()는 Date 객체를 반환하고, 그냥 Date()만 호출하면 단순히 문자열을 반환한다는 점이 다릅니다.
Date 생성자 함수를 사용할때 연,월,일,시,분,초,밀리초를 숫자를 인수로 전달하면 지정한 날짜와 시간을 나타내는 Date객체를 반환해줍니다. (연,월은 반드시 지정)
new Date(milliseconds) 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수의 밀리초만큼 경과한 날짜와 시간을 나타내는 Date 객체를 반환합니다.
new Date(0) // Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)
new Date(86400000) // Fri Jan 02 1970 09:00:00 GMT+0900 (한국 표준시)new Date(dataString) 날짜와 시간을 나타내는 문자열을 인수로 전달하면 지정된 날짜와 시간을 나타내는 Date 객체를 반환합니다.
new Date('aug 19, 2025 00:23:55') // Tue Aug 19 2025 00:23:55 GMT+0900 (한국 표준시)new Date(year, month[,day,hour,minute,second,millisecond]) 연,월,일,시,분,초,밀리초를 의미하는 숫자를 인수로 전달하면 지정된 날짜와 시간을 나타내는 Date 객체를 반환합니다. (연,월은 반드시 지정해야하며 지정하지 않은 옵션 정보는 0또는 1로 초기화)
year: 1900년 이후 정수 0 ~ 99 = 1900 ~ 1999
month: 월을 나타내는 0 ~ 11 (0 = 1월)
day: 일을 나타내는 1 ~ 31까지의 정수
hour: 시를 나타내는 0 ~ 23까지의 정수
minute: 분을 나타내는 0 ~ 59까지의 정수
secound: 초를 나타내는 0 ~ 59까지의 정수
millisecond: 밀리초를 나타내는 0 ~ 999까지의 정수
2025년, 8월 (7)을 인수로 전달하면 아래와 같은 날짜가 바로 나옵니다!
new Date(2025, 7) // Fri Aug 01 2025 00:00:00 GMT+0900 (한국 표준시)Date 메서드
Date에는 아래와 같은 메서드들이 있습니다.
Date.now(): 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재시간까지 경과한 밀리초 숫자 반환
Date.now() // 1755531116100 Date.parse(): 인수로 전달된 지정 시간의 인수와 동일한 형식의 밀리초를 숫자로 반환
Date.parse('2025/08/19/12:40:30') // 1755574830000Date.UTC(): 로컬 타임(KST)가 아닌 UTC로 인수를 인식하며 UTC 밀리초를 숫자로 반환
Date.UTC(2025,7) // 1754006400000
Date.UTC('2025/8/18') // NaN (KST는 인식하지 못한다)Date 객체 메서드들
get과 set으로 시작하는 메서드들은 대부분 값을 가져오거나 설정하는 역할을 합니다.
Date.protoType.getFullYear(): Date 객체의 연도를 나타내는 정수 반환
Date.protoType.setFullYear(): Date 객체의 연도를 나타내는 정수 설정
new Date('2025/08/18').getFullYear() // 2025
const today = new Date()
today.setFullYear(2025)
today.getFullYear() // 2025
today.setFullYear(2024,0,1)
today.getFullYear() // 2024연도뿐만 아니라 월, 일, 시, 분, 초, 밀리초, 요일도 반환받고, 설정또한 가능합니다!
Date.protoType.getMonth(): 월 정수 반환 (0~11)
Date.protoType.setMonth(): 월 정수 설정 (0~11)
Date.protoType.getDate(): 날짜 정수 반환 (1~31)
Date.protoType.setDate(): 날짜 정수 설정 (1~31)
Date.protoType.getDay(): 요일 정수 반환 (0 일요일 ~ 6 토요일)
Date.protoType.getHours(): 시간 정수 반환 (0~23)
Date.protoType.setHours(): 시간 정수 설정 (0~23)
Date.protoType.getMinutes(): 분 정수 반환 (0~59)
Date.protoType.setMinutes(): 분 정수 설정 (0~59)
Date.protoType.getSeconds(): 초 정수 반환 (0~59)
Date.protoType.setSeconds(): 초 정수 설정 (0~59)
Date.protoType.getMilliseconds(): 밀리초 정수 반환 (0~999)
Date.protoType.setMilliseconds(): 밀리초 정수 설정 (0~999)
Date.protoType.getTime(): 1970년 1월 1일 00:00:00(UTC)를 기점으로 Date 객체의 시간까지 경과된 밀리초 반환
Date.protoType.setTime(): 1970년 1월 1일 00:00:00(UTC)를 기점으로 Date 객체의 시간까지 경과된 밀리초 설정
Date.protoType.setTimezoneOffset(): UTC와 Date 객체에 지정된 로컬 시간의 차이를 분단위로 반환한다 현재 우리가 한국에서 찍으면 KST - 9h로 나타냅니다.
const today = new Date()
today.getTimezoneOffset() / 60 // -9문자열로 변환하기
날짜 객체를 문자열로 변환할때는 다양한 포맷을 지원하기에 원하는 포맷을 골라 사용 가능합니다.
Date.protoType.toDateString(): 문자열로 Date 객체의 날짜 반환
Date.protoType.toTimeString(): 문자열로 Date 객체의 시간을 표현한 문자열 반환
Date.protoType.toISOString(): ISO 8601 형식으로 Date 객체의 날짜와 시간을 표현한 문자열 반환
Date.protoType.toLocaleString(): 인수로 전달한 로컬을 기준으로 Date 객체의 날짜와 시간을 표현한 문자열 반환, 인수를 생략하면 브라우저가 동작중인 시스템의 로컬을 자동 적용
const today = new Date()
today.toString() // Tue Aug 19 2025 01:09:59 GMT+0900 (한국 표준시)'
today.toDateString() // 'Tue Aug 19 2025'
today.toTimeString() // '01:09:59 GMT+0900 (한국 표준시)'
today.toISOString() // '2025-08-18T16:09:59.837Z'
today.toLocaleString() // '2025. 8. 19. 오전 1:09:59'
today.toLocaleString('ko-KR') // '2025. 8. 19. 오전 1:09:59'
today.toLocaleString('en-US') // '8/19/2025, 1:09:59 AM'
today.toLocaleString('ja-JP') // '2025/8/19 1:09:59'⭐️ 마무리
Date는 자주 쓰다 보니 익숙하다고 생각했는데, 이렇게 정리하면서 보니까 생각보다 더 많은 기능이 있더라고요.
사실 이 글도 반년 전에 초안을 써놨다가 이제야 정리하게 됐는데요 😂
간만에 책을 보니까 역시 책에는 놓치고 있던 깊은 내용들이 많다는 걸 다시 느꼈습니다.
출처: 모던 자바스크립트 Deep Dive 30장 Date (566p ~ 577p)
