티스토리 뷰

내장 객체(Standard built-in objects)

우리가 지금까지 가장 많이 사용했던 console.log 함수의 콘솔 객체처럼 JavaScript가 미리 가지고 있는 객체를 '내장 객체'라고 부릅니다. JavaScript는 거의 모든 것이 객체로 이루어져 있기 때문에 특별한 기능별로 다양한 내장 객체들이 존재합니다. 그 중 대표적인 예로 날짜가 있습니다.

 

JavaScript에서 날짜는 모두 'Date'라는 객체로 다룹니다. 

// Date
let myDate = new Date();
console.log(myDate)l;

myDate라는 변수를 선언한 다음에 new라는 키워드와 함께 Date하고 함수처럼 소괄호를 열고 닫아 줍니다. 그리고 이 객체를 콘솔에 출력해보면 이 객체를 생성한 순간의 시간이 출력됩니다.

Thu May 18 2017 00:00:00 GMT+0900 (대한민국 표준시)

만약 myDate를 생성한 순간이 2017년 5월 18일 자정이라면 이런 문자열이 출력됩니다.

왼쪽부터 순서대로 요일, 월, 일, 연도, 시간, 시간대 입니다. 시간대는 어디서 컴퓨터를 사용하는지에 따라 달라집니다.

Date 객체를 생성할 때 괄호 안에 특정한 값을 넣어주면 원하는 날짜를 생성할 수도 있습니다.

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

먼저 Date 객체를 생성할 때 소괄호 안에 숫자 값을 넣어주면 UTC 기준 1970년 1월 1일 0시 0분 0초에서 넣어준 숫자 값의 밀리초만큼 지난 객체가 만들어집니다. 밀리초는 1초를 1000으로 나눈 단위입니다. 1000밀리초를 넣어주면 1970년 1월 1일 0시 0분 0초에서 1초가 지난 객체가 만들어지게 됩니다.

 

그런데 밀리초의 단위가 너무 미세하기도 하고 1970년 1월 1일이라는 날짜가 너무 오래된 과거라서 내일이나 다음 달, 아니면 태어난 날짜 등을 객체로 만들고 싶다고 하더라도 계산하기도 쉽지 않은 굉장히 큰 숫자 값을 넣어 줘야 합니다. 그럴 때는 숫자 값 보다는 문자열을 넣어 주는 방식도 있습니다.

날짜로 해석이 가능한 문자열을 넣어 주면 해당 날짜의 객체를 만들 수가 있습니다. 

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

만약 '2017년 5월 18일' 객체를 만들고 싶다면 년, 월, 일을 하이픈(-)으로 나눈 문자열로 작성하면 되고

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

만약 좀 더 자세하게 시간까지 다루고 싶다면 알파벳 T를 입력한 다음 24시간 표기 형태로 시간대를 작성해 주면 됩니다. 만약 오후 7시 11분 16초라면 대문자 T 그리고 19시 11분 16초로 작성해주면 됩니다.

console.log(myDate1);
console.log(myDate2);

Thu May 18 2017 00:00:00 GMT+0900 (대한민국 표준시)
Thu May 18 2017 19:11:16 GMT+0900 (대한민국 표준시)

결과를 출력해보면 시간을 따로 정해 주지 않으면 자정을 기준으로, 시간을 지정해 준 경우에는 해당 시간에 맞는 객체가 생성된 것을 확인할 수가 있습니다.

// new Date(값, 값, 값...);
new Date(YYYY, MM, DD, hh, mm, ss, ms);

그리고 마지막 한 가지 방법은 소괄호 안에 여러 개의 값을 전달해 주는 방식입니다.

'연도, 월, 일, 시, 분, 초, 밀리초' 순서대로 입력하면 되는데 연도와 월까지는 필수고 나머지는 생략이 가능합니다. 

생략할 경우에는 '1일 0시 0분 0초 0밀리초'로 처리가 됩니다. 

// 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);

console.log(myDate1);
console.log(myDate2);
console.log(myDate3);
console.log(myDate4);
console.log(myDate5);

Thu May 18 2017 19:11:16 GMT+0900 (대한민국 표준시)
Thu May 18 2017 19:11:00 GMT+0900 (대한민국 표준시)
Thu May 18 2017 19:00:00 GMT+0900 (대한민국 표준시)
Thu May 18 2017 00:00:00 GMT+0900 (대한민국 표준시)
Thu May 1 2017 00:00:00 GMT+0900 (대한민국 표준시)

한 가지 주의할 점은 month의 경우만 시작 숫자가 0이라는 점인데요. 일반적으로 생각하는 1월은 컴퓨터에게 0월이라는 점을 기억해야 합니다. 그렇기 때문에 여기서 4를 입력했지만 5월로 객체가 생성된 것입니다.

// Date.getTime()
let myDate = new Date(2017, 4, 18, 19, 11, 16);
console.log(myDate.getTime()); // myDate객체가 1970년 1월 1일 00:00:00 UTC부터 몇 밀리초 지났는지

이렇게 생성한 객체는 다양한 메소드를 통해서 필요한 것만 따로 가져올 수가 있는데 가장 먼저 살펴볼 메소드는 getTime 메소드 입니다. getTime 메소드를 사용하면 Date 객체의 기준 날짜인 1970년 1월 1일 00:00:00 UTC 부터 몇 밀리초가 지났는지 1970년 1월 1일 0시 0분 0초에 맞춰서 몇 밀리초가 지났는지를 계산해 주는데, 이 정수값을 '타임스탬프(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.getTime()
let myDate = new Date(2017, 4, 18, 19, 11, 16);

console.log(myDate.getFullYear()); // 2017
console.log(myDate.getMonth()); // 4
console.log(myDate.getDate()); // 18
console.log(myDate.getDay()); // 4
console.log(myDate.getHours()); // 19
console.log(myDate.getMinutes()); // 11
console.log(myDate.getSeconds()); // 16
console.log(myDate.getMilliseconds()); // 0

이 밖에도 Date 객체를 생성하면 이런 다양한 메소드를 통해 여러가지 값들을 얻어낼 수 있습니다. 조금 주의해야 할 부분은 Month 값은 0부터 시작한다는 점과 Date와 day를 명확하게 구분해야 한다는 점입니다.  Date는 일반적으로 인식하는 일자를 뜻하고 Day는 요일입니다. 요일은 일요일을 시작으로 0부터 6까지 값이 있는데 getDay 메소드의 반환값이 4인 경움녀 목요일 이라는 뜻입니다. 

let today = new Date();
console.log(today.getDay());

5

이렇게 코드를 작성하면 5가 출력되는데 그럼 오늘은 금요일이라는 뜻입니다.

'프론트엔드 > JavaScript' 카테고리의 다른 글

[배열] 01. 배열  (1) 2022.10.05
[객체] 13. Date객체 Tip  (1) 2022.10.04
[객체] 10. for...in 주의사항  (0) 2022.10.02
[객체] 09. for...in 반복문  (0) 2022.10.01
[제어문] 16. break와 continue  (1) 2022.09.30
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함