Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript Date 객체 완벽 가이드: 두 날짜 비교하는 방법

코딩 문제를 해결할 때 Date(날짜) 객체를 활용하면 날짜와 시간을 비교하고, 그 결과에 따라 코드의 특정 로직을 조건부로 실행할 수 있습니다. 이번 글에서는 JavaScript의 Date 객체를 사용해 두 날짜를 비교하고 어느 쪽이 더 나중(또는 이전) 날짜인지 확인하는 방법을 알아봅니다.

기본 설정

JavaScript에는 타임스탬프를 기반으로 로직을 처리할 때 유용한 메서드들을 제공하는 내장 Date 객체가 있습니다. 새 Date 인스턴스를 만들려면 다음과 같이 작성합니다.

const date = new Date("09-20-2020"); //2020-09-20T07:00:00.000Z

console.log(date)를 실행하면 T 뒤에 붙는 시간 정보는 기본적으로 사용자가 거주하는 지역의 시간대에 따라 달라집니다. UTC 시간을 기준으로 작업하고 싶다면 끝의 Z를 제거하고 대신 +HH:MM 또는 -HH:MM 형식을 추가하면 됩니다.

Date 객체를 어떻게 설정하는지 파악해 두는 것은 다음 섹션에서 비교 함수를 다룰 때 매우 중요합니다.

getTime() 메서드 활용하기

Date 생성자를 사용하면 다양한 메서드를 활용할 수 있는데, 그중 대표적인 것이 바로 getTime()입니다. 이 메서드는 Date 객체를 숫자로 변환해 주기 때문에 날짜 간 비교가 훨씬 수월해집니다.

getTime()은 해당 날짜를 에포크(epoch) 시작 이후 경과한 밀리초 수로 변환합니다. 여기서 에포크란 1970년 1월 1일을 의미합니다. 예시는 다음과 같습니다.

const date = new Date("09-20-2020")
date.getTime(); //1600585200000

날짜가 새 Date 객체로 인스턴스화되어 있기 때문에 점 표기법(dot notation)을 통해 getTime 함수에 손쉽게 접근할 수 있습니다.

Date 객체에서 활용할 수 있는 다양한 메서드는 MDN 같은 공식 문서를 참고해 보시길 권장합니다. 이제 본격적으로 문제를 풀어볼 준비가 되었습니다.

부트캠프 참가자의 81%는 수료 후 기술 분야 취업 전망에 대한 자신감이 높아졌다고 답했습니다. 지금 나에게 맞는 부트캠프를 찾아 매칭받아 보세요.

부트캠프 졸업생들은 부트캠프 시작부터 첫 직장 취업까지 평균 6개월 미만의 짧은 기간 안에 커리어 전환을 완료했습니다.

문제 정의

두 개의 문자열과 하나의 비교 연산자가 주어졌을 때, 주어진 연산자 조건에 따라 더 큰 값 또는 더 작은 값에 해당하는 날짜를 반환하는 것이 목표입니다. 입력으로 전달되는 두 문자열은 항상 Date 객체로 변환 가능하다고 가정합니다.

문제 해결 단계

  1. 두 문자열을 각각 새 Date 객체로 변환합니다. 이때 Date 생성자에 매개변수를 전달하는 방식도 함께 살펴보세요!
  2. getTime() 메서드를 사용해 1970년 1월 1일 이후 경과한 밀리초 수를 구합니다.
  3. 조건문 또는 삼항 연산자를 활용해 전달받은 비교 연산자에 맞는 날짜를 판별합니다.
  4. 밀리초 값을 사람이 읽을 수 있는 날짜 문자열로 변환한 뒤 반환합니다.

정답 코드를 보기 전에 먼저 스스로 해결해 보세요!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    body {
      font-family: 'Roboto', Courier, monospace
    }
  </style>
</head>
<body>
  <h1>Date Comparison</h1>
    <label for="comparison">Comparison (Choose One)</label>
    <div id="comparison" value="more.value">
      <input name="compare" type="radio" id="less" value=""/>
          <label for="less"> &lt; </label>
      <input name="compare" type="radio" id="more" checked value=""/>
          <label for="more"> &gt;= </label>
    </div>
 <br/>
    <label for="date-1">Date 1:</label>
    <input id="date-1" value="" type="date" name="date1" />
    <label for="date-2">Date 2:</label>
    <input id="date-2" value="" type="date" name="date2" />
    <input id="submit-button" type="submit" />
    <div id="demo"></div>
    <script>
        const handleSubmit = (date1, date2, compare) => {
        //to compare : getTime of each date
        date1Arr = date1.split("-");
        date2Arr = date2.split("-");
              //year, month (month is zero-based), day
        let d1 = new Date(date1Arr[0], date1Arr[1] - 1, date1Arr[2]).getTime();
        let d2 = new Date(date2Arr[0], date2Arr[1] - 1, date2Arr[2]).getTime();
        // getTime gets the number of milliseconds since Jan 1 1970. So the higher the number, the later the date.
        //use conditional or ternary to return Comparison
        let timeDisplay;
        if(compare === ">=") {
              timeDisplay = d1 >= d2 ? d1 : d2;
        } else {
              timeDisplay = d1 < d2 ? d1 : d2;
        }
        let timetoDisplay = new Date(timeDisplay);  
        document.getElementById("demo").innerHTML = timetoDisplay.toDateString();
    }
    let date_1 = document.getElementById("date-1");
    let date_2 = document.getElementById("date-2");
    document.getElementById("submit-button").addEventListener("click", (e) => handleSubmit(date_1.value, date_2.value, more.checked ? '>=' : '<'))
    </script>
  </body>
</html>

처음에는 JavaScript의 날짜 처리가 다소 혼란스럽게 느껴질 수 있지만, 조금만 연습하면 금방 익숙해질 수 있습니다. 이번 글에서는 JavaScript에서 새 날짜 객체를 생성하고 생성자의 메서드에 접근하는 방법, 그리고 함수에 전달된 연산자에 따라 두 날짜 중 더 큰 값 또는 더 작은 값을 비교하는 방법까지 차례대로 살펴보았습니다.

여기까지 내용을 잘 소화했다면, 다음 단계로 배열에 저장된 항목들을 추가된 날짜 기준으로 오름차순 또는 내림차순 정렬하는 방법도 학습해 보시길 추천합니다. 즐겁게 코딩하시고, 꾸준히 도전하세요!