JavaScript date.@@toPrimitive() 함수란?
JavaScript의 date.@@toPrimitive() 함수는 Date 객체를 원시 값(primitive value)으로 변환하는 데 사용됩니다. 이 메서드는 Symbol.toPrimitive 심볼 속성에 정의되어 있으며, 힌트(hint) 매개변수를 통해 반환할 원시 값의 유형을 지정할 수 있습니다.
힌트로 사용할 수 있는 값은 다음과 같습니다.
- "default" – 기본 동작에 따라 문자열 형태의 날짜를 반환합니다.
- "number" – 1970년 1월 1일부터 경과한 밀리초 단위의 타임스탬프(숫자)를 반환합니다.
- "string" – 문자열 형태의 날짜를 반환합니다.
다음은 JavaScript에서 날짜를 원시 값으로 변환하는 방법을 보여주는 예제 코드입니다.
예제 코드
<!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: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript date.@@toPrimitive() function</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to see the date as primitive value</h3>
<script>
let fillEle = document.querySelector(".sample");
let date = new Date();
let primitiveDef = date[Symbol.toPrimitive]("default");
let primitiveNum = date[Symbol.toPrimitive]("number");
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML += "Hint = default :" + primitiveDef + "<br>";
fillEle.innerHTML += "Hint = number :" + primitiveNum;
});
</script>
</body>
</html>실행 결과
페이지를 실행하면 다음과 같이 버튼과 안내 문구가 표시됩니다.
위 코드에서는 먼저 new Date()로 현재 날짜 객체를 생성한 뒤, date[Symbol.toPrimitive]("default")와 date[Symbol.toPrimitive]("number")를 호출하여 각각 기본 값과 숫자 값을 미리 구해 둡니다. 그리고 "CLICK HERE" 버튼을 클릭하면 결과가 화면에 출력됩니다.
버튼 클릭 후 화면에는 힌트가 "default"일 때의 날짜 문자열과 힌트가 "number"일 때의 밀리초 타임스탬프가 함께 표시됩니다.
이처럼 date.@@toPrimitive() 함수를 활용하면 Date 객체를 상황에 맞게 문자열 또는 숫자 형태의 원시 값으로 손쉽게 변환할 수 있으며, 산술 연산이나 문자열 결합 시 자동 형 변환이 어떻게 이루어지는지 이해하는 데도 큰 도움이 됩니다.