Symbol.toPrimitive(기호 표기법으로는 @@toPrimitive)는 자바스크립트에서 객체(object)를 원시(primitive) 값으로 변환할 때 자동으로 호출되는 내장 심볼입니다. 이 메서드를 활용하면 객체가 산술 연산이나 문자열 연결 등에 사용될 때 어떤 값을 반환할지 직접 제어할 수 있습니다.
Syntax(문법)
Symbol()[Symbol.toPrimitive](hint)
hint 매개변수는 변환될 원시 값의 타입을 지정하며, 선택 사항(optional)입니다. hint에는 다음 세 가지 값이 전달될 수 있습니다.
- "number" – 산술 연산 시 전달되며, 숫자 타입으로의 변환을 의미합니다.
- "string" – 문자열 연결이나 템플릿 리터럴 사용 시 전달되며, 문자열 타입으로의 변환을 의미합니다.
- "default" – 명확한 타입 선호가 없을 때 전달되는 기본값입니다.
아래 예제 코드는 Symbol.toPrimitive() 함수를 활용해 객체와 숫자를 더하는 방법을 보여줍니다.
Example(예제)
<!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;
}
div {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript symbol.@@toPrimitive() function</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to add the object with a number.
</h3>
<script>
let fillEle = document.querySelector(".sample");
let obj = {
num: 22,
[Symbol.toPrimitive]() {
return this.num;
},
};
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML = obj + 44;
});
</script>
</body>
</html>
Output(실행 결과)
위 화면에서 "CLICK HERE" 버튼을 클릭하면 다음과 같은 결과가 출력됩니다.
버튼을 클릭하면 객체 obj에 [Symbol.toPrimitive] 메서드가 정의되어 있기 때문에, 덧셈 연산 과정에서 해당 메서드가 자동으로 호출되어 this.num, 즉 22를 반환합니다. 그 결과 22 + 44 = 66이 계산되어 화면에 표시됩니다.
만약 이 메서드가 정의되어 있지 않았다면 객체는 기본적으로 [object Object]44처럼 문자열로 변환되었을 것입니다. 이처럼 Symbol.toPrimitive는 객체의 타입 변환 동작을 세밀하게 제어할 수 있는 강력한 도구입니다.