[자바스크립트] Date 객체

자바스크립트가 미리 가지고 있는 객체를 내장 객체(Standard built-in objects)라고 한다. 자바스크립트의 모든 것은 다 객체로 이루어져 있기 때문에 특별한 기능별로 다양한 내장객체들이 존재한다. 그 중 대표적인것이 바로 날짜!

 

💡 Date 객체 생성

자바스크립트에서 날짜는 Date 객체로 다룬다. Date 객체를 만드는 법은 다음과 같다.

//Date
let myDate = new Date();

이렇게 객체를 만들고 콘솔에 출력을 해보면 이 객체를 생성한 날짜가 출력이 된다. 왼쪽부터 순서대로 요일-월-일-년도-시간-시간대 가 출력이 된다. 마지막에 시간대는 컴퓨터를 어디서 사용하는지에 따라 다르게 출력이 된다.

무조건 생성한 순간만 만들어지는 것은 아니다. Date 객체 안에 특정한 값을 집어 넣으면 특정 날짜의 객체를 생성할 수 있다. 소괄호 안에 숫자 값을 넣어주면 UTC 기준 1970년 1월 1일 00:00:00 에서 넣어준 숫자값의 밀리초 만큼 지난 날짜의 객체를 생성할 수 있다. (밀리초는 1초를 1000으로 나눈 단위)

//new Date(milliseconds)
let myDate = new Date(1000);

하지만 숫자를 넣는 것은 밀리초 단위가 너무 미세하기도 하고 1970년은 너무 옛날이기 때문에 특정한 날짜 (예를 들어 어제, 내일, 다음달 등) 를 객체로 만드려면 계산하기도 힘들고 계산하더라도 큰 숫자값을 넣어주어야한다. 그래서 숫자를 넣는 것보다 문자열을 넣어주는 것이 더 편하다! 날짜로 해석이 가능한 문자열을 넣어주면 객체로 만들수 있다.

// new Date('YYYY-MM-DD')
let myDate = new Date('2017-05-18');

// new Date('YYYY-MM-DDThh:mm:ss')
let myDate = new Date('2017-05-18T19:11:16');

마지막으로 소괄호 안에 여러가지 값을 전달해주는 방법이 있다. 년도-월-일-시-분-초-밀리초 순으로 입력하면 되고, 년도와 월은 필수로 작성해야한다.

//new Date(year, month, date, hours, minutes, seconds, ms)
let myDate1 = new Date(2017, 4, 18, 19, 11, 16);
let myDate2 = new Date(2017, 4, 18, 19, 11);
let myDate3 = new Date(2017, 4, 18, 19);
let myDate4 = new Date(2017, 4, 18);
let myDate5 = new Date(2017, 4);

month는 0부터 시작이라서 4를 입력하면 5월로 나온다.

 

💡 Date 객체 메소드

타임스탬프

// Date.getTime()
let myDate = new Date(2017, 4, 18, 19, 11, 16);

console.log(myDate.getTime());

객체가 1970년 1월 1일 00:00:00 UTC 부터 몇 밀리초가 지났는지를 반환한다. 이 정수값을 타입스탬프(time stamp)라고 부른다. 이 타임 스탬프는 특정 날짜와 지금날짜 사이에 얼마나 지났는지 알아볼 때 사용할 수 있다.

// Date.getTime()
let myDate = new Date(2017, 4, 18, 19, 11, 16);
let today = new Date();

let timeDiff = myDate.getTime() - today.getTime();

console.log(timeDiff + '밀리초');
console.log(timeDiff + '초');
console.log(timeDiff / 1000 / 60 + '분');
console.log(timeDiff / 1000 / 60 / 60 + '시간');

그 밖에도 Date 객체의 다양한 메소드

let myDate = new Date(2017, 4, 18, 19, 11, 16);

console.log(myDate.getFullYear());		// 년도
console.log(myDate.getMonth());			// 월
console.log(myDate.getDate());			// 일
console.log(myDate.getDay());			// 월(0) ~ 일(6)
console.log(myDate.getHours());			// 시
console.log(myDate.getMinutes());		// 분
console.log(myDate.getSeconds());		// 초
console.log(myDate.getMilliseconds());		// 밀리초

간단한 시간 정보

간단하게 시간 정보를 알아내고 싶다면 다음과 같은 메소드를 사용하면 된다. 해당 메소드들은 사용자의 브라우저에 설정된 국가의 표기에 맞춰 날짜와 시간을 보여준다.

let myDate = new Date();

console.log(myDate.toLocalDateString()); // myDate가 가진 날짜에 대한 정보 (년. 월. 일)
console.log(myDate.toLocaleTimeString()); // myDate가 가진 시간에 대한 정보 (시:분:초)
console.log(myDate.toLocaleString()); 	// myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)

날짜 자동 수정

또 범위를 벗어나는 값을 설정하면 자동으로 날짜를 수정해준다.

let myDate = new Date(1988, 0, 32); // 1988년 1월 32일은 없습니다

// 2월 1일로 자동고침 되는걸 확인할 수 있습니다.
console.log(myDate) // Mon Feb 01 1988 00:00:00

현재 시간

특정한 시점이 아니라 단순히 순간순간 그 때 당시 시간 값이 필요한 경우에 사용한다. getTime()을 호출한 값과 일치하지만 새로운 객체를 만들지 않고 사용할 수 있어서 메모리의 부담을 줄여준다. 

let myDate = new Date();

console.log(Date.now() === myDate.getTime()); // true

 

💡 Date 객체 정보 수정하기

set으로 시작하는 다양한 메서드를 활용하면, 생성된 Date객체의 정보를 수정할 수도 있다. 대괄호로 감싸진 요소들은 선택적인 요소이다.

• setFullYear(year, [month], [date])
• setMonth(month, [date])
• setDate(date)
• setHours(hour, [min], [sec], [ms])
• setMinutes(min, [sec], [ms])
• setSeconds(sec, [ms])
• setMilliseconds(ms)
• setTime(milliseconds)(1970년 1월 1일 00:00:00 UTC부터 밀리초 이후를 나타내는 날짜를 설정)

 

 

참고 - developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date