(27) JavaScript - 객체 / Date 객체

지금까지 많이 사용했던 console.log 함수의 콘솔 객체처럼

자바스크립트가 미리 가지고 있는 객체를 '내장 객체 (Standard built-in objects)' 라고 부른다.

자바스크립트는 거의 모든 것이 객체로 이루어져 있기 때문에 특별한 기능별로 다양항 내장 객체들이 존재하는데,

그 중 하나가 '날짜(Date)' 객체 이다.

 

날짜 (Date) 객체

자바스크립트에서 날짜는 'Date' 객체로 다루며 초기 구성은 ' let 변수 = new Date();' 로 이루어져있다.

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

▲ myDate라는 변수를 선언한 다음에 new라는 키워드와 함께 Date 하고 함수처럼 소괄호를 열고 닫아준다.

 

※ Date 는 생성자 함수로써, new 연산자와 함께 Date 함수를 호출하게 되면 생성자 함수로써 동작한다.

이론적으로 이야기하면 생성자 함수를 new 연산자로 실행하면 생성자 함수로 동작하여 내부 메서드인 [[constructor]] 를 호출시키고 그렇지 않으면 [[call]] 이 호출된다.

 

출력을 해보면 Data 객체를 생성한 순간의 시간이 출력되며

왼쪽부터 순서대로 요일, 월, 일, 연도, 시간, 시간대(국가 별 위치) 이다.

---

그런데 Data 객체는 무조건 생성한 순간으로만 만들어지는 것은 아니다.

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

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

1970년 1월 1일 00:00:00 UTC + 1000milliseconds

▲ 소괄호 안에 숫자 값을 넣어주면 UTC 기준 1970년 1월 1일 0시 0분 0초에서 

넣어준 숫자 값의 밀리초 만큼 지난 객체가 만들어진다.

밀리초는 1초를 1000으로 나눈 단위이며 1000밀리초는 1초가 지난 객체이다.

 

하지만 밀리초의 단위가 너무 미세하기도 하고 1970년이 너무 오래된 과거이기에

내일이나 다음 달 또는 내가 태어난 날짜를 기준으로 객체를 만들고 싶다고 하더라도 

큰 숫자값을 넣어줘야 하기 때문에 계산하기 쉽지가 않다.

 

이럴 때 숫자 값보다는 문자열을 넣어주는 방식도 있다.

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

만약 '2024년 01월 01일'을 객체로 만들고 싶으면 

    let myDate1 = new Date('2024-01-01')
    console.log(myDate1);

▲ 년, 월, 일을 하이픈(-)으로 나눈 문자열로 작성하면 되고 

자세한 시간대를 적고 싶다면 24시간 표기형태로 시간대 (YYYY-MM-DDThh:mm:ss)를  작성해준다.▼

    let myDate2 = new Date('2024-01-01T22:33:44') //YYYY-MM-DDThh:mm:ss'
    console.log(myDate2);

 

 

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

시간을 정해준 경우에는 해당 시간에 맞는 객체가 생성 된 것을 확인 할 수 있다.

---

Date를 생성하는 또 다른 방법이 소괄호 안에 여러 개의 값을 전달해 주는 방식이다.

    let myDate3 = new Date(2024, 0, 1, 22, 33, 44) //YYYY, MM, DD, hh, mm, ss, ms
    console.log(myDate3);

▲'년도, 월, 일, 시, 분, 초, 밀리초' 순서대로 입력하며 년도와 월 까지는 필수고 나머지는 생략가능.

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

 

※해당 방식에서 월(month) 계산 방식은 0부터 시작하며 출력되는 월(month)도 하나씩 밀린다.

 

이렇게 생성한 객체는 다양한 메소드를 통해서 필요한 것만 따로 가져올 수 있다.

 

날짜 (Date) - getTime 메소드

    //Date.getTime()
    let myDate4 = new Date(2024, 1, 1, 22, 33, 44);
    console.log(myDate4.getTime());

getTime 메소드를 사용하면 Date 객체의 기준 날짜인 1970년 1월 1일 0시 0분 0초에 맞춰서

몇 밀리초가 지났는지 계산해주며 이러한 정수값을 '타임스탬프(time stamp)'라고 부른다.

---

타임스태프 값을 어떻게 유용하게 사용할 수 있을까?

만약 지금 순간을 나타내는 객체를 만들어서 값을 비교하면 ..▼

    let myDate5 = new Date(2024, 1, 1, 22, 33, 44);
    let today = new Date()

    let timeDiff = myDate5.getTime() - today.getTime()
    console.log(timeDiff + '밀리초');
    console.log(timeDiff + '초');
    console.log(timeDiff / 1000 / 60 + '분');
    console.log(timeDiff / 1000 / 60 / 60 + '시간');

이런식으로 지금부터 몇 밀리초, 몇 초, 몇 분, 몇 시간이 차이나는지를 계산할 수 있다. ▼

---

