Date 객체는 JavaScript 언어에 내장된 데이터 타입입니다. Date 객체는 아래와 같이 new Date()를 사용하여 생성할 수 있습니다.
Date 객체가 한 번 생성되면 다양한 메서드를 통해 객체를 조작할 수 있습니다. 대부분의 메서드는 현지 시간 또는 UTC(협정 세계시, GMT)를 기준으로 객체의 연도, 월, 일, 시, 분, 초, 밀리초 필드를 가져오거나 설정하는 역할을 합니다.
Date 객체의 setHours() 함수는 시(hour)를 나타내는 정수를 인수로 받아, 현재 날짜 객체의 시간 값을 해당 값으로 수정하거나 대체합니다.
문법(Syntax)
setHours()의 기본 문법은 다음과 같습니다. 첫 번째 인수인 시간 값은 필수이며, 필요에 따라 분, 초, 밀리초 값도 선택적으로 함께 전달할 수 있습니다.
dateObj.setHours(hoursValue);
dateObj.setHours(hoursValue, minutesValue, secondsValue, msValue);
예제 1 – 기존 날짜의 시간 변경하기
다음 예제는 이미 생성된 Date 객체의 시간을 setHours() 함수로 변경하는 방법을 보여줍니다.
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script type="text/javascript">
var dateObj = new Date('september 26, 89 5:4:25:96');
document.write("Current date: "+dateObj.toUTCString());
document.write("<br>");
dateObj.setHours(12);
document.write("Date after setting the hours: "+dateObj.toUTCString());
</script>
</body>
</html>
출력 결과
Current date: Mon, 25 Sep 1989 23:34:25 GMT
Date after setting the hours: Tue, 26 Sep 1989 06:34:25 GMT
예제 2 – 생성 시 시간을 지정하지 않은 경우
Date 객체를 생성할 때 시간을 지정하지 않았더라도, setHours() 함수를 사용하면 나중에 시간을 자유롭게 설정할 수 있습니다.
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script type="text/javascript">
var dateObj = new Date('26, September, 1989 4:25:96');
dateObj.setHours(5);
document.write(dateObj.toString());
</script>
</body>
</html>
출력 결과
Tue Sep 26 1989 05:25:00 GMT+0530 (India Standard Time)
예제 3 – 현재 날짜에 시간만 설정하기
마찬가지로 Date 객체를 생성할 때 생성자에 아무 값도 전달하지 않은 경우에도 이 함수로 시간을 설정할 수 있습니다. 이때 월, 일, 연도 등 나머지 값은 현재 날짜(및 시간)의 값이 그대로 유지됩니다.
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script type="text/javascript">
var dateObj = new Date();
dateObj.setHours(5);
document.write(dateObj.toString());
</script>
</body>
</html>
출력 결과
Thu Oct 18 2018
참고 사항
위 예제에서 사용한 document.write()는 현재 웹 표준에서 권장되지 않는 방식입니다. 실제 개발 환경에서는 console.log()를 사용하여 결과를 확인하는 것이 좋습니다.
또한 setHours()에 범위를 벗어난 값(예: 24 이상의 시간)을 전달하면 날짜가 자동으로 조정되므로, 날짜 계산 로직을 구현할 때에도 유용하게 활용할 수 있습니다.