[JavaScript] 심볼(Symbol)

심볼이란

자바스크립트에서 심볼은 유일한 식별자를 만들기 위한 원시형입니다. 객체의 프로퍼티 키로 사용할 때, 일반 문자열과 달리 다른 코드나 라이브러리와 접근 및 재정의를 효과적으로 제어할 수 있습니다.

동일한 설명을 가진 심볼을 여러 개 생성하더라도 각 심볼은 서로 다릅니다.

// 새로운 심볼 생성
const symA = Symbol("identifier");
const symB = Symbol("identifier");

console.log(symA === symB); // false 서로 다른 심볼입니다.

심볼의 특징

암묵적 형변환 방지

심볼은 자동으로 문자열이나 숫자 등 다른 원시형으로 형변환되지 않습니다.

const sym = Symbol("id");
// alert(sym); // TypeError: Cannot convert a Symbol value to a string

출력이 필요한 경우에는 명시적으로 변환해야 합니다.

console.log(sym.toString());      // "Symbol(id)"
console.log(sym.description);     // "id"

숨겨진 프로퍼티

심볼을 객체의 프로퍼티 키로 사용하면, 해당 프로퍼티는 일반적인 열거(for...in,Object,keys)에서 노출되지 않습니다.

이를 통해 외부 코드에 노출하지 않고 안전하게 데이터를 저장할 수 있습니다.

const settings = {
  theme: "dark",
  fontSize: 14,
};

// 심볼을 사용하여 숨겨진 설정값 추가
const hiddenSetting = Symbol("hiddenSetting");
settings[hiddenSetting] = "adminOnly";

// 일반적인 방법으로는 숨겨진 설정값에 접근할 수 없음
console.log(settings.theme);       // "dark"
console.log(settings.fontSize);    // 14
console.log(settings[hiddenSetting]); // "adminOnly" (심볼로 직접 접근)

// for...in 반복문이나 Object.keys에서는 심볼 프로퍼티가 보이지 않음
for (let key in settings) {
  console.log(key); // "theme", "fontSize"만 출력됨
}

console.log(Object.keys(settings)); // [ "theme", "fontSize" ]

Object.assign과 같이 객체를 복사하는 메서드는 심볼 프로퍼티도 함께 복사합니다.

const clone = Object.assign({}, settings)
console.log(clone[hiddenSetting]) // "adminOnly"

전역 심볼

심볼은 기본적으로 호출할 때마다 새 값을 생성하지만, 동일한 심볼을 공유할 경우가 있습니다. 이를 위해 전역 심볼 레지스트리가 존재하며, Symbol.for(key)를 사용하여 같은 키에 대한 항상 동일한 심볼을 반환받을 수 있습니다.

// 전역 심볼 생성 또는 검색
const globalSym1 = Symbol.for("app.id");
const globalSym2 = Symbol.for("app.id");

console.log(globalSym1 === globalSym2); // true, 전역 레지스트리 덕분에 같은 심볼입니다.

전역 심볼의 키를 얻고자 할때는 Symbol.keyFor(sym)을 사용합니다.

console.log(Symbol.keyFor(globalSym1)); // "app.id"

// 로컬 심볼은 전역 레지스트리에 등록되지 않으므로 undefined를 반환합니다.
const localSym = Symbol("app.id");
console.log(Symbol.keyFor(localSym));   // undefined

심볼을 객체 리터럴에 활용

객체 리터럴 내부에 심볼 키를 직접 사용하려면 대괄호 표기법을 사용해야 합니다.

// 심볼을 사용하여 내부 상태를 나타내는 프로퍼티 생성
const internalState = Symbol("internalState");

const counter = {
  count: 0,
  [internalState]: "활성화됨", // 내부 상태를 심볼로 저장

  increment() {
    this.count++;
    console.log(`카운트 증가: ${this.count}, 상태: ${this[internalState]}`);
  },

  reset() {
    this.count = 0;
    this[internalState] = "초기화됨";
    console.log(`카운트 초기화: ${this.count}, 상태: ${this[internalState]}`);
  },
};

// 일반적인 프로퍼티 접근
console.log(counter.count); // 0
counter.increment(); // 카운트 증가: 1, 상태: 활성화됨
counter.increment(); // 카운트 증가: 2, 상태: 활성화됨

// 심볼로 내부 상태 접근
console.log(counter[internalState]); // "활성화됨"

// 초기화 후 상태 확인
counter.reset(); // 카운트 초기화: 0, 상태: 초기화됨
console.log(counter[internalState]); // "초기화됨"

시스템 심볼

자바스크립트는 내장 동작을 커스터마이징할 수 있도록 몇 가지 시스템 심볼을 제공합니다. 예를 들어, Symbol.iterator를 통해 객체가 반복 가능한 인터페이스를 제공합니다.