본문 바로가기

언어/JavaScript

[ Javascript ] Symbol 사용하기

반응형

 

 

 

 

🌱 Symbol – 자바스크립트의 고유한 데이터 타입

Symbol은 ECMAScript 2015(ES6)에서 도입된 자바스크립트의 원시 데이터 타입 중 하나입니다. 주로 객체 속성의 키로 사용되며, 고유하고 충돌 없는 식별자를 생성할 때 유용합니다.


 

1. Symbol의 기본 개념

Symbol이란 무엇인가?

  • Symbol절대적으로 유일한 값을 생성합니다.
  • Symbol() 함수를 호출하면 새로운 Symbol 값이 반환됩니다.
  • 같은 설명(description)을 가진 Symbol이라도 서로 다른 값입니다.
const sym1 = Symbol('id');
const sym2 = Symbol('id');

console.log(sym1 === sym2); // false
  • 위 예시에서 sym1sym2는 동일한 설명을 가지고 있지만, 완전히 다른 유일한 값입니다.

 

2. Symbol의 사용 용도

객체 속성의 키로 사용하기

  • Symbol은 객체의 키로 사용될 수 있지만, 일반적인 for...in 반복문이나 Object.keys() 같은 메서드에 노출되지 않습니다.
const USER = Symbol('user');

const obj = {
  [USER]: '홍길동',
  age: 30
};

console.log(obj[USER]); // 홍길동
console.log(Object.keys(obj)); // ['age']
  • 위처럼 Symbol 키는 은닉된 속성을 정의할 때 유용합니다.

 

3. 전역 Symbol 레지스트리

Symbol.for와 Symbol.keyFor

  • Symbol.for(key)전역 Symbol 레지스트리에서 키를 기준으로 공유되는 Symbol을 생성합니다.
  • 동일한 키를 사용하면 항상 같은 Symbol을 반환합니다.
const globalSym1 = Symbol.for('app');
const globalSym2 = Symbol.for('app');

console.log(globalSym1 === globalSym2); // true
  • Symbol.keyFor(symbol)은 해당 Symbol의 키를 반환합니다.
console.log(Symbol.keyFor(globalSym1)); // 'app'

 

4. 심볼의 실용적인 예

예: 사용자 정의 메타데이터 저장

const META = Symbol('meta');

function User(name) {
  this.name = name;
  this[META] = { id: Date.now() };
}

const user1 = new User('Jane');
console.log(user1.name);       // Jane
console.log(user1[META]);      // { id: ... }
  • 이 방법을 사용하면, 외부 코드가 실수로 해당 속성에 접근하거나 덮어쓰는 일을 방지할 수 있습니다.

 

5. 요약

  • Symbol은 고유한 식별자를 생성하는 데 사용됩니다.
  • 객체의 숨겨진 키를 만들거나, 네임스페이스 충돌을 방지하는 데 매우 유용합니다.
  • 전역 공유가 필요할 경우 Symbol.for()를 사용할 수 있습니다.

 

 

반응형