JavaScript에서 현재 연도만 표시하는 방법 완벽 가이드

웹 페이지에 현재 연도만 간단하게 표시하고 싶다면 JavaScript의 getFullYear() 메서드를 사용하면 됩니다. 이 메서드는 Date 객체에서 연도 정보만 추출하여 네 자리 숫자 형태(예: 2024)로 반환합니다.

핵심 코드 예제

아래는 HTML과 JavaScript를 활용해 현재 연도를 화면에 출력하는 전체 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>현재 연도 표시하기</title>
</head>
<body>
<h1>
현재 연도 = <span id="theCurrentYear"></span>
</h1>
<script>
document.getElementById("theCurrentYear").innerHTML = new
Date().getFullYear();
</script>
</body>
</html>

코드 실행 방법

위 프로그램을 실행하려면 파일 이름을 index.html(또는 원하는 이름의 .html 파일)로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 'Open with Live Server' 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 브라우저에 다음과 같이 현재 연도가 출력됩니다.

JavaScript에서 현재 연도만 표시하는 방법 완벽 가이드

getFullYear() 메서드 살펴보기

getFullYear()는 JavaScript의 내장 Date 객체가 제공하는 메서드로, 로컬 시간 기준으로 현재 연도를 네 자리 숫자로 반환합니다. 예를 들어 2025년이라면 2025라는 값이 그대로 출력됩니다.

참고로 비슷한 역할을 하는 getYear() 메서드도 있지만, 이 메서드는 일부 브라우저에서 1900년을 기준으로 한 값(예: 125)을 반환하므로 호환성 문제가 있습니다. 따라서 현재 연도를 표시할 때는 항상 getFullYear()를 사용하는 것이 안전합니다.

활용 팁

<p>&copy; <span id="year"></span> MyWebsite. All rights reserved.</p>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>