📖 TIL - toISOString을 이용하여 편리하게 Date형식 찍어보자

📌 문제 설명

프로젝트를 하다보면 Date형식을 지정해야 할 일이 아주 많은데,
ex) 2024-12-27
위와 같은 형식을 많이 선호하는듯 하다.

🤔 문제 접근

보통 프로젝트에 사용을 한다고 하면

function getTodayDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
}

와 같은 형식을 지정하여 사용하곤 했다.
하지만 이렇게 여러줄로 짜는것이 문득 비 효율적이다라고 생각이 들었다..
물론 코드의 가독성은 아주 좋으나,
date형식을 지정하기 위해 5줄가량이 되는 코드를 짜는것이 맞는걸까?

열심히 구글링을 해보니, 발견한 코드가 있었다.

1. 한줄로 작성이 가능하고
2. 가독성이 있는 코드

💡 해결 방법

const date = document.getElementById("date");
date.value = new Date().toISOString().split("T")[0];
// or
date.value = new Date().toISOString().slice(0, 10);

🔍 코드 설명

date.value = new Date().toISOString().split("T")[0];

1. new Date().toISOString()

toISOString()은 날짜와 시간을 YYYY-MM-DDTHH:mm:ss.sssZ 형식으로 반환합니다.

2. split('T')[0]

toISOString()은 날짜와 시간 부분을 T로 구분하므로(2024-12-27T14:30:00.000Z
), split('T')[0]을 사용하여 날짜 부분만 추출하는 방식은 잘 작동합니다.

그런데 이 부분은 toISOString()을 알고 있지 않다면 우선적으로 콘솔로 찍은후에 이해를 해야한다라는 부분이 조금 걸리게 되었습니다. 그래서 생각한 방법이..
만약 더 명시적이고 직관적인 방법, slice를 사용하여 날짜만 잘라낼 수도 있을것 같습니다.
.slice(0, 10);

+) 수정
해당 toISOString()은 UTC 기준이기때문에, 한국 로컬 시간대에 맞추기 위해선,
const KSTDate = new Date(date.getTime() + 9 * 60 * 60 * 1000); // 9시간 더하기
KSTDate.toISOString()으로 맞추어 주어야 한다.

✨ 새롭게 배운 점

여러줄의 코드로 사용해 왔던 Date 형식을 단일코드로 해결할 수 있다.

🚀 이런 점이 효율적이에요

1. 명시적이고 직관적이다
2. 코드를 좀더 효율적으로 줄일 수 있다.

⭐️ 참고 자료

toISOString[mdn_web_doc]