JavaScript 기초 : 객체 4. Date 객체(getTime())

4. Data 객체 - 날짜를 다루는 객체

console.log처럼 자바스크립트가 이미 가지고 있는 객체를 내장 객체라고 부른다.

자바스크립트는 거의 모든 것이 객체로 이루어져 있다.

그래서 다양한 내장 객체가 저장되어 있다.

그 중 하나가 Data객체이다.

Date객체만 잘 이용해도 초보자가 만들 수 있는 것들이 꽤 있다.

우선 myDate라는 변수를 만들어 보자.

변수 값에는 new Date()라는 객체를 만든다.

이 객체를 콘솔에 출력하면 객체를 생성한 순간의 시간이 나온다.

//Date객체 사용해보기
let myDate = new Date();

console.log(myDate);

이 객체를 생성한 순간의 년,월,일,시간이 출력되니

어디서 컴퓨터를 사용하는지에 따라 나오는 값이 다르다.

4-1. Data 객체 활용 - 원하는 날짜로 바꾸기

1) 소괄호 안에 숫자 값을 넣어주기!

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

console.log(myDate);

1970년 1월 1일 00:0::01 UTC 로 나오는데

왜냐면

1970년 1월 1일 UTC기준 00:00:00을 기준으로 파라미터 값 1000밀리 세컨드 만큼 지난 값을 표시해주기 때문이다!

하지만 이렇게 밀리초 단위로 넣으면 계산이 너무 복잡하기 때문에

문자열로 넣어주면 된다!!

2) 문자열로 넣어주기

//new Date('YYYY-MM-DD')
let myDate = new Date('2021-08-31');

console.log(myDate);

//new Date('YYYY-MM-DDThh:mm:ss')
let yourDate = new Date('2021-10-20T12:00:10');

console.log(yourDate);


//이 외에도 날짜를 표현하는 다양한 방식의 문자열이 있다.

let date1 = new Date('12/15/1999 05:25:30');
let date2 = new Date('December 15, 1999 05:25:30');
let date3 = new Date('Dec 15 1999 05:25:30');

이렇게 문자열로 넣어주면 해당 날짜의 객체를 만들 수 있다.

시간까지 입력하고 싶다면 알파벳 T를 넣어주고 시간:분:초를 넣어주면 된다.

시간을 따로 정해주지 않으면 자정을 기준으로

시간을 정해주면 정해준 시간이 표현된다.

날짜를 표현하는 다양한 방식의 문자열이 있는데

IETF 호환 RFC 2822 타임스탬프와 ISO8601의 한 버전의 형식을 준수하는 문자열로

Date객체를 생성하는 것을 권장한다고 한다.

3) 콤마로 연결하기(년도, 월, 일, 시간,분,초,밀리초)

//new Date(YYYY,MM,DD,hh,mm,ss,ms)
let myDate = new Date(2010, 2, 1, 10, 0, 10);

console.log(myDate);

연도와 월은 필수이고 나머지는 선택적으로 적어주면 된다.

연도, 월, 일, 시, 분, 초, 밀리초 순서로 적어주면 된다~!

문자열로 적어준 것과는 다르게 콤마로 연결해서 숫자로 적어주면 유의해야할 것이 있다.

바로

month를 적을 때 내가 적고 싶은 month - 1로 적어주어야 한다는 것이다!!!!

TIP) month의 경우 시작 숫자가 0이다.

1월은 컴퓨터에게 0월이다.

요일은 일요일 ~ 월요일이 0~6값으로 표현된다.

4-1. getTime메소드 활용

//getTime메소드 
let myDate = new Date(2010, 2, 1, 10, 0, 10);

console.log(myDate.getTime());

1970년1월1일0시0분0초부터 2010년3월1일10시0분10초까지 걸린 밀리초

getTime() 메소드는 myDate 객체가 1970년 1월 1일 00:00:00UTC부터 몇 밀리초가 지났는지 계산해준다.

얼마나 지났는지에 해당하는 정수 값은 타임 스탬프(Time Stamp)라고 부른다.

그럼 실제 사용 예시를 살펴보자.

myDate변수는 2021년 5월 14일 내 생일이다.

