[dayjs] JavaScript Date 객체는 불변성을 지켜주기 않는다 + dayjs의 필요성

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

 

JavaScript는 날짜 표현을 해줄 수 있는 Date 객체를 제공해준다.

따로 라이브러리를 사용하지 않더라도 손 쉽게 날짜을 얻을 수 있기 때문에 사용을 자주해줬다.

 

 

 

불변성 문제 발생

하지만 불편한 점이 발견됐다.

바로 불변성이다.

 

const date = new Date(); // 2023-11-01T02:06:14.974Z
date.setFullYear(2002);
console.log(date);

set 함수를 쓴 date를 콘솔로 찍으면 어떻게 될까?

당연히 2002-11-01T02:06:14.974Z로 바뀐다.

인제 date는 원래 값인 2023-11-01T02:06:14.974Z을 잃게 된다.

 

예를들어 우리가 date와 set 함수를 사용해 나온 date를 비교해주고 싶다면?

당연히 둘 다 date가 똑같이 나올테니 비교 자체가 불가능하다.

 

date의 첫번째 값을 지켜주기 위해서는 상당히 귀찮은 과정을 걸쳐야 한다.

const date = new Date();
const clonedDate = new Date(date);
clonedDate.setDate(3);
console.log(clonedDate);

이렇게 기본 데이터를 두고 new Date를 또 해줘서 clonedDate에 set 함수를 꽂아야 한다.

날짜 비교를 하고 싶다면 date와 clonedDate를 비교하면 된다.

근데 코드가 참 멍청해보인다.

 

 

 

dayjs 사용

그동안 Date 객체를 사용하는데 문제가 없었기 때문에 따로 날짜 라이르러리를 사용할 생각을 안 했다.

이번 불변성으로 인해 저 멍청한 코드를 사용하고 싶지 않아 찾아보니 dayjs는 불변성을 지켜준다는 것을 알았다.

 

const date = new Date();
const changeDate = dayjs(date).set('year', 2002);
console.log(date) // 2023-11-01T02:06:14.974Z
console.log(changeDate); // 2002-11-01T02:06:14.974Z

 

dayjs를 사용하면 date에 변화가 일어나지 않는다.

그렇기 때문에 불변성이 해결된다.

이번 기회에 dayjs의 필요성을 알게 됐다.