[JavaScript] 심볼(Symbol)

심볼은 유일한 식별자

const a = Symbol('id'); // new를 붙이지 않는다!
// symbol 생성시 'id'같이 설명을 문자열로 전달 가능.
// 생성에는 아무런 영향이 없다
const b = Symbol('id');

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

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

심볼은 이전 포스팅에서 언급된 Object.keys(), Object.values(), Object.entries(), for...in문 등으로 출력되지 않는다.

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

console.log(Object.keys(user)); // ['name', 'age']
console.log(Object.values(user)); // ['Mike', 30]
for(let a in user) { // name, age
  console.log(user[a]);
}

심볼은 특정 객체에 원본 객체를 건드리지 않는 선에서 값을 추가하고 싶을때 유용하게 사용가능하다

• 유일성을 보장받고,
• 일반적인 순회 출력 옵션에서 출력이 되지 않기 때문

• Symbol.for() : 전역 심볼

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

  • 가끔 전역 변수 처럼 이름이 같으면, 같은 객체를 가르켜야하는 경우가 있음. 이럴 때 사용
  • 없으면 만들고, 있으면 가져오기 때문에 하나의 심볼임을 보장 받음
  • Symbol.keyFor()을 쓰면 심볼의 이름을 알 수 있다
    • 일반적임 심볼은 description을 쓰면 알 수 있다.

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

• 숨겨진 Symbol key 보는 법

  • Object.getOwnPropertySymbols() : 객체의 심볼 출력
  • Reflect.ownKeys() : 객체의 심볼을 포함한 키값 출력

• 사용 예제

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

// 내가 작업
// user.showName = function() {};
const showName = Symbol('show name');
user[showName] = function() {
  console.log('my code. result: ', this.name);
};

user[showName](); // 추가한 함수 실행. 결과 : Mike

// 객체가 선언된 부분과 매우 거리가 멀어 내가 작업할때 인지하기 어렵다고 가정
// 내가 객체에 값을 추가 했어도 여기에 영향이 안가게 하고 싶을 때 심볼 사용
// 다른 개발자가 만들어 놓은 객체에 대한 loop문
for(let key in user) {
  console.log(`His ${key} is ${user[key]}.`)
}

출처 : https://www.youtube.com/watch?v=E9uCNn6BaGQ