이 밖에도 Date 객체를 생성하면 아래와 같이 다양한 메소드를 통해서 여러가지 값들을 얻어낼 수 있다. ▼

    let myDate6 = new Date(2024, 1, 1, 22, 33, 44);
    console.log(myDate6.getFullYear());
    console.log(myDate6.getMonth()); // 0부터 시작 (1월 - 0, 2월 - 1 ....)
    console.log(myDate6.getDate()); // 일 자
    console.log(myDate6.getDay()); //요일 (일요일을 시작으로 0부터 6까지 값)
    console.log(myDate6.getHours());
    console.log(myDate6.getMinutes());
    console.log(myDate6.getSeconds());
    console.log(myDate6.getMilliseconds());

 

---

Date 객체는 이것 말고도 훨씬 더 많은 메소드를 가지고 있기에

주로 사용하는 메소드를 위주로 설명해보았다.

이 정도만 알고 있어도 평소 활용할 수 있는 다양한 날짜 정보를 계산할 수 있다.

한번 좀 더 깊게 파보자면..

 

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

    let myDate7 = new Date(2024, 1, 1, 22, 33, 44);
    myDate7.setFullYear(2002);
    myDate7.setMonth(6);
    myDate7.setDate(20);

 

toLocaleDateString(), toLocaleTimeString(), toLocaleString() 메소드

간단하게 시간 정보를 표현하고 싶다면 아래와 같은 메소드를 활용해 볼 수도 있다.

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

▲ toLocaleDateString(), toLocaleTimeString(), toLocaleString() 메소드는 

사용자의 브라우저에 설정된 국가의 표기에 맞춰 날짜와 시간을 보여준다.

 

Date.now() 메소드

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

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

    let myDate9 = new Date();
    console.log(Date.now() === myDate9.getTime()); // true

▲새로운 객체를 만들어서 getTime 메소드를 호출한 값과 일치한다는 사실을 확인할 수 있는데,

새로운 객체를 만들지 않는다는 점은 일단 우리 눈에 코드 한 줄을 줄일 수 있다는 이점도 있고,

눈에는 드러나지 않지만 코드가 실행될 때 메모리의 부담을 줄여주기도 한다.

그래서 특정한 시점이 아니라 단순히 순간 순간 그때 당시 시간 값이 필요한 경우에는

Date.now() 메소드를 활용하는 것이 코드의 가독성 뿐만아니라 성능적인 측면에서도 좀 더 유리하다.

 

Date객체의 형변환

let myDate10 = new Date(2024, 0, 1);

console.log(typeof myDate); // object
console.log(String(myDate)); // Mon Jan 01 2024 00:00:00 GMT+0900 (한국 표준시)
console.log(Number(myDate)); // 1704034800000
console.log(Boolean(myDate)); // true

▲ 코드를 천천히 살펴보자면..

세번째 줄에서 Date 객체의 자료형을 확인해보니 'object', 즉 객체라는 것을 확인할 수 있는데

Date 객체를 boolean 타입으로 변환하면 true가 되고, string 타입으로 변환하면 날짜값이 그대로 문자열로 변환된다.

 

눈여겨 볼 부분은 number 타입으로 변환할 경우인데

이 값은 아무 의미없는 단순한 숫자값이 아니라 getTime() 메소드를 활용한 것과 똑같은 수치의 타임스탬프 값 이다.▼

    //number타입으로 변환 할 경우
    let myDate11 = new Date(2024, 1, 1); 
    console.log(myDate11.getTime() === Number(myDate11)); // true

 

즉 다시말해 Date 객체끼리 사칙연산이 가능하다.

    //Date 객체끼리 사칙 연산
    let myDate12 = new Date(2024, 1, 1); 
    let myDate13 = new Date(2024, 1, 2); 

    let timeDiff1 = myDate13 - myDate12;
    console.log(timeDiff1); // 86400000 (ms)
    console.log(timeDiff1 / 1000); // 86400 (sec)
    console.log(timeDiff1 / 1000 / 60) // 1440 (min)
    console.log(timeDiff1 / 1000 / 60 / 60) // 24 (hour)
    console.log(timeDiff1 / 1000 / 60 / 60 / 24) // 1 (date)

---

날짜를 표현하는 문자열

YYYY-MM-DDThh:mm:ss형식 말고도 날짜를 표현하는 다양한 방식의 문자열이 있다.

    //날짜를 표현하는 문자열
    let date1 = new Date('1/1/2024 22:33:44');
    let date2 = new Date('january 1, 2024 22:33:44');
    let date3 = new Date('Jan 1 2024 22:33:44');
    
    //표현하는 문자열 방식만 다를뿐 전부 똑같은 값이 출력된다.
    console.log(date1); 
    console.log(date2);
    console.log(date3);

---

★GitHub 주소 (Date 객체)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/6.Date%EA%B0%9D%EC%B2%B4.html

JavaScript_soloPlay/Basic/8-객체/6.Date객체.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (Date 객체 예시)

https://purrfect-gargoyle-935.notion.site/Date-D-Day-count-111e9530b3e18018ac0cec8b21a8a444?pvs=4

Date 객체 (D-Day count) | Notion