자바스크립트 Symbol.valueOf() 메서드 사용법과 예제 코드

자바스크립트의 Symbol.valueOf() 메서드는 심볼(Symbol) 객체가 감싸고 있는 원시값(primitive value)을 반환합니다. 심볼은 ES6에서 도입된 원시 타입으로, 주로 객체의 고유한 프로퍼티 키를 만들 때 사용됩니다.

Symbol.valueOf() 메서드란?

Symbol.valueOf()는 자바스크립트 엔진이 객체를 원시값으로 변환할 때 내부적으로 호출하는 메서드입니다. 개발자가 직접 호출하는 경우는 드물지만, 심볼의 원시값에 접근해야 할 때 유용하게 활용할 수 있습니다.

다음은 Symbol.valueOf() 메서드를 구현한 전체 예제 코드입니다.

예제 코드

<!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.valueOf() 함수</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 심볼의 값이 표시됩니다
</h3>
<script>
   let fillEle = document.querySelector(".sample");
   const symbol = Symbol('computer');
   const symbol1 = Symbol(234);
   let res = symbol.valueOf();
   let res1 = symbol1.valueOf();
   document.querySelector(".Btn").addEventListener("click", () => {
      fillEle.innerHTML += 'res = ' + res.toString() + "<br>";
      fillEle.innerHTML += 'res1 = ' + res1.toString() + "<br>";
   });
</script>
</body>
</html>

코드 설명

위 코드의 동작 방식을 단계별로 살펴보겠습니다.

심볼 생성: Symbol('computer')와 Symbol(234)로 두 개의 서로 다른 심볼을 생성합니다. 심볼에 전달된 값은 설명(description)으로만 사용되며, 실제 값에는 포함되지 않습니다.
valueOf() 호출: 각 심볼에 대해 valueOf()를 호출하면 해당 심볼의 원시값이 반환됩니다.
결과 출력: 버튼을 클릭하면 반환된 값을 toString()으로 문자열로 변환하여 화면에 출력합니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

자바스크립트 Symbol.valueOf() 메서드 사용법과 예제 코드

"CLICK HERE" 버튼을 클릭하면 아래와 같이 각 심볼의 원시값이 출력됩니다.

자바스크립트 Symbol.valueOf() 메서드 사용법과 예제 코드

참고 사항

심볼은 다른 원시 타입과 달리 암묵적 형 변환이 허용되지 않으므로, 문자열로 변환할 때는 반드시 toString()이나 String()을 사용해야 합니다.
Symbol('computer')와 Symbol('computer')처럼 같은 설명으로 생성해도 두 심볼은 항상 서로 다른 고유한 값입니다.
Object(symbol)로 감싼 래퍼 객체에서 valueOf()를 호출하면 원래의 심볼 원시값을 얻을 수 있습니다.