JavaScript Date / 자바스크립트 날짜, 시간 / Date 객체

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

자바스크립트는 거의 모든 것이 객체로 이루어져 있는데 그중 날짜 기능을 가진 내장 객체 Date를 알아보겠습니다!

---

Date 객체 생성 [ 현재 시간 ]

let today = new Date()
console.log(today)
/*
출력
2021-12-06T09:54:30.994Z 
*/

위처럼 코드를 작성할 시, 아래 출력처럼 나오게 되는데, 이때 첫 번째 줄은 today에 이 객체를 생성한 순간이 저장되게 됩니다.

하지만 현재 저는 18시:54분에 코드를 작성했지만 출력에는 09:54분으로 나오는데 이것은 Date는 UTC를 기준으로 객체를 생성해주기 때문에 한국시간보다 9시간이 느린 것입니다.

이것을 보완해주기 위해 현재 컴퓨터에 지정된 표준시간대에 따라 시간을 출력해주는 toLocaleDateString() 을 사용하면 됩니다.

console.log(today.toLocaleDateString())
/*
출력
2021. 12. 6. 오후 6:54:30
*/

---

현재시간이 아닌 원하는 시간대 설정

Date 를 통해 현재 시간을 바로 가져올 수 있지만 현재 시간이 아닌 다른 시간을 설정해주고 싶을 때는 3가지 방법이 있습니다.

 

1. let 변수 이름 = new Date("YYYY-MM-DD") 로 년 월 일 설정해주기

2. let 변수 이름 = new Date("YYYY-MM-DDThh-mm-ss")로 년 월 일 시 분 초 설정해주기

3. let 변수 이름 = new Date(year, month, day, hour, minute, second) 순으로 인자를 넘겨 생성하기입니다.

 

//설정 년월일
myDate = new Date('1997-03-24')
console.log(myDate.toLocaleString())

// 설정 년월일 및 시간
myDate = new Date('1997-03-24T15:30:55')
console.log(myDate.toLocaleString())
//하나씩 인자 주기
myDate = new Date(1997,2,24,15,30,40)
//이때 month 인자는 0이 1월을 의미하기 때문에 3월을 쓰고 싶다면 2를 적어줘야한다.
console.log(myDate.toLocaleString())

/*
출력
1997. 3. 24. 오전 9:00:00
1997. 3. 24. 오후 3:30:55
1997. 3. 24. 오후 3:30:40
*/

위 코드의 출력을 보면 첫 번째 방법인 년 월 일 설정은 시간을 설정해주지 않았지만 오전 9시로 설정되어있는 것을 볼 수 있는데 이것은 원래 Date로 설정할 시 UTC 기준 00시 00분 00초로 설정되지만 한국 시간으로 전환되면서 오전 9시가 기본시간으로 전환된 것입니다.

 

또한 3번째 방법인 9번째 줄을 보면 출력은 3월이지만 인자는 2를 넘겨줬는데 이건 Date에서 0을 1월로 보기 때문에 원하는 월보다 1 낮게 설정해주어야 한다.

---

Date 객체끼리의 차이 계산

let today = new Date()
let timeDiff = today.getTime() - new Date(2021,11,5,19,13)

console.log(`초 : ${timeDiff / 1000}`)
console.log(`분: ${timeDiff / 1000 / 60}`);
console.log(`시: ${timeDiff/ 1000 / 60 / 60}`);
console.log(`일: ${timeDiff / 1000 / 60 / 60 / 24}`);

/*
출력
초 : 86437.544           
분: 1440.6257333333333   
시: 24.01042888888889    
일: 1.000434537037037   
*/

위 코드처럼 Date 객체끼리의 계산을 통해 서로 간의 시간이 얼마나 차이 나는지에 대한 계산 또한 할 수 있다.

---

Date 객체로 요일 알아내기

Date 객체에 getDay() 메서드를 통해 요일이 어떤 요일인지를 0~6의 숫자로 반환해줍니다.

이때 주의해야 할 점은 0 (일요일) ~ 6 (토요일)로 반환해주는 것입니다.

이걸 저번에 학습한 switch로 요일을 반환하게 만들어 줄 수 있습니다.

// 일요일부터 월요일까지 0 ~ 6 의 숫자로 반환
switch (today.getDay()) {
    case 0:
        console.log('일요일');
        break;
    case 1:
        console.log('월요일');
        break;
    case 2:
        console.log('화요일');
        break;
    case 3:
        console.log('수요일');
        break;
    case 4:
        console.log('목요일');
        break;
    case 5:
        console.log('금요일');
        break;
    case 6:
        console.log('토요일');
        break;
}

//출력 : 월요일

---

let today = new Date()
console.log(today.toLocaleTimeString())
console.log(today.toLocaleDateString())
console.log(today.toLocaleString())
console.log(`${today.getHours()}시 ${today.getMinutes()}분`)
console.log(today.getDate())

/*
오후 7:13:37             
2021. 12. 6.             
2021. 12. 6. 오후 7:13:37
19시 13분                
6   
*/

위처럼 Date는 여러 가지 메서드를 지원해주고 있으며 설명하지 않은 메소드 들도 많으니 아래 첨부해놓은 공식 문서에서 필요한 메소드를 찾아 사용할 수 있습니다!

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

Date - JavaScript | MDN