Mutability (가변성)

Moment.js의 가이드를 보면 최상단에 적혀있을 만큼 중요한 개념이다.

moment 객체는 변경 가능하며 더하기, 빼기 또는 설정과 같은 작업은 원래의 moment 객체를 변경한다.

예시를 통해 알아보자.

// 2022-02-01 17:01:08 기준
const momentDate = moment();
const newMomentDate = momentDate.add(1, 'week');

console.log({ momentDate: momentDate.format() });
console.log({ newMomentDate: newMomentDate.format() });

이미지 기준 momentDate는 2022-02-01 17:01:08 이고
1주일을 더한 newMonentDate는 2022-02-08 17:01:08 이다.

하지만 결과를 출력해보면 아래와 같이 동일한 값이 출력된다.

즉, 위에서 언급했듯이 더하기, 빼기 또는 설정과 같은 작업은 원래의 moment 객체를 변경한다는 증거가 된다.

그렇다면 기존의 moment 객체를 변경하지 않고 사용하려면 어떻게 해야할까 ?

정답은 clone() 메서드를 사용하는 것이다.

// 2022-02-01 17:12:21 기준
const momentDate = moment();
const cloneNewMomentDate = momentDate.clone().add(1, 'week');

console.log({ momentDate: momentDate.format() });
console.log({ cloneNewMomentDate: cloneNewMomentDate.format() });

아래의 이미지와 같이 momentDate의 결과는 현재 날짜이며 cloneNewMonentDate의 결과는 현재 날짜의 1주일을 더한 2월 8일이 된 것을 볼 수 있다.

날짜, 시간 계산

✅ add()

현재 날짜에서 [시간, 일, 주, 월, 년]을 더한다.

const today = new Date(); // 2월 2일
const afterOneHour = moment(today).clone().add('1', 'hour'); // 1시간 후
const afterOneDay = moment(today).clone().add('1', 'day'); // 1일 후
const afterOneWeek = moment(today).clone().add('1', 'week'); // 1주일 후
const afterOneMonth = moment(today).clone().add('1', 'month'); // 1개월 후
const afterOneYear = moment(today).clone().add('1', 'year'); // 1년 후

결과

✅ subtract()

현재 날짜에서 [시간, 일, 주, 월, 년]을 뺀다.

const today = new Date(); // 2월 2일
const beforeOneHour = moment(today).clone().subtract('1', 'hour'); // 1시간 전
const beforeOneDay = moment(today).clone().subtract('1', 'day'); // 1일 전
const beforeOneWeek = moment(today).clone().subtract('1', 'week'); // 1주일 전
const beforeOneMonth = moment(today).clone().subtract('1', 'month'); // 1개월 전
const beforeOneYear = moment(today).clone().subtract('1', 'year'); // 1년 전

결과

✅ fromNow()

현재 시점으로부터의 날짜, 시간 차이를 계산한다.

// 현재 날짜 2월 2일
moment('2021-12-01', 'YYYY.MM.DD').fromNow()
moment('2022-01-01', 'YYYY.MM.DD').fromNow()
moment('2022-01-20', 'YYYY.MM.DD').fromNow()

✅ diff()

두 날짜의 차이를 계산한다. 기본적으로 밀리초 단위로 계산되고 [초, 분, 시간, 일, 주, 월, 년] 단위로 바꿀 수 있다.
❗️두 번째 인자에 오타 발생 시 에러를 반환하지 않고 밀리초 단위로 계산된다.❗️

const date1 = moment('2022-01-01');
const date2 = moment('2022-02-20');

date1.diff(date2)
date1.diff(date2, 'seconds')
date1.diff(date2, 'minutes')
date1.diff(date2, 'hour')
date1.diff(date2, 'days')
date1.diff(date2, 'weeks')
date1.diff(date2, 'months')
date1.diff(date2, 'years')

✅ isBefore(), isAfter(), isSame()

두 날짜를 비교하며 Boolean 타입을 반환한다.

const date1 = moment('2022-01-01');
const date2 = moment('2022-02-20');

console.log(date1.isAfter(date2)); // false
console.log(date1.isBefore(date2)); // true
console.log(date1.isSame(date2)); // false

틀린 부분이 있거나 보충해야 할 내용이 있다면 댓글이나 DM(sungstonemin)으로 알려주시면 감사하겠습니다😄