Javascript - Date 날짜 계산 [더하기, 빼기, 설정]

 오늘은 Date 객체가 가진 get, set 함수를 통해 날짜 및 시간 데이터를 가져오고 설정하는 방법에 대해서 이야기하려고 합니다. Date 객체를 사용하는 기초적인 부분을 아직 잘 모르시거나 조금 더 알고 배워보고 싶으신 분은 먼저 이전에 작성한 글을 통해 학습 후 이 글을 통해 조금은 더 능숙하게 Date 객체를 다뤄보시기를 추천드립니다.

Javascript - Date 기초 배우기 [new Date()]

날짜 설정하기

const nextYear = new Date();
nextYear.setFullYear(2021);

 Date 객체는 생성해서 바로 사용할 수 도 있지만, 주어진 상황에 따라서는 Date 객체에  임의의 수를 더하거나 빼서 기능 구현을 해야 하는 상황이 발생합니다.

setFullYear 함수를 통해 Date의 값을 수정

 Date의 날짜 및 시간을 설정을 하기 위해 다음과 같은 함수가 제공되며 Local time을 기반으로 설정됩니다.

setFullYear: 연도를 설정한다.
setMonth:(0 ~ 11) 월 [ 여기서 1월은 0이고 12월은 11이다 ]을 설정한다.
setDate: (0 ~ 31). 날짜 [0을 설정한 경우 이전 달의 가장 마지막 날을 설정한다.]를 설정한다. 
setHours: (0 ~ 23). 시간을 설정한다.
setMinutes: (0 ~ 59). 분을 설정한다.
setSeconds: (0 ~ 59). 초를 설정한다.
setMilliseconds: (0 ~ 999). 밀리 초를 설정한다.

 

getFullYear: 연도를 반환한다.
getMonth:(0 ~ 11) 월 [ 여기서 1월은 0이고 12월은 11이다 ]을 반환한다.
getDate: (1 ~ 31). 날짜를 반환한다.
getHours: (0 ~ 23). 시간을 반환한다.
getMinutes: (0 ~ 59). 분을 반환한다.
getSeconds: (0 ~ 59). 초를 반환한다.
getMilliseconds: (0 ~ 999). 밀리 초를 반환한다.

 

 Date 객체의 월(Month) 개념은 zero-indexed 기반이기 때문에 setMonth를 사용하는 경우에 0을 설정하면 1월이 설정되니, 인지하고 사용해야 합니다.

const january = new Date();
january.setMonth(0);

console.log(january);

setMonth()

 Date의 날짜 및 시간을 설정하는 함수를 통해 값을 변경하는 경우 기존에 만들어진 객체를 설정해서 사용하기보다는 새로운 객체를 만들어 사용하는 방법을 권장합니다. 새로운 객체를 생성해 값을 설정하여 사용하기를 권장하는 이유는 객체가 불변하지 않은 특성(mutable)을 가지고 있기 때문이며 불변하지 않은 특성(mutable)은 문제를 야기시킬 수 있습니다.

getMonth() 와 setMonth()

 

 

날짜 더하고 빼기 [계산] - 날짜 설정 응용하기

 날짜를 설정하는 방법을 활용해서 일자를 기준으로 계산을 하는 코드를 작성해보면 다음과 같다.

const today = new Date();

const tomorrow = new Date(today);
const yesterday = new Date(today);

tomorrow.setDate(today.getDate() + 1);
console.log(tomorrow);

yesterday.setDate(today.getDate() - 1);
console.log(yesterday);

일자를 더하고 빼기

 함수를 만들어 응용하면 조금 더 쉽게 일자를 더하거나 뺄 수 있습니다. 아래에 작성한 코드는 일자를 더하거나 뺄 수 있는 함수를 작성한 코드로 Date 객체에서 제공하는 get, set의 범주인 년, 월, 시간, 분, 초 도 활용이 가능합니다.

function addDays(date, days) {
  const clone = new Date(date);
  clone.setDate(date.getDate() + days)
  return clone;
}

const today = new Date();

const tomorrow = addDays(today, 1);
console.log(tomorrow);

const yesterday = addDays(today, -1);
console.log(yesterday);

 날짜를 더하거나 빼는 개념과 같이 알아두면 좋은 개념은 Date 객체가 가진 Overflow 현상입니다. Date 객체의 경우 값을 설정할 때 임계값을 넘은 값을 설정하면 Overflow와 같이 자동으로 다음 날짜로 설정이 됩니다.

const today = new Date(2021, 3, 30);

const nextDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 1
);

 // 2021년 5월 1일
console.log(nextDate);

Date Overflow

정리하기

 이번 글에서는 Date가 가진 날짜 값을 가져오고 설정하는 기능을 알아보고, 그 기능들을 활용해서 날짜를 더하거나 빼는 기능까지 다루어보았습니다. Date는 사용하기 편리하다고는 할 수 없지만 Date의 기본 기능만 숙지한다면 날짜 설정과 관련된 기능은 어렵지 않게 구현할 수 있습니다.