Javascript - Date 날짜 형식 [yyyy-MM-dd]

이번에는 Javascript의 Date 객체가 가진 format 형식 지정과 toString에 대해 이야기해보려고 합니다. Javascript의 Date 객체는 날짜의 형식과 관련해 편리함 없이 불편한 기능들을 제공합니다. 기본적으로 7가지의 형식을 정의하고 있으며, 앞서 말했듯 이 기능들은 편의성이 떨어져 잘 사용되지 않습니다. 

Date 기본 날짜 형식 지정 및 출력

Date 객체는 기본적으로 7가지의 형식 출력을 제공합니다.

const today = new Date();

today.toString();
// Mon Apr 19 2021 23:02:18 GMT+0900 (Korean Standard Time)

today.toDateString();
// Mon Apr 19 2021

today.toLocaleString();
// 4/19/2021, 11:02:18 PM

today.toLocaleDateString();
// 4/19/2021

today.toGMTString();
// Mon, 19 Apr 2021 14:02:18 GMT

today.toUTCString();
// Mon, 19 Apr 2021 14:02:18 GMT

today.toISOString();
// 2021-04-19T14:02:18.809Z

Date 객체의 7가지 출력 방법

Date 날짜 형식 재정의해서 사용해보기 - 기본

Date 객체가 제공하는 날짜 형식과 출력은 사용이 불편하지만 get 함수를 활용하면 원하는 형태의 날짜 형식을 만들고 출력할 수 있습니다.

const happyNewYear = new Date(2021, 0, 1);
const year = happyNewYear.getFullYear();
const month = happyNewYear.getMonth() + 1;
const date = happyNewYear.getDate();

console.log(`${year}-${month >= 10 ? month : '0' + month}-${date >= 10 ? date : '0' + date}`);
// 2021-01-01

Date 객체가 제공하는 getFullYear(), getMonth(), getDate() 함수를 사용해서 Date 날짜 형식을 yyyy-MM-dd 형태로 정의해서 출력할 수 있습니다.

const months = [
  '1월',
  '2월',
  '3월',
  '4월',
  '5월',
  '6월',
  '7월',
  '8월',
  '9월',
  '10월',
  '11월',
  '12월'
];

const days = [
  '일요일',
  '월요일',
  '화요일',
  '수요일',
  '목요일',
  '금요일',
  '토요일'
];

const today = new Date(2021, 0, 1);

// 월 이름 출력하기
const monthName = months[today.getMonth()];

// 요일 이름 출력하기
const dayName = days[today.getDay()];

1월부터 12월까지 일요일부터 토요일까지 배열로 정의하고 Date 객체의 getMonth(), getDay()를 사용하면 월과 요일을 확인할 수 있습니다.

Date 날짜 형식 재정의해서 사용해보기 - 활용 [yyyy-MM-dd]

function leftPad(value) {
    if (value >= 10) {
        return value;
    }

    return `0${value}`;
}

function toStringByFormatting(source, delimiter = '-') {
    const year = source.getFullYear();
    const month = leftPad(source.getMonth() + 1);
    const day = leftPad(source.getDate());

    return [year, month, day].join(delimiter);
}

toStringByFormatting(new Date(2021, 0, 1));
// 2021-01-01

앞서 [Date 날짜 형색 재정의해서 사용해보기 - 기본]에서 이야기한 코드를 사용하기 편하게 정리하면 위와 같은 형태로 정의할 수 있습니다. 기본으로 구분자는 정의되며 옵션을 통해 구분자 수정이 가능합니다.

yyyy-MM-dd 형태로 날짜 형식 정의하기

정리하기

Date 객체가 기본으로 제공하는 날짜 형식과 관련된 함수는 상황에 맞추어 사용하기가 불편합니다. 이러한 불편함을 해소하기 위해서는 get 함수를 사용해 형식을 재정의 할 수 있도록 만들어 사용해야 합니다. 또한 Date 객체의 월 기준값은 zero-indexed 입니다. 이 부분이 어렵거나 Date 객체를 이용해 날짜 및 시간을 사용할 때 오차 문제가 있으신 분은 아래 글을 참조해서 문제를 해결해보세요.

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