JavaScript에서 각 객체에 고유한 ID를 만드는 방법

JavaScript에서 각 객체에 고유한 ID를 부여하는 가장 확실한 방법은 Symbol()을 사용하는 것입니다. Symbol은 호출될 때마다 항상 새로운 고유값을 생성하기 때문에, 설명 문자열이 같더라도 두 심볼이 동일해지는 일은 절대 없습니다. 이러한 특성 덕분에 객체의 식별자가 서로 충돌할 걱정 없이 안전하게 ID를 만들 수 있습니다.

아래 예제에서는 두 개의 객체에 각각 Symbol을 이용해 ID를 부여하고, 버튼을 클릭했을 때 두 ID가 실제로 고유한지 비교하여 화면에 결과를 출력합니다.

예제 코드

<!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;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Create a unique ID for each object</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to check if id generated are unique or not</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let obj = {
        id: Symbol("UID"),
        a: 22,
        b: 44,
    };
    let obj1 = {
        id: Symbol("UID"),
        a: 12,
        b: 41,
    };
    BtnEle.addEventListener("click", () => {
        if (obj.id === obj1.id) {
            resEle.innerHTML = "The id generated are not unique <br>";
        }
        else {
            resEle.innerHTML = "The id generated is unique for each object";
        }
    });
</script>
</body>
</html>

출력 결과

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

JavaScript에서 각 객체에 고유한 ID를 만드는 방법

'CLICK HERE' 버튼을 클릭하면 아래와 같이 두 객체의 ID가 서로 고유하다는 메시지가 표시됩니다.

JavaScript에서 각 객체에 고유한 ID를 만드는 방법

동작 원리 정리

Symbol("UID"): 괄호 안의 문자열은 단순한 설명(descriptioin)일 뿐이며, 심볼의 값 자체에는 영향을 주지 않습니다.
고유성 보장: 같은 설명으로 Symbol을 여러 번 생성해도 각 심볼은 항상 서로 다른 값이므로, obj.id === obj1.id 비교는 false를 반환합니다.
활용 사례: 객체 속성 키 충돌 방지, 라이브러리 내부 식별자 관리 등에 유용하게 사용됩니다.