Symbol.for() 함수란?
JavaScript의 Symbol.for() 함수는 주어진 키(key)에 해당하는 심볼을 런타임 전역에서 관리되는 전역 심볼 레지스트리(global symbol registry)에서 검색합니다. 만약 해당 키로 등록된 심볼이 이미 존재한다면 그 심볼을 그대로 반환하고, 존재하지 않으면 새로운 심볼을 생성하여 레지스트리에 등록한 뒤 반환합니다.
Symbol()과 Symbol.for()의 차이
두 함수의 가장 큰 차이점은 다음과 같습니다.
- Symbol(): 호출할 때마다 항상 새로운 고유한 심볼을 생성합니다. 아무리 같은 설명을 넣어도 서로 다른 심볼입니다.
- Symbol.for(): 동일한 키로 호출하면 항상 같은 심볼을 반환합니다. 따라서 애플리케이션의 여러 모듈이나 코드 영역 간에 심볼을 공유해야 할 때 매우 유용합니다.
또한 Symbol.for()에 전달하는 값은 문자열이 아니어도 됩니다. 숫자를 전달하면 자동으로 문자열로 변환되어 키로 사용됩니다.
예제 코드
<!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.for() function</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to get the symbols.
</h3>
<script>
let fillEle = document.querySelector(".sample");
let symbol = [];
symbol.push(Symbol.for("New"));
symbol.push(Symbol.for("Hello"));
symbol.push(Symbol.for(345));
document.querySelector(".Btn").addEventListener("click", () => {
symbol.forEach((item) => (fillEle.innerHTML += item.toString() + "<br>"));
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CLICK HERE 버튼을 클릭하면 −
버튼을 클릭하면 Symbol.for()로 생성된 세 개의 심볼이 화면에 출력됩니다. 각 심볼은 Symbol(New), Symbol(Hello), Symbol(345) 형태로 표시되며, toString() 메서드를 통해 문자열 형태로 변환되어 렌더링됩니다. 특히 숫자 345는 자동으로 문자열 "345"로 변환되어 키로 처리되었음을 확인할 수 있습니다.
정리
Symbol.for()는 전역 심볼 레지스트리를 통해 심볼을 재사용할 수 있게 해주는 강력한 기능입니다. 여러 곳에서 동일한 심볼을 참조해야 하는 상황이라면 Symbol() 대신 Symbol.for()를 사용하는 것이 좋습니다. 반대로 충돌 없이 완전히 고유한 심볼이 필요하다면 기존의 Symbol()을 사용하는 것이 적절합니다.