그리고 today변수는 오늘이다.

자 이제 timeDiff라는 변수를 만들어서 내년 내 생일에서 오늘 값을 빼주자.

그러면 얼마나 남았는지 알 수 있다.

~~(근데 이건 잘못한거다...~~

~~2021, 4, 14로 적었어야 한다!!!!...)~~

//getTime메소드 활용 오늘 날짜에서 내년 내 생일까지 남은 시간!

let myDate = new Date(2021, 05, 14);
let today = new Date();

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

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

또한

Date객체를 생성하면 여러 메소드를 이용해 다양한 값을 얻을 수 있다.

예시를 살펴보자.

myDate에는 2021년 5월 14일을 입력했다.

년, 월, 일, 요일, 시간, 분, 초, 밀리세컨드 숫자를 확인해보자!

month값은 0부터 시작한다는 점!

그리고 Date는 일자

Day는 요일이다.

//get메소드 활용
let myDate = new Date(2021,05,14);

console.log(myDate.getFullYear());
console.log(myDate.getMonth());
console.log(myDate.getDate());
console.log(myDate.getDay());
console.log(myDate.getHours());
console.log(myDate.getMinutes());
console.log(myDate.getSeconds());
console.log(myDate.getMilliseconds());

myDate변수에 입력한 값은 21년 5월 14일이라고 입력했지만

컴퓨터가 인식한 Month는 6월이다.

콘솔에 출력된 숫자는 그대로 5로 나왔다.

이 부분을 간과해서 내 생일은 5월 14일인데 6월 14일로 나왔고

결국 요일도 2021년 5월 14일은 금요일인데, 6월 14일인 월요일로 나온것다.

다시 제대로 입력해보자!

//getTime메소드 활용
let myDate = new Date(2021,4,14);

console.log(myDate.getFullYear());
console.log(myDate.getMonth());
console.log(myDate.getDate());
console.log(myDate.getDay());
console.log(myDate.getHours());
console.log(myDate.getMinutes());
console.log(myDate.getSeconds());
console.log(myDate.getMilliseconds());

이렇게 Date(2021,4,14)로 고친 뒤 콘솔에서 확인해보니

이렇게 요일이 금요일로 잘 나왔다.

예제를 살펴보자.

let now = new Date();
let month = new Array("해오름달", "시샘달", "물오름달", "잎새달", "푸른달", "누리달", "견우직녀달", "타오름달", "열매달", "하늘연달", "미틈달", "매듭달" );

console.log("우리말로 된 이번달 : " + month[now.getMonth()]);

오늘 날짜(몇 월인지)에 따라 다른 결과가 나올 것이다.

현재는 2020년 9월이기 때문에

우리말로 된 이번달 : 열매달

이렇게 출력되었다!

4-2. set메소드 활용

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부터 밀리초 이후를 나타내는 날짜를 설정)

4-3. 자동 날짜 수정

Date객체에는 자동으로 날짜를 수정해주는 기능이 있다.

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

let myDate = new Date(1989, 0, 32); // 1989년 1월 32일은 없다.

// 2월 1일로 자동고침 
console.log(myDate) // Wed Feb 01 1989 00:00:00 GMT+0900 (대한민국 표준시)

4-4. 지금 이 순간은 Date.now()

Date.now()메소드는 이 메소드가 호출된 시점의 타임스탬프를 반환한다.

새로운 객체를 만들지 않고 바로 현 시점의 날짜 값을 얻어낼 수 있다.

//Date.now()를 쓰면 지금 시점의 타임스태프를 반환
console.log(Date.now());

한 줄만 쓰면 OK이다.

4-5. Date객체의 형 변환

let myDate = new Date(2021, 4, 14);

console.log(typeof myDate); // object
console.log(String(myDate)); // Fri May 14 2021 00:00:00 GMT+0900 (대한민국 표준시)
console.log(Number(myDate)); // 1620918000000
console.log(Boolean(myDate)); // true

일단 myDate의 타입은 객체로 나온다.

myDate를 문자열로 변환하면 바로 옆 처럼 문자열로 나온다.

숫자로 바꾸면 어떨까? 바로 getTime()메소드를 활용한 것과 똑같은 수치의 타임스탬프 값이 나온다.

