소년코딩의 자바스크립트 강좌 10. 날짜와 시간 Date 객체

자바스크립트 Date 객체는 날짜와 시간을 사용하게 해주는 자바스크립트 내장 객체다.

Date 타입은 자바 초기 버전의 java.util.Date에 기반을 두기 때문에 날짜와 시간을 저장할 때 1970년 1월 1일 자정부터 몇 밀리 초가 지났는지 나타내는 숫자를 사용한다.

---

날짜 객체를 생성할 때는 new 연산자 다음에 Date 생성자를 사용한다.

var now = new Date();
console.log(now); // Mon Mar 21 2016 00:05:14 GMT+0900

Date 생성자에 매개변수를 넘기지 않으면 생성된 객체에는 현재 날짜와 시간이 저장된다.

 

특정 날짜와 시간을 저장하려면 해당 시간의 밀리초 표현, 즉 1970년 1월 1일 자정으로부터 몇 밀리 초가 지났는지 나타내는 순자를 매개변수로 넘겨야 하는데 이 계산은 매우 복잡하고 실수하기 쉬어서 자바스크립트는 이를 쉽게 처리하는 메서드 Date.parse()와 Date.UTC()메서드를 제공한다.

---

1. Date.parse() 메서드

매개변수로 날짜를 표현하는 문자열을 받고 해당 문자열을 날짜의 밀리초 표현으로 반환을 시도한다.

1) Date.parse()가 지원하는 날짜 형식

• 년/월/일, 년, 월이름, 일 (ex. '2015, december, 8')
• 요일 월이름 일 년 시:분:초 타임존 (ex. 'Wed May 25 2016 00:00:00 GMT-0700')
• ISO 8601 확장 형식 YYYY-MM-DDTHH:mm:ss.ssZ(ex. '2015-10-25T00:00:00')
• 월/일/년 (ex. '2016/1/1')

var date1 = new Date(Date.parse('2016/1/1'));
console.log(date1);              // Fri Jan 01 2016 00:00:00 GMT+0900 (대한민국 표준시)
 
var date2 = new Date(Date.parse('2015, december, 8'));
console.log(date2);              // Tue Dec 08 2015 00:00:00 GMT+0900 (대한민국 표준시)
 
var date3 = new Date(Date.parse('Wed May 25 2016 00:00:00 GMT-0700'));
console.log(date3);              // Wed May 25 2016 16:00:00 GMT+0900 (대한민국 표준시)
 
var date4 = new Date (Date.parse('2015-10-25T00:00:00'));
console.log(date4);              // Sun Oct 25 2015 09:00:00 GMT+0900 (대한민국 표준시)

 

Date.parse()에 넘긴 문자열이 올바른 날짜 형식이 아닐 경우 NaN을 반환한다.

 

Date 생성자는 문자열을 넘겨받으면 자동으로 Date.parse()를 호출한다.

var date1 = new Date(Date.parse('2016/1/1'));
console.log(date1);              // Fri Jan 01 2016 00:00:00 GMT+0900 (대한민국 표준시)
 
var someDate = new Date('2016/1/1');
console.log(someDate);           // Fri Jan 01 2016 00:00:00 GMT+0900 (대한민국 표준시)

---

2. Date.UTC() 메서드

Date.UTC() 메서드 역시 날짜의 밀리초 표현을 반환하지만 Date.parse()와는 다른 데이터를 받는다.

Date.UTC()의 매개변수는 해당 시각의 년, 월 인덱스(0이 1월), 일(1~31), 시(0~23), 분, 밀리초다.

이들 중 필수 매개변수는 첫 번째와 두 번째(년, 월 인덱스)다. 일을 생략하면 1일로 간주하며, 나머지는 모두 0으로 간주한다.

var date1 = new Date(Date.UTC(2015,0));    // 2015년 1월 1일 0시
console.log(date1);    // Thu Jan 01 2015 00:00:00 GMT+0900 (대한민국 표준시)
 
var date2 = new Date(Date.UTC(2015, 6, 28));    // 2015년 7월 28일
console.log(date2);    // Tue Jul 28 2015 00:00:00 GMT+0900 (대한민국 표준시)

---

3. 날짜 표시 메서드

Date 객체에는 날짜를 특정한 형식으로 표현하는 메서드가 여러 개 있다.

• toDateString(): 날짜를 요일, 월, 일, 년 형식으로 표현한다.
• toTimeString(): 날짜를 시, 분, 초, 타임존 형식으로 표현한다.
• toLocaleDateString(): 날짜를 요일, 월, 일, 년 형식으로 표현한다.
• toLocaleTimeString(): 날짜를 시, 분, 초, 타임존 형식으로 표현한다.
• toUTCString(): 날짜를 UTC(협정 세계시) 형식으로 표현한다.

var now = new Date(); 
console.log(now);                            // Sat Oct 31 2015 17:46:20 GMT+0900 (대한민국 표준시)
 
console.log(now.toDateString());             // Sat Oct 31 2015
console.log(now.toTimeString());             // 17:46:20 GMT+0900 (대한민국 표준시)
console.log(now.toLocaleDateString());       // 2015. 10. 31.
console.log(now.toLocaleTimeString());       // 오후 5:46:20
console.log(now.toUTCString());              // Sat, 31 Oct 2015 08:46:20 GMT
// 이는 모두 브라우저에 따라 정확한 형식이 조금 다르다. 

---

4. 날짜/ 시간 부속 메서드

Date 객체의 메서드로, 날짜의 특정 부분을 가져오거나 설정하는데 쓰인다.

• getTime(): 날짜의 밀리초 표현을 반환한다.
• setTime('milliseconds'): 밀리초 표현을 넘겨 날짜를 설정한다.
• getFullYear(): 4자리 연도를 반환한다.
• setFull('year'): 4자리 숫자를 넘겨 연도를 설정한다.
• getMonth(): 월 인덱스를 반환한다. (1월:0, 12월:11)
• setMonth(month): 월 인덱스를 넘겨 월을 설정한다.
• getDate(): 일(1~31)을 반한니다.
• setDate('date'): 일을 설정한다. 
• getDay(): 요일을 나타내는 숫자를 반환한다. (0:일요일, 6:토요일)
• getHours(): 시간을 0~23 형식의 숫자로 반환한다.
• setHours('hours'): 시간을 설정한다.
• getMinutes(): 분을 0~59 형식의 숫자로 반환한다.
• setMinutes('minutes'): 분을 설정한다.
• getSeconds(): 초를 0~59 형식의 숫자로 반환한다.
• setSeconds():초를 설정한다.
• getMilliseconds(): 밀리초를 반환한다.
• setMilliseconds('milliseconds'): 밀리초를 설정한다

var now = new Date();
 
console.log(now);    // Sat Oct 31 2015 18:29:10 GMT+0900 (대한민국 표준시)
console.log(now.getTime());                // 1446283750596
console.log(now.getFullYear());            // 2015
console.log(now.getMonth());               // 9
console.log(now.getDate());                // 31
console.log(now.getDay());                 // 6
console.log(now.getHours());               // 18
console.log(now.getMinutes());             // 29
console.log(now.getSeconds());             // 10
console.log(now.getMilliseconds());        // 596

---

5. Date.now();

Date.now() 메서드는 1970년 1월 1일 0시 0분 0초(UTC)부터 경과 한 밀리 세컨드 수를 반환한다.

var now = Date.now();
console.log(now);    // 1458487448073

 

Polyfill은 다음과 같다.

if (!Date.now) {
  Date.now = function now() {
    return new Date().getTime();
  };
}

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.