JavaScript Date 생성자(constructor) 속성 완벽 가이드

JavaScript의 Date 생성자 속성(constructor property)은 해당 날짜 객체를 만든 생성자 함수를 반환합니다. 즉, 특정 Date 인스턴스가 어떤 함수로부터 생성되었는지 확인할 수 있는 유용한 속성입니다.

아래 예제 코드를 통해 JavaScript Date constructor 속성이 실제로 어떻게 동작하는지 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Date constructor Property</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 날짜 생성자 함수를 확인할 수 있습니다
</h3>
<script>
    let fillEle = document.querySelector(".sample");
    let date = new Date();
    fillEle.innerHTML = date + '<br>';
    document.querySelector(".Btn").addEventListener("click", () => {
        fillEle.innerHTML += date.constructor;
    });
</script>
</body>
</html>

실행 결과

페이지를 실행하면 현재 날짜와 시간이 화면에 표시됩니다.

JavaScript Date 생성자(constructor) 속성 완벽 가이드

버튼 클릭 후

“CLICK HERE” 버튼을 클릭하면 해당 날짜 객체의 생성자 함수가 아래와 같이 출력됩니다.

JavaScript Date 생성자(constructor) 속성 완벽 가이드

핵심 정리

constructor 속성은 모든 JavaScript 객체가 기본적으로 가지고 있는 속성으로, 객체를 생성한 함수에 대한 참조를 반환합니다.
Date 객체의 경우 function Date() { [native code] } 형태로 출력되며, 이는 자바스크립트 엔진에 내장된 네이티브 함수임을 의미합니다.
이 속성을 활용하면 instanceof 연산자처럼 객체의 타입을 검증하는 용도로도 사용할 수 있습니다.