[JavaScript Core] 심볼형(Symbol) 에 대해 알아보자

이번 글에서는 심볼형(Symbol) 에 대해 알아보도록 하겠습니다.

심볼을 사용하면 재미있는 것들을 할 수 있는데, 특히 객체에 값을 추가하는 부분에 있어서 독보적인 역할을 하기 때문에, 글을 끝까지 보시고 완벽하게 익히셔서 응용해보셨으면 좋겠습니다!

1. 심볼형(Symbol)

let sb1 = Symbol();
let sb2 = Symbol("id");
let sb3 = Symbol("id");

console.log(sb2 == sb3); // false

먼저, 심볼형은 Symbol() 을 통해 만들 수 있습니다.

인자값 없이 그냥 만들수도 있고, Symbol("id") 와 같이 이름을 지정할수도 있습니다.

그러나 서로 다른 변수에 이름이 같은 심볼형이 선언된다고 해도, 두 심볼형은 서로 달라서 비교 연산자를 통해 비교해보면 false 가 나옵니다.

따라서, 심볼형은 그 자체로 독립적이고 독자적인 성격을 갖습니다.

2. 심볼형의 응용

let key = Symbol("age");
let obj = {
    name : "moonsung",
    [key] : 17
}

console.log(obj[key]); // 17

심볼형은 위와 같이 객체의 키(key) 로 사용될 수 있습니다.

위에서 알아본 것과 같이 심볼형은 독자적인 성격을 갖기 때문에, 객체의 키가 심볼형인 값은 오직 그 심볼형으로만 접근할 수 있습니다.

따라서, for...in 에서도 심볼형의 키는 배제됩니다.

어떠한 프로퍼티나 메소드를 숨기고, 특정 심볼형으로만 부분적으로 접근하고 싶을 때, 사용하면 좋을 것 같습니다.

3. 심볼형 더 알아보기

처음 심볼형에 대해 설명했을 때, 이름이 같은 심볼형이 각각 선언되어도 둘의 심볼형은 다르게 인식된다고 했습니다.

그러나, 이름이 같을 경우에는 같게끔 하고 싶을수도 있죠.

let sb1 = Symbol.for("id");
let sb2 = Symbol.for("id");

console.log(sb1 == sb2); // true

그럴 때에는, 위와 같이 Symbol.for 메소드를 이용하면 됩니다.

Symbol.for 메소드는 인자로 들어온 이름을 전역 심볼 레지스트리(global symbol registry) 에서 찾고, 해당하는 심볼형이 있다면 그것을 가져오고, 없으면 인자로 들어온 이름으로 전역 심볼 레지스트리 안에 심볼형을 새로 선언합니다.

따라서, sb1 과 sb2 는 같은 심볼형이 되는 것이죠.

let sb1 = Symbol.for("id");
let sb2 = Symbol("id");

console.log(Symbol.keyFor(sb1)); // id
console.log(Symbol.keyFor(sb2)); // undefined

위와 반대로, 심볼에서 이름을 가져오고 싶으면 Symbol.keyFor 메소드를 사용하면 됩니다.

다만, Symbol.keyFor 메소드는 전역 심볼 레지스트리에 있는 심볼형을 검색하여 이름을 반환해주기 때문에, 그냥 Symbol() 을 통해 선언된 심볼형은 이름을 찾지 못합니다.

그럴땐 Symbol("id").description 을 이용하면 이름인 id 를 얻을 수 있을 것입니다.



이렇게 심볼형에 대해서 다뤄보았는데, 앞으로 자바스크립트 문법을 정리해 나가면서 또 나올 수 있는 부분이니 잘 기억해둬야 할 것 같습니다.

여러분들도 완벽히 익히셔서 응용해보시길 바라고, 다음 글도 많은 관심 부탁드립니다!