Symbol.keyFor() 함수란?
JavaScript의 Symbol.keyFor() 함수는 주어진 심볼(symbol)과 연결된 키(key)를 찾아 반환하는 메서드입니다. 이때 키는 전역 심볼 레지스트리(global symbol registry)에서 검색됩니다.
참고로 Symbol.keyFor()는 Symbol.for() 메서드를 통해 전역 레지스트리에 등록된 심볼에만 정상적으로 작동합니다. 만약 등록되지 않은 심볼을 인자로 전달하면 undefined가 반환되므로, 두 메서드는 항상 짝을 이루어 사용하는 것이 좋습니다.
다음은 Symbol.keyFor() 함수의 동작을 확인할 수 있는 예제 코드입니다.
예제 코드
<!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.keyFor() function</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to find the keys for the symbol
</h3>
<script>
let fillEle = document.querySelector(".sample");
const symbol = Symbol.for("HELLO");
const symbol1 = Symbol.for("NEW");
const symbol2 = Symbol.for(711);
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML += "symbol = " + Symbol.keyFor(symbol) + "<br>";
fillEle.innerHTML += "symbol1 = " + Symbol.keyFor(symbol1) + "<br>";
fillEle.innerHTML += "symbol2 = " + Symbol.keyFor(symbol2) + "<br>";
});
</script>
</body>
</html>출력 결과
위 코드를 실행한 후 “CLICK HERE” 버튼을 클릭하면 다음과 같이 각 심볼에 연결된 키 값이 화면에 출력됩니다.
실행 결과를 보면 Symbol.for("HELLO"), Symbol.for("NEW"), Symbol.for(711)로 생성된 세 개의 심볼에서 각각 원래의 키인 HELLO, NEW, 711이 그대로 검색되는 것을 확인할 수 있습니다. 이처럼 Symbol.keyFor()를 활용하면 전역 레지스트리에 등록된 심볼의 원래 키를 손쉽게 역추적할 수 있습니다.