[JavaScript] Symbol

심볼

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

 

실제로 두 변수에 심볼을 저장하고, 서로 일치하는지 일치 연산자를 사용하면 false를 반환합니다.

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

console.log(a == b); // false
console.log(a === b); // false

심볼은 유일성을 보장합니다. 이 심볼은 같은 값을 인자로 변수에 넣더라도 둘은 개별적인 존재로 취급되기 때문입니다.

 

또한, 심볼은 프로퍼티 키로 넣을 수도 있습니다.

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

// { name: "Mike", age: 30, Symbol(id): "myid" }

계산된 프로퍼티를 사용하는 것입니다. 그런데 객체 머서드를 통해 키, 값, 키/값을 뽑아내고자 할 때, 정상적으로 반환되지 않는 것을 볼 수 있습니다. 심볼을 키로 사용하면 사용자에게 직접적으로 보이지 않게 할 수 있습니다.

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

Symbol.for() : 전역 심볼

하나의 심볼만 보장받을 수 있습니다. Symbol.for 메서드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유합니다. 심볼을 전역으로 사용하는 것입니다.

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

id1 === id2; // true

 

 

또한, 변수를 통해 심볼에 사용된 키를 반환받을 수 있습니다. Symbol.keyFor() 메서드를 사용합니다.

Symbol.keyFor(id1) // "id"

keyFor로 생성한 Symbol이 아닐 경우에는 description을 통해 그 값을 찾아낼 수 있습니다.

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

숨겨진 Symbol key 확인

• Object.getOwnPropertySymbols() 를 사용하여 숨겨진 Symbol key를 확인할 수 있습니다.

const id = Symbol('id');

const user = {
  name: "Mike",
  age: 30,
  [id]: "myid",
}

Object.getOwnPropertySymbols(user); // [Symbol(id)]

• 혹은, Reflect.ownKeys() 메서드를 통해서 심볼을 포함한 모든 키를 반환받을 수 있습니다.

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

 

Symbol을 사용하는 이유?

 

다른 사람이 만들어 놓은 객체가 있고, 내가 그 객체를 활용해야 하는 상황이 있다고 해봅시다. 그런데 나는 그 객체에 프로퍼티와 값을 넣어서 사용해야 하는 경우가 있습니다. 하지만, 원본 객체에는 그 프로퍼티가 추가가 되길 원치 않는 경우가 있을 수 있죠.

 

이럴때, 원본 객체에 프로퍼티 키를 보이지 않고 프로퍼티와 값을 저장하여 사용하고 싶을 때 사용하는 것이 Symbol입니다.

 

const myIdol = {
  name: "Le sserafim",
  member: 5,
}

const showName = Symbol("show Name");
myIdol[showName] = function () {
  console.log(this.name);
};

user[showName](); // "Le sserafim"

for (let key in myIdol) {
  console.log(`My Idol's ${key} is ${myIdol[key]}.`);
}
/*
My Idol's name is Le sserafim
My Idol's member is 5
*/