[JavaScript 심화] Date 객체

2025. 11. 11. 18:03·React/JavaScript 심화
`Date` 객체는 날짜와 시간 정보를 다루는 내장 객체로
생성부터 추출, 수정, 포맷까지 다양하게 활용 가능

1. Date 객체 생성하기

// 현재 시간
let date1 = new Date();
console.log(date1);

// 특정 시간 (문자열)
let date2 = new Date("1998-02-07 10:10:10");
console.log(date2);
  • `new Date()` -> 현재 시간(로컬 기준)을 저장
  • 문자열 `"YYYY-MM-DD hh:mm:ss"`형태로 지정 가능 (`"" ` 생략도 가능)
  • 생성자이기 때문에 반드시 `new` 키워드 사용!

2. 타임 스탬프

타임스탬프란 `1970-01-01 00:00:00 UTC` 기준으로
몇 밀리초(ms)가 지낫는지를 나타내는 숫자값임
let ts1 = date1.getTime();
console.log(ts1); // ex) 1731214329493

let date4 = new Date(ts1);
console.log(date4);
  • 서버나 데이터베이스에서 날짜를 숫자로 저장할 때 주로 사용
  • 숫자끼리 비교 가능 (`>` / `<`로 비교 가능)

3. 날짜와 시간 요소 추출하기

let year = date1.getFullYear(); // 연도
let month = date1.getMonth();   // 월 (0부터 시작) getMonth() + 1 을 해주면 우리가 아는 월로 출력됨
let day = date1.getDate();      // 일

let hour = date1.getHours();    // 시
let minute = date1.getMinutes();// 분
let seconds = date1.getSeconds();// 초

console.log(year, month, day, hour, minute, seconds);
  • `getMonth()`는 0부터 시작함
    • 1월은 `0`, 12월은 `11`
    • 화면에 표시할 때는 `+ 1` 해줘야 올바르게 표시됨
  • 이외에도 요일(`getDay()` 추출 가능(`0` = 일요일, `6` = 토요일)

4. 날짜와 시간 수정하기

`set` 계열 메서드를 사용하면 `Date`객체의 특정 부분을 수정할 수 있음
date1.setFullYear(1998);
date1.setMonth(1);     // 2월 
date1.setDate(7);
date1.setHours(2);
date1.setMinutes(49);
date1.setSeconds(33);
  • 모든 단위별로 개별 수정 가능

5. 날짜 출력 포맷

console.log(date1.toDateString());   // "Sat Feb 07 1998"
console.log(date1.toLocaleString()); // "1998. 2. 7. 오전 2:49:33"

 

주요 포맷 메서드

메서드 설명 예시
`toString()` 전체 날짜+시간 문자열 `"Sat Feb 07 1998 02:49:33 GMT+0900"`
`toDateString()` 날짜만 출력 `"Sat Feb 07 1998"`
`toTimeString()` 시간만 출력 `"02:49:33 GMT+0900"`
`toLocaleString()` 로컬(한국 기준) 포맷 `"1998. 2. 7. 오전 2:49:33"`

 

'React > JavaScript 심화' 카테고리의 다른 글

[JavaScript 심화] 비동기 - 콜백 함수  (0) 2025.11.11
[JavaScript 심화] 동기와 비동기  (0) 2025.11.11
[JavaScript 심화] 배열 메서드 (배열 변형)  (0) 2025.11.10
[JavaScript 심화] 배열 메서드 (요소 순회 & 탐색)  (0) 2025.11.10
[JavaScript 심화] 배열 메서드 (요소 조작)  (0) 2025.11.10
'React/JavaScript 심화' 카테고리의 다른 글
  • [JavaScript 심화] 비동기 - 콜백 함수
  • [JavaScript 심화] 동기와 비동기
  • [JavaScript 심화] 배열 메서드 (배열 변형)
  • [JavaScript 심화] 배열 메서드 (요소 순회 & 탐색)
이도서
이도서
  • 이도서
    도서의 코딩노트
    이도서
  • 전체
    오늘
    어제
    • 분류 전체보기 (249)
      • Today I Learned (79)
        • 2024 (78)
      • Swift (25)
        • Swift 문법 정리 (19)
        • RxSwift (5)
      • Swift Study (12)
        • Playground (2)
        • Storyboard (9)
        • UIKit (1)
      • Flutter (27)
        • Dart 언어 (16)
        • Flutter Study (11)
      • React (37)
        • HTML & CSS (8)
        • JavaScript 기본 (12)
        • JavaScript 심화 (14)
        • Node.js (2)
        • React (1)
      • Git (3)
      • 코딩테스트 (60)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

    • 개발 공부 공유 링크
  • 인기 글

  • 태그

    function
    코딩테스트
    함수
    코딩테스트Level.1
    Swift
    React
    javascript
    코딩테스트 level.1
    ios앱개발자
    iOS앱개발
    ios
    html
    storyboard
    내일배움캠프
    DART
    Flutter
    CLASS
    객체지향
    Til
    javascript 기본
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
이도서
[JavaScript 심화] Date 객체
상단으로

티스토리툴바