Symbol.toPrimitive 속성이란?
JavaScript의 Symbol.toPrimitive는 Symbol 객체를 원시 값(primitive value)으로 변환할 때 사용되는 잘 알려진 심볼(well-known symbol)입니다. 객체가 문자열이나 숫자 같은 원시 타입으로 형 변환되어야 하는 상황에서, 이 심볼에 연결된 함수가 자동으로 호출됩니다.
문법
Symbol()[Symbol.toPrimitive](hint);
hint 매개변수는 어떤 원시 타입으로 변환할지를 나타내며, 다음 값 중 하나를 가집니다.
- 'string' — 문자열 문맥에서의 변환
- 'number' — 숫자 문맥에서의 변환
- 'default' — 특정 타입이 지정되지 않은 경우의 기본 변환
예제 1: Symbol.toPrimitive 속성 확인하기
아래 예제는 Symbol 객체가 가진 Symbol.toPrimitive 속성을 콘솔에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p>버튼을 클릭해 결과를 확인해 보세요.</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
function display() {
const val = Symbol('john');
console.log(val[Symbol.toPrimitive]);
}
</script>
</body>
</html>
실행 결과
Result 버튼을 클릭하면 콘솔에 다음과 같이 내장 함수가 출력됩니다.
예제 2: hint 인자를 전달해 원시 값 얻기
이번에는 Symbol.toPrimitive 메서드를 직접 호출하여 Symbol의 원시 값을 반환받는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p>버튼을 클릭해 결과를 확인해 보세요.</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
function display() {
const val = Symbol(2465);
var res = val[Symbol.toPrimitive](99);
console.log(res);
}
</script>
</body>
</html>
실행 결과
Result 버튼을 클릭한 뒤 브라우저 개발자 도구의 콘솔(Console) 탭을 열면 결과를 확인할 수 있습니다.
참고: Symbol.description과의 차이
혼동하기 쉬운 속성으로 Symbol.prototype.description이 있습니다. 이는 Symbol을 생성할 때 전달한 설명 문자열을 반환하는 읽기 전용 속성으로, 예를 들어 Symbol('john').description은 'john'을 반환합니다. 반면 Symbol.toPrimitive는 객체의 타입 변환 동작 자체를 담당한다는 점에서 역할이 다릅니다.
정리
Symbol.toPrimitive는 Symbol 객체가 원시 값으로 변환되는 방식을 정의하는 내장 심볼입니다. 메서드를 직접 호출하면 해당 Symbol의 원시 값을 반환하며, 위 예제처럼 유효하지 않은 hint(예: 99)가 전달되더라도 기본 동작에 따라 Symbol 자체의 원시 값이 반환됩니다. 객체의 타입 변환 로직을 세밀하게 제어하고 싶을 때 유용하게 활용할 수 있습니다.