[JavaScript] 심볼(Symbol)

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

지금까지 객체의 프로퍼티 키는 문자형으로 만들었다. 

1이나 boolean형으로 만들어도 Object.keys(obj);로 확인해보면

["1", "false"] 문자형으로 반환되는 것을 알 수 있다.

 

문자형과 더불어 가능한 것이 심볼(Symbol)형이다.

심볼은 아래와 같이 만들어진다.

const a = Symbol(); // *new를 붙이지 않는다.

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

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

console.log(a); //Symbol()
console.log(b); //Symbol()

const b로 심볼을 선언하면 생긴거는 동일해보여도 

a === b; a==b; 일치 연산자와 동등연산자로 확인해보면 false가 나온다.

 

심볼은 유일성이 보장된다. 전체 코드에서 단 하나라는 것이다.

const id = Symbol('id'); // 설명을 붙일 수 있다.

심볼을 생성할 때 설명을 붙일 수 있고, 이는 디버깅할때 편리하다.

설명은 문자열로 붙여주면 되고 문자열은 심볼 생성에 어떠한 영향을 미치지 않는다.

 

설명이 동일한 심볼을 생성하면 어떻게 될까?

const id = Symbol('id');
const id2 = Symbol('id');

console.log(id);  // Symbol(id)
console.log(id2); // Symbol(id)

이 경우에도 id === id2  id==id2 일치 연산자와 동등연산자로 확인해보면 false가 나온다.

 

심볼을 객체의 키로 사용해보자.

const id = Symbol('id'); //id로 심볼 생성
const user = {
  name : 'Mike',
  age : 30,
  [id] : 'myid' // computed property키
}

console.log(user);
// {name: "Mike", age: 30, Symbol(id): "myid"}

Object.keys(user);
//["name", "age"] 

Object.values(user);
//["Mike", 30]

Object.entries(user);
//[Array(2), Array(2)]

심볼을 생성하고 이를 computed property키로 넣어 객체에 사용해보자. 

user를 console.log()메소드로 찍어보면 심볼로 만든 property키가 존재하는 것을 볼 수 있다.

 

하지만 Object.keys(), Object.values(), Object.entries()메소드들은 키가 심볼형인 property는 건너뛴다.

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

특정 객체의 원본 데이터를 건드리지 않고 속성을 추가 할 수 있다.

 

만약 심볼이 아니라면,

원본 객체가  Object.keys()나 for in으로 순회하면서 데이터를 사용할 수도 있고,

내가 추가한 property가 어디서 어떻게 튀어나올 지 예측할 수도 없다.

 

//다른 개발자가 만들어 놓은 객체
const user = {
  name : 'Mike',
  age : 30
}

//내가 만든 속성
user.showName = function(){}; 

// 사용자가 접속하면 보는 메시지
for (let key in user) {
  console.log(`His ${key} is ${user[key]}.`);
}

//사용자가 접속하면 보는 메시지
// His showName is function(){}.

다른 개발자가 만들어 놓은 객체에 내가 속성을 새로 만들어 추가한다면 

사용자가 접속했을 때, 이상한 메시지를 볼 것이다.

 

//다른 개발자가 만들어 놓은 객체
const user = {
  name : 'Mike',
  age : 30
}

//내가 만든 속성
//user.showName = function(){}; 
const showName = Symbol('show name');
user[showName] = function(){
  console.log(this.name);
}; 

// 사용자가 접속하면 보는 메시지
for (let key in user) {
  console.log(`His ${key} is ${user[key]}.`);
}

//사용자가 접속하면 보는 메시지
// His name is Mike.
// His age is 30.

이럴 때, 심볼을 생성하고 메소드를 실행하면 다른 개발자가 만든 코드에도 영향을 미치지 않고 제대로 동작한다.

 

 

Symbol.for() : 전역 심볼

1. 하나의 심볼만 보장받을 수 있다. (없으면 만들고, 있으면 가져오기 때문)

2. Symbol 함수는 매번 다른 Symbol 값을 생성하지만, 

   Symbol.for() 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유한다.

 

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

 

위에서 Symbol()메소드처럼 Symbol.for()메소드를 id1와 id2에 넣어주고

id=== id2   id==id2 일치 연산자와 동등연산자로 확인해보면 Symbol()메소드와 달리 true가 나온다.

 

Symbol.keyFor()

Symbol.keyFor(id1); // "id"

이름을 얻고 싶다면 Symbol.keyFor()를 이용하면 된다. 변수를 넣어주면 생성시 적어주었던 이름을 알 수 있다.

 

description

const id = Symbol('id 입니다');
id.description; // "id 입니다"

전역심볼이 아닌 심볼은  Symbol.keyFor()를 사용할 수 없다. 

대신, descroption으로 이름을 알 수 있다.

 

 

숨겨진 Symbol Key 보는 법 - Object.getOwnPropertySymbols(), Reflect.ownKeys()

const id = Symbol('id');

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

Reflect.ownKeys(user);
//["name", "age", Symbol(id)]

Object.getOwnPropertySymbols() : 심볼만 볼 수 있다.
Reflect.ownKeys() : 심볼형 키를 포함한 객체의 모든 키를 볼 수 있다.

 

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

그러니 걱정말고 유일한 프로퍼티를 추가하고 싶을 때 심볼을 사용하면 된다.