JavaScript 심볼(Symbol)이란? ES6의 고유한 원시 데이터 타입 쉽게 이해하기

심볼(Symbol)은 JavaScript의 원시 데이터 타입(primitive data type) 중 하나로, ES6(ECMAScript 2015)에서 처음 도입되었습니다. 심볼의 가장 큰 특징은 완전히 고유하다는 것입니다. 즉, 아무리 같은 설명 문자를 넣어도 생성된 심볼은 서로 절대 같지 않습니다.

심볼(Symbol)의 핵심 특징

고유성 보장: Symbol() 팩토리 함수가 호출될 때마다 항상 새롭고 유일한 값을 반환합니다.
원시 데이터 타입: string, number, boolean처럼 원시 타입에 속하며, typeof 연산자로 확인하면 "symbol"이 반환됩니다.
객체 속성 키로 활용: 객체의 속성 이름으로 사용할 수 있어, 키 충돌(name collision)을 방지하는 데 매우 유용합니다.

아래 코드는 JavaScript 심볼을 생성하고 두 심볼을 비교하는 간단한 예제입니다.

예제 코드

<!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;
    }
    .result {
        font-size: 18;
        color: blueviolet;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript symbols</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 심볼을 출력하고 비교합니다</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let sym1 = Symbol("test");
    let sym2 = Symbol("test");
    BtnEle.addEventListener("click", () => {
        console.log(sym1);
        console.log(sym2);
        if (sym1 !== sym2) {
            resEle.innerHTML = "The symbols are not equal";
        }
    });
</script>
</body>
</html>

실행 결과

JavaScript 심볼(Symbol)이란? ES6의 고유한 원시 데이터 타입 쉽게 이해하기

'CLICK HERE' 버튼을 클릭한 후 콘솔에서 출력 결과를 확인해 보면 다음과 같습니다.

JavaScript 심볼(Symbol)이란? ES6의 고유한 원시 데이터 타입 쉽게 이해하기

결과 분석

코드를 살펴보면 sym1과 sym2 모두 동일한 문자열 "test"를 인자로 전달받아 생성되었습니다. 하지만 실행 결과 두 심볼은 서로 같지 않다고(The symbols are not equal) 표시됩니다.

그 이유는 심볼의 설명(description)은 단순히 디버깅용 라벨일 뿐, 실제 값에는 영향을 주지 않기 때문입니다. Symbol("test")를 몇 번을 호출하든 매번 새로운 고유 값이 만들어지므로, sym1 !== sym2 비교는 항상 참이 됩니다.

만약 동일한 심볼을 공유해야 하는 상황이라면, 전역 심볼 레지스트리를 사용하는 Symbol.for() 메서드를 활용할 수 있습니다. 이 경우 같은 키로 등록된 심볼은 재사용됩니다.