Section 9. 자바스크립트 Symbol

다른 값과 절대 중복되지 않는 유일무이한 값을 말한다.

Symbol은 원시 타입이다.

 

I. 기본 생성과 활용

const mySymbol = Symbol();

console.log(typeof mySymbol, mySymbol); //symbol Symbol()

생성자 함수와 다름에 유의해야 한다. new를 붙이지 않는다.

const symbol1 = Symbol('hello');
const symbol2 = Symbol('hello');

console.log(symbol1, symbol2); //Symbol(hello) Symbol(hello)

// 래퍼 객체(Symbol)의 인스턴스 프로퍼티
console.log(symbol1.description, symbol2.description); //hello hello

symbol은 원시타입이다. symbol.description을 했을때처럼 프로퍼티 접근자를 넣었을때 Symbol이 감싸기 때문에 인스턴스 객체로서 값을 반환하게 되는 것이다. 

// ⭐️ 두 심볼은 같지 않다!
console.log(symbol1 === symbol2); //false

두 심볼은 같지 않다는 점을 명심하자.

 

객체에서의 활용은 다음과 같다

객체의 키로 사용시 : [  ,  ] 로 감싼다.

const obj = {
  [Symbol('x')]: 1,
  [Symbol('y')]: 2
}

console.log(obj);

심볼은 유일무이한 값이므로 다음과 같이 출력할 수 없다

// 유일무이한 값이므로 다음과 같이 출력 불가
console.log(
  obj[Symbol('x')],
  obj[Symbol('y')]
); //undefined undefined

외부 접근을 제한할 프로퍼티의 키로 활용된다.

const buildingKey = Symbol('secret');

const building = {
  name: '철권8',
  floors: 3,
  [buildingKey]: '1234#'
}

console.log(building);

여기서 buildingKey 같은 경우 일반적으로 name, floor 처럼은 접근할 수 없다.

buildingKey라는 상수에 심볼이 저장되어 있고 그 값을 이용해야만 접근이 가능한 것을 볼 수 있다.

// 외부로부터의 접근 차단
console.log(
  building[Symbol('secret')]
); //undefined

또한 심볼로 만든 프로퍼티는 아래의 방법들로는 접근되지 않는다.

 

for (key in building) {
  console.log(key);
} //name floors

console.log(
  Object.keys(building),
  Object.values(building),
  Object.entries(building),
  Object.getOwnPropertyNames(building)
);

하지만 프로그램 내부적으로만 쓰는 메서드로는 접근이 가능하다. 

console.log(
  Object.getOwnPropertySymbols(building),
  Object.getOwnPropertySymbols(building)[0],
); //[Symbol(secret)] Symbol(secret)

console.log(
  building[
    Object.getOwnPropertySymbols(building)[0]
  ]
); //1234#

 

 

II. 전역 심볼 레지스트리 global symbol registry

키가 중복되지 않는 심볼들이 저장되는 공간을 말한다.

 

Symbol의 정적 메서드들

for : 주어진 인자로 전역 심볼 레지스트리에 하나의 심볼을 생성 및 반환하는 메서드이다. 

// 전역 심볼 레지스트리에 해당 키로 등록된 키가 없을 시:
// 심볼을 새로 생성
const symbol1 = Symbol.for('hello');

// 전역 심볼 레지스트리에 해당 키가 존재할 시:
// 해당 심볼을 반환
const symbol2 = Symbol.for('hello');

console.log(symbol1 === symbol2); //true

처음에 for를 통해서 hello라는 심볼을 새로 생성했다. 그러면 다음에 symbol2에 다시 hello라는 심볼을 for를 사용해서 생성했을때 이미 전역 심볼 레지스트리에 hello라는 키로 등록된 것이 있으므로 그것을 symbol2에 할당하게 된다. 

따라서 마지막 출력문에서 true가 반환된다. 

const symbol3 = Symbol('hello'); // 전역 심볼 레지스트리에 저장 ❌

console.log(symbol1 === symbol3); //false

for 메서드로 생성되지 않은 심볼과는 다름을 알 수 있다.

 

keyFor : 정적 심볼 레지스트리에 저장된 심볼의 키를 반환하는 메서드

console.log(
  Symbol.keyFor(symbol1),
  Symbol.keyFor(symbol2)
); //hello hello