즉 1970년 1월 1일부터 2021년 5월 14일까지 몇 밀리세컨드가 지났는지 표시해준다.

즉! 두 개의 Date객체끼리 바로 사칙 연산이 가능하나는 것을 뜻한다.

let myDate1 = new Date(2018,3,14);
let myDate2 = new Date();

let timeDiff = myDate2 - myDate1;
console.log(timeDiff); 
console.log(timeDiff / 1000); 
console.log(timeDiff / 1000 / 60); 
console.log(timeDiff / 1000 / 60 / 60); 
console.log(timeDiff / 1000 / 60 / 60 / 24); 

//Date.now()를 이용해서 같은 코드를 만들었다.

let myDate1 = new Date(2018,3,14);
let timeDiff = Date.now() - myDate1;
console.log(timeDiff); // (ms)
console.log(timeDiff / 1000); // (sec)
console.log(timeDiff / 1000 / 60); //  (min)
console.log(timeDiff / 1000 / 60 / 60); //  (hour)
console.log(timeDiff / 1000 / 60 / 60 / 24); // (date)

연습

D-day계산기 만들기!

1. 내가 올 해 몇살이지?

let myDate1 = new Date(1989,5,14);


let timeDiff = Date.now() - myDate1;
console.log(timeDiff); //(ms)
console.log(timeDiff / 1000); //(sec)
console.log(timeDiff / 1000 / 60); //(min)
console.log(timeDiff / 1000 / 60 / 60); //(hour)
console.log(timeDiff / 1000 / 60 / 60 / 24); //(date)
console.log(timeDiff / 1000 / 60 / 60 / 24 / 365); // (몇 살인지?)

함수를 써보자!

이번에는 Date.now()를 안쓰고 그냥 today라는 변수를 만들어보았다.

let today = new Date();
let start = new Date(1989, 4, 14);

function lifeDayCalc(startDate) {

    let timeDiff = today.getTime() - start.getTime();
    let yearDiff = timeDiff / 1000 / 60 / 60 / 24 / 365;

    console.log(`저는 만으로  ${yearDiff}살 입니다.`);
}

lifeDayCalc(start);

2. 연애 기간 계산기를 만들어 보자!

let today = new Date();
let start = new Date(2018, 3, 14);

function coupleDayCalc(startDate) {

    let timeDiff = today.getTime() - start.getTime();
    let dayDiff = timeDiff / 1000 / 60 / 60 / 24;

    console.log(`오늘은  ${dayDiff + 1}일째 되는 날 입니다.`);
}

coupleDayCalc(start);

//메소드 이용
let today = new Date();
let start = new Date(2018, 3, 14);
let i = 999

//coupleDay라는 객체 안에 coupleDayCalc랑 after1000Days라는 메소드를 이용!
let coupleDay = {
  coupleDayCalc : function (startDate) {
    let timeDiff = today.getTime() - start.getTime();
    let dayDiff = timeDiff / 1000 / 60 / 60 / 24;
    console.log(`오늘은  ${dayDiff + 1}일째 되는 날 입니다.`);
  },
  after1000Days : function(s, i) {
    let newDt = start;
    newDt.setDate(newDt.getDate() + i);
    console.log(`1000일 후는 ${newDt}입니다.`)
  },
};

coupleDay.coupleDayCalc(start);
coupleDay.after1000Days(start, i);

결과는

잘 나왔다~!

1000일 뒤를 계산하는 함수를 만드는게 좀 머리가 아파서 구글링을 했다.

이런 간단한 것도 어렵다니 ㅠㅠ

일단 newDt라는 새로운 변수를 만들어서 그 값에 start 변수값을 넣어주었고

newDt.setDate(newDt.getDate() + i);

여기가 핵심이다.

즉

시작한 날의 날을 구한다음에 1000일을 더해준 값을 setDate로 다시 새롭게 만들어 준 것이다!

여러 가지로 좀 더 연습해봐야겠다!!

다음 글에서는 배열에 대해 정리해봐야겠다!

JavaScript 기초 : 객체 4. Date 객체(getTime()) - D-day계산기 만들기!

티스토리툴바