JavaScript의 Symbol.toStringTag는 가장 널리 알려진 내장 심볼(well-known symbol) 중 하나입니다. 이 심볼은 문자열 값을 가지는 프로퍼티로, 객체가 생성되는 시점에 해당 객체에 대한 설명(문자열 태그)을 지정하는 역할을 합니다.
Object.prototype.toString() 메서드는 내부적으로 이 심볼의 값을 참조하여 “[object 태그명]” 형태의 문자열을 반환합니다. 일반 객체는 기본적으로 “[object Object]”를 반환하지만, 클래스나 객체에 Symbol.toStringTag 게터(getter)를 직접 정의하면 출력되는 문자열을 자유롭게 변경할 수 있습니다.
주요 내장 객체의 기본 toStringTag 값
- 배열(Array) → “Array”
- Map → “Map”
- Set → “Set”
- Promise → “Promise”
- 일반 객체 → “Object”
다음은 Symbol.toStringTag 심볼을 활용한 예제 코드입니다 −
예제
<!DOCTYPE html>
<html lang="ko">
<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.toStringTag 심볼</h1>
<div class="sample"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 각 객체의 문자열 설명을 확인할 수 있습니다
</h3>
<script>
let fillEle = document.querySelector(".sample");
class testClass {
get [Symbol.toStringTag]() {
return 'Testing';
}
}
class helloClass {
get [Symbol.toStringTag]() {
return 'Hello World';
}
}
let test = new testClass();
let hello = new helloClass();
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML += 'testClass = ' + test.toString() + "<br>";
fillEle.innerHTML += 'helloClas = ' + hello.toString() + "<br>";
});
</script>
</body>
</html>
출력 결과
“클릭하세요(CLICK HERE)” 버튼을 클릭하면 −
버튼을 클릭하면 testClass 인스턴스는 “[object Testing]”, helloClass 인스턴스는 “[object Hello World]”라는 문자열이 화면에 표시됩니다. 이처럼 각 클래스에서 정의한 Symbol.toStringTag 반환값이 toString() 호출 결과에 그대로 반영되는 것을 확인할 수 있습니다.
정리
Symbol.toStringTag는 객체의 기본 문자열 표현을 세밀하게 제어하고 싶을 때 유용한 심볼입니다. 특히 디버깅, 로깅, 라이브러리 개발 시 객체의 종류를 명확하게 구분해야 하는 상황에서 Object.prototype.toString.call(obj)와 함께 활용하면 매우 효과적입니다.