[ES6] Symbol이란 무엇인가?

해당 글은 Javascript Info 글을 재구성한 글입니다. 참고해서 봐주시면 감사하겠습니다.

 

본론

심볼이란?

자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용합니다. 숫자형, 불린형 모두 불가능하고 오직 문자형과 심볼형만 가능하죠. 지금까지는 프로퍼티 키가 문자형인 경우만 살펴보았습니다. 이번 챕터에선 프로퍼티 키로 심볼값을 사용해 보면서, 심볼형 키를 사용할 때의 이점에 대해 살펴보도록 하겠습니다.

'심볼(symbol)'은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용합니다. 심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다릅니다. 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만을 합니다.

let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

문자열과 심볼은 근본이 다르기 때문에 우연히라도 서로의 타입으로 변환돼선 안 됩니다. 자바스크립트에선 '언어 차원의 보호장치(language guard)'를 마련해 심볼형이 다른 형으로 변환되지 않게 막아줍니다.

심볼의 활용

심볼을 이용하면 ‘숨김(hidden)’ 프로퍼티를 만들 수 있습니다. 숨김 프로퍼티는 외부 코드에서 접근이 불가능하고 값도 덮어쓸 수 없는 프로퍼티입니다. 서드파티 코드에서 가지고 온 user라는 객체가 여러 개 있고, user를 이용해 어떤 작업을 해야 하는 상황이라고 가정해 봅시다. user에 식별자를 붙여주도록 합시다. 식별자는 심볼을 이용해 만들도록 하겠습니다.

let user = {
  name: 'lee',
  age: 26,
};

// 위 객체에 새로운 프로퍼티를 추가한다고 가정해보겠습니다. 

let symbolId = Symbol('id');
let user = {
    ..., 
    [symbolId]: 123
}

console.log(user); // {name: 'lee', age: 26, Symbol(id): 123}
console.log(user[id]); // undefined
console.log(user.id); // undefined 
console.log(user[symbolId]); // 123

위의 예처럼, 해당 값은 심볼 값을 통해서만 접근할 수 있습니다.

문자열 "id" 대신 Symbol("id")을 키로 사용한 이유

user는 서드파티 코드에서 가지고 온 객체이므로 함부로 새로운 프로퍼티를 추가할 수 없습니다. 그런데 심볼은 서드파티 코드에서 접근할 수 없기 때문에, 심볼을 사용하면 서드파티 코드가 모르게 user에 식별자를 부여할 수 있습니다.

let user = {
  ...
};

user[Symbol("id")] = 1234
console.log(user) // {name: 'John', age: 30, Symbol(id): 123, Symbol(id): 1234}

또한 심볼은 유일성이 보장되므로 우리가 만든 식별자와 제3의 스크립트에서 만든 식별자가 충돌하지 않습니다. 이름이 같더라도 말이죠. 만약 심볼 대신 문자열 "id"를 사용해 식별자를 만들었다면 충돌이 발생했을 것입니다.

심볼의 특징

1) 심볼은 for…in 에서 배제됩니다. 키가 심볼인 프로퍼티는 for..in 반복문에서 배제됩니다.
2) 심볼은 이름이 같더라도 모두 별개로 취급됩니다. 그런데 이름이 같은 심볼이 같은 개체를 가리키길 원하는 경우도 가끔 있습니다. 애플리케이션 곳곳에서 심볼 "id"를 이용해 특정 프로퍼티에 접근해야 한다고 가정해 봅시다.

참조 사이트

https://ko.javascript.info/symbol