#4 심볼

심볼 (Symbol)

자바스크립트에서 객체(Object)의 프로퍼티 키는 보통 문자열로 취급된다.

예를 들어 숫자 1, 불리언 false를 키로 써도 내부적으로는 "1", "false" 같은 문자열 키가 된다.

 

그런데 협업/라이브러리 사용 상황에서 내가 추가하는 키가 기존 키와 충돌하면 문제가 생길 수 있다.

이때 Symbol은 매번 새로 만들어지는 고유한 값이라서, 키 충돌을 원천 차단하는 용도로 쓴다.

---

Symbol 만드는 법: Symbol()

심볼은 객체가 아니라 원시 타입(primitive)이라서 new Symbol()처럼 new키워드를 쓰지 않는다.

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

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

• Symbol('id)의 'id'는 설명(description) 용도이다.
• 설명이 같아도 a 와 b는 서로 다른 고유 값이라 비교 결과가 false가 된다.

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

• 설명 문자열은 이렇게 확인할 수 있다.

---

객체의 숨김 키로 쓰기

심볼을 객체 키로 쓰려면 [id]처럼 대괄호 표기(computed property)를 쓴다.

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

console.log(user[id]); // "myId"

• 문자열 키: user.id / user["id"]
• 심볼 키: user[id] (심볼 변수 자체를 키로 접근)

---

심볼 보는 방법

심볼은 일반적인 열거 방식에서는 심볼 키가 빠진다. (Object.keys, Object.values, Object.entries, for ...in 등)

Object.keys(user); // ['name', 'age']
for (let k in user) {
  console.log(k); // name, age만
}

• 다른 사람이 만든 객체 or 라이브러리에 내가 프로퍼티/메소드를 추가해야 할 때 기존 코드 동작이나 반복문 출력에 영향을 최소화하고 싶을 때 유용하게 사용 가능

const user = { name: 'Mike', age: 30 };

const showName = Symbol('show name');
user[showName] = function () {
  console.log(this.name);
};

// 일반 for...in에서는 showName이 안 보임
for (let key in user) {
  console.log(key); // name, age
}

 

심볼 키까지 전부 보고 싶다면?

• Object.getOwnPropertySymbols(obj): 심볼 키만 가져오기
• Reflect.ownKeys(obj): 문자열 키 + 심볼 키 전부 가져오기

Object.getOwnPropertySymbols(user); // [Symbol(id), ...]
Reflect.ownKeys(user);              // ['name','age', Symbol(id), ...]

---

전역 심볼

• Symbol()은 호출할 때마다 무조건 새 것이 생김
• Stmbol.for("id")는 전역 심볼 레지스트리에서 "id"라는 이름으로 없으면 새로 만들고, 있으면 재사용 함

const a = Symbol.for('id');
const b = Symbol.for('id');

console.log(a === b); // true
console.log(Symbol.keyFor(a)); // "id"

• "같은 이름이면 같은 심볼이어야 한다" 라는 요구가 있을 때 쓰는 방식

---

키워드

Symbol 

: 키 충돌 없이 객체에 안전하게 확장 포인트를 붙이는 방법