[JavaScript] Symbol

지금까지 property key는 모두 문자형으로 만들었다.

const obj = {     1 : '1입니다.',     false : '거짓' }

숫자형이나 불린형으로 만들어도 Object.keys(obj)를 가져오게 되면 키 값을 ["1", "false"] 이렇게 문자열로 가져왔다.

 

실제 키 값으로 접근할 때도 obj ['1'] , obj ['false'] 이렇게 문자열로 접근할 수 있었다.

 

이렇게 객체 프로퍼티 키는 문자형으로 가능한데 하나 더 가능한 형이 있다.

 

바로 

Symbol 형이다.

 

const a = Symbol();

심볼은 위와 같은 형태로 만들어주며, new 연산자를 붙이지 않는다.

 

심볼은 유일한 식별자를 만들 때 사용한다.

 

const a = Symbol(); const b = Symbol();

이렇게 똑같은 형태로 a와 b 를 만들어줘도 a와 b를 일치 연산자(a === b)로 확인해보면 같지 않다고 나온다.

 

Symbol형은 유일성이 보장되기 때문이다.

Symbol을 만들 때 설명을 붙여줄 수도 있다.

 

const a = Symbol('id');

설명을 붙여주면 디버깅할 때 편하지만, 심볼에 직접적으로 영향을 주지 않는다.

 

 

맨 처음 심볼을 설명하면서 프로퍼티 키로도 사용할 수 있다고 했으니 사용해보도록 하자.

const id = Symbol('id'); const user = {     name : 'Mike',     age : 30,     [id] : 'myid'  // Computed property }

이렇게 사용 후 user를 찍어보면 { name : "Mike" , age: 30, Symbol(id) : "myid" }

 

심볼로 만든 id가 잘 나오고 user[id]를 찍어봐도  "myid"라고 잘 나오는 것을 볼 수 있다.

 

그런데 여기서 앞서 배웠던 Object Method를 사용하면 어떻게 될까?

Object.keys(user);  // ["name", "age"] Object.values(user);  // ["Mike", 30] Object.entries(user);   // [Array(2), Array(2)]

심볼만 건너뛰고 반환하는 것을 볼 수 있다.

 

 

그렇다면 이렇게 숨겨져 있는 심볼은 어디에 사용할 수 있을까??

 

어떤 작업을 할 때 원본 데이터에 값을 수정하거나 삭제하면 아주 큰일이 날 수 있기 때문에 원본 데이터를 건드리지 않아야 하는데 심볼을 사용하면 특정 데이터의 원본 데이터를 건드리지 않고 속성을 추가할 수 있게 해준다.

 

 

심볼은 이름을 같게 만들더라도 모두 다른 존재이다. 그런데 가끔 전역 변수처럼 이름이 같으면 같은 객체를 가르켜야 할 때가 있다.

 

이때 Symbol.for( )을 사용해준다.

 

Symbol.for( ) 를 사용하면 하나의 심볼만 보장받을 수 있다.

없으면 만들고, 있으면 가져오기 때문이다.

Symbol 함수는 매번 다른 Symbol 값을 생성하지만 Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 심볼을 공유할 수 있다.

const id1 = Symbol.for('id'); const id2 = Symbol.for('id'); id1 === id2;   // true

for를 사용하지 않았다면 id1과 id2는 같은 심볼을 사용했더라도 고유한 값이기 때문에 같지 않았겠지만,Symbol.for( )를 사용하면 키를 통해 같은 심볼을 공유하기 때문에 같다는 결과가 나오는 것이다.이것을 전역 심볼이라고 해준다.

 

 

전역 심볼의 이름을 알고 싶다면 Symbol.keyFor( )을 사용해주면 된다.

 

Symbol.keyFor(id1)을 한다면 id1을 만들 때 적었던 설명인 'id'를 가져오는 것이다.

하지만 전역 심볼이 아닌 심볼은 keyFor을 사용할 수 없다.

 

그냥 심볼일 때는 description을 사용하여 그 이름을 가져온다.

const id3 = Symbol('id3 입니다.'); id1.description();  // 'id3 입니다.'

 

 

 

앞서 심볼은 숨겨져 있어서 앞장에 배웠던 객체 메소드를 사용해서 key를 볼 수 없다고 했다.

하지만 아래의 메소드를 사용하면 객체의 Symbol key를 확인할 수 있다.

const user = {     name : 'Mike',     age : 30,     [id] : 'myid' } Object.getOwnPropertySymbols(user);  // [Symbol(id)] Reflect.ownKeys(user); // ["name", "age", Symbol(id)]

getOwnPropertySymbols를 사용하면 심볼의 키만 볼 수 있고, Reflect.ownKeys를 사용하면 심볼을 포함한 모든 프로퍼티의 key 값을 볼 수 있다.

 

하지만 대부분의 라이브러리, 내장 함수들은 이런 메소드를 사용하지 않는다.

 

 

 

때문에 유일한 프로퍼티를 사용하고 싶을 때는 그냥 Symbol을 사용하면 된다 ! !

 

 

 

 

 

 

 

 

 

 

* 본 포스팅은 코딩앙마님의 자바스크립트 중급 강좌를 기반으로 작성한 글입니다.