자바스크립트 Date 객체 활용하기

자바스크립트에서 오늘 날짜를 알 수 있는 가장 쉬운방법으로는 Date 객체를 활용하는 방법이 있다.

 

let today = new Date(); // Mon Aug 29 2022 13:47:11 GMT+0900 (한국 표준시)

 

new 메서드로 Date 객체를 생성하면 위와 같이 나온다.

 

근데 누군가 시간 좀 알려달라 했을때

 

Q : 지금 시간 좀 알려줘!

A : Mon Aug 29 2022 13:47:11 GMT+0900 (한국 표준시)!

 

이딴식으로 알려주면 굉장히 불편해 할 것이기 때문에 보기 좋게 다듬어 보자.

 

---

 

보통 날짜를 표현할때는 년도 - 월 - 일 형식으로 나타낸다. (2022-08-29 이런식으로)

 

이렇게 보여주려면 Date 객체에 포함된 메서드를 활용하여 문자열을 만들면 된다.

 

let today = new Date();
let year = today.getFullYear() // 2022
let month = today.getMonth() + 1 // 8 (얘는 0이 1월이고 11이 12월이다. 그래서 +1을 해줘야한다.)
let day = today.getDate() // 29

let todayString = `${year}-${month}-${day}` // 2022-8-29

 

.getFullYear() : 년도 추출

.getMonth() : 월 추출 (0~11로 나온다. 0이 1월이고 11이 12월이다.)

.getDate() : 일 추출

 

앗 근데 이렇게 하면 2022-08-29가 아니라 2022-8-29 이렇게 되어버린다.

 

뭔가 꼴보기 싫으니까 좀만 수정해주자.

 

let today = new Date();
let year = today.getFullYear() // 2022
let month = (today.getMonth() + 1).toString().padStart(2, '0') // 08, 두자리수가 아니면 앞에 '0' 추가
let day = today.getDate().toString().padStart(2, '0'); // 29, 두자리수가 아니면 앞에 '0' 추가

let todayString = `${year}-${month}-${day}` // 2022-08-29

 

.toString() 메서드로 형변환(숫자 -> 문자열)을 해준뒤 .padStart() 메서드로 자리수를 채워주었다.

 

훨씬 보기 좋아졌다.😀

 

시간도 똑같이 나타내면 되는데 시간의 경우 시간 : 분 : 초 이렇게 표현해보자.

 

let today = new Date();
let hours = ('0' + today.getHours()).slice(-2); // 14, 숫자가 한자리수 일경우 앞에 '0'이 붙는다.
let minutes = ('0' + today.getMinutes()).slice(-2); // 12
let seconds = ('0' + today.getSeconds()).slice(-2); // 38

let timeString = `${hours}:${minutes}:${seconds}`; // 14:12:38

 

.getHours() : 시간 추출

.getMinutes() : 분 추출

.getSeconds() : 초 추출

 

위 메서드들을 사용하여 시간, 분, 초 값을 읽을 수 있다.

아주 EZ하다.

 

뒤에 .slice(-2) 를 해주는 이유는 똑같이 자리수를 채워주기 위함인데, 원리는 아래와 같다.

ex) '0' + today.getHours() == '012'  -> 뒤에서 두자리만 추출함 -> '12'

      '0' + today.getHours() == '008'  -> 뒤에서 두자리만 추출함 -> '08'

 

---

 

Date 는 오늘 뿐만 아니라 어제 혹은 며칠 전, 며칠 후도 당연히 표현할 수 있는데,

 

방법은 아주 간단하다.

 

let yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1) // 오늘 날짜에서 -1 해서 어제 날짜 표현
console.log(yesterday) // Sun Aug 28 2022 14:17:40 GMT+0900 (한국 표준시)

 

.getDate() : Date객체에서 날짜 가져오기

.setDate() : Date객체 날짜 변경

 

.getDate() 메서드로 날짜를 가져와서 원하는 날짜만큼 "-" 해주거나 "+" 해주면 된다.

 

그 다음 .setDate() 로 변경된 날짜를 집어넣으면 끝!

 

이외에도 Date 객체에는 다양한 활용방법이 있으니 잘 써먹어서 날짜 계산을 편하게 하자!