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

JavaScript Date.setUTCHours() 메서드 완벽 정리 – 문법과 예제로 배우기

Date 객체는 자바스크립트(JavaScript) 언어에 기본적으로 내장된 데이터 타입으로, 날짜와 시간을 손쉽게 다룰 수 있도록 도와줍니다. Date 객체는 new Date() 생성자를 통해 아래와 같이 생성할 수 있습니다.

Date 객체가 한 번 생성되면, 다양한 내장 메서드를 사용해 객체를 조작할 수 있습니다. 대부분의 메서드는 현지 시간(Local Time) 또는 UTC(협정 세계시, GMT) 기준으로 연도, 월, 일, 시, 분, 초, 밀리초 필드를 가져오거나(get) 설정(set)하는 역할을 합니다.

이 중 setUTCHours() 메서드는 시(hour)를 나타내는 정수를 인수로 받아, 현재 날짜 객체의 시간 값을 UTC(세계 표준시) 기준으로 변경하는 기능을 합니다.

문법(Syntax)

setUTCHours()의 기본 문법은 다음과 같습니다.

dateObj.setUTCHours(hoursValue);

필요하다면 분, 초, 밀리초 값도 함께 전달할 수 있습니다.

dateObj.setUTCHours(hoursValue, minutesValue, secondsValue, msValue);
  • hoursValue: 설정할 시(0~23)를 나타내는 정수
  • minutesValue: (선택) 설정할 분(0~59)
  • secondsValue: (선택) 설정할 초(0~59)
  • msValue: (선택) 설정할 밀리초(0~999)

예제 1: UTC 기준으로 시간 설정하기

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var dateObj = new Date('september 26, 89 12:4:25:96');
      document.write("Current date: " + dateObj.toUTCString());
      document.write("<br>");
      dateObj.setUTCHours(23);
      document.write("Date after setting the hours: " + dateObj.toUTCString());
   </script>
</body>
</html>

실행 결과

Current date: Tue, 26 Sep 1989 06:34:25 GMT
Date after setting the hours: Tue, 26 Sep 1989 23:34:25 GMT

위 예제에서 볼 수 있듯이, setUTCHours(23)을 호출한 후 시간 값이 UTC 기준 23시로 변경된 것을 확인할 수 있습니다. 나머지 날짜 정보(연, 월, 일, 분, 초)는 그대로 유지됩니다.

예제 2: 생성 시 시간을 지정하지 않은 경우

Date 객체를 생성할 때 시간을 명시하지 않았더라도, 이후 setUTCHours() 메서드를 사용해 UTC 기준으로 시간을 설정할 수 있습니다.

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var dateObj = new Date('26, September, 1989 4:25:96');
      dateObj.setUTCHours(5);
      document.write(dateObj.toString());
   </script>
</body>
</html>

실행 결과

Tue Sep 26 1989 05:25:00 GMT+0530 (India Standard Time)

예제 3: 현재 시간 기준으로 시간만 변경하기

생성자에 아무 값도 전달하지 않고 Date 객체를 생성한 경우에도, setUTCHours()를 사용해 시간을 설정할 수 있습니다. 이때 월, 일, 연도 등 나머지 값들은 현재 날짜(시간) 기준으로 유지됩니다.

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var dateObj = new Date();
      dateObj.setUTCHours(5);
      document.write(dateObj.toString());
   </script>
</body>
</html>

실행 결과

Thu Oct 18 2018

참고: 관련 메서드

UTC 기준 시간을 다루는 다른 유용한 메서드들도 함께 알아두면 좋습니다.

  • getUTCHours(): UTC 기준 시(0~23)를 반환합니다.
  • setHours(): 현지 시간 기준으로 시를 설정합니다.
  • getHours(): 현지 시간 기준 시를 반환합니다.
  • toUTCString(): Date 객체를 UTC 기준 문자열로 변환해 반환합니다.

setUTCHours()는 서버 간 시간 동기화나 국제화(i18n) 처리처럼 시간대에 영향을 받지 않는 일관된 시간 처리가 필요할 때 특히 유용하게 활용됩니다.