Date 생성자함수, 프로토타입 객체의 프로퍼티

Date 생성자함수에 대해 알아본 지난 포스팅에 이어 이번에는 Date 생성자함수의 프로퍼티와 Date 프로토타입 객체의 메서드를 사용하며 궁금했던 점을 알아보고자 한다.

1. Date.UTC는 Date 생성자함수와 무엇이 다를까?

특정 연도, 월, 일, 시, 분, 초, 밀리초를 가지는 시각을 가지는 객체는 Date 생성자함수에 각 인수를 전달하며 만들 수 있다.

매개변수를 통해 받은 값을 각각 연, 월, 일...로 하는 객체를 생성하는데, 이 시간은 로캘 시간으로 해석되며 브라우저는 이를 로캘 시간을 나타내는 문자열로 출력해 준다.

 

한편 Date 객체의 프로퍼티 Date.UTC에 같은 인수를 전달하며 호출하면 다음과 같이 시간 값을 정수로 반환한다.

즉, Date 생성자함수에 연, 월, 일...을 전달하며 호출하면 Date 객체를 생성하여 반환하며 Date.UTC를 호출하면 객체를 생성하지 않고 정수 값을 반환한다는 차이가 있다. 또한 전달받은 인수를 로캘 시간이 아닌 UTC 시간으로 해석한다는 차이가 있다.

 

2. 왜 getYear/setYear가 아닌 getFullYear/setFullYear를 사용할까?

Date 객체가 가지는 시간의 월, 일, 요일, 시, 분, 초, 밀리초를 구하고자 할 때 Date.prototype.getMonth(), .getDate(), .getDay(), .getHours(), .getMinutes(), .getSeconds(), .getMilliseconds()를 각각 사용한다.

하지만 연도를 구할 때는 .getYear()가 아닌 .getFullYear()를 사용한다.

Date 객체에 연도를 설정할 때도 마찬가지로 .setYear()가 아닌 .setFullYear()를 사용한다.

 

사실 ECMA Script에는 웹 브라우저를 위한 추가 프로퍼티로서 Date.prototype.getYear()와 Date.prototype.setYear()가 제공되고 있다.

하지만 2000년 문제를 피하기 위해 .getYear() / .setYear()가 아닌 .getFullYear() / .setFullYear를 사용한다고 한다.

Date 생성자함수로 현재 시각을 가지는 Date 객체를 생성하고

.getYear()와 .getFullYear 메서드의 반환값을 각각 브라우저 콘솔로 확인해 보자.

.getFullYear() 메서드는 현재 연도인 2021의 값을 반환하는 반면 .getYear() 메서드는 121의 값을 반환한다.

.getYear() 메서드는 로캘 타임의 연도 값에서 1900을 뺀 값을 반환하기 때문이다.

이러한 이유로 1900년 이전의 시각을 가지는 Date 객체로 .getYear() 메서드를 호출하면 음수값이 나오게 되고,

2000년 이후의 시각을 가지는 Date 객체로 .getYear() 메서드를 호출하면 100 이상의 값이 나오게 된다.

한편 .setYear()로 객체의 연도를 설정하면

0 이상 99 이하의 값에는 1900을 더한 연도를 설정하고, 그 외의 값은 연도를 그대로 설정한다.

이와 같이 .getYear()와 .setYear()가 다르게 동작하므로 혼란을 주며,

1년부터 99년까지의 연도를 설정할 수 없다는 문제가 있으므로

.getYear() / .setYear() 대신 .getFullYear() / .setFullYear()를 사용해야 한다.

 

 

[참고 자료]

- ECMAScript https://262.ecma-international.org/12.0/#sec-date-objects

ECMAScript® 2021 Language Specification