자바스크립트 Symbol

자바스크립트 전체 링크

 

심볼(Symbol)은 유일한 토큰을 나타낼 수 있다.

심볼은 항상 유일하며, 어떤 심볼과도 일치하지 않는다.

 

심볼은 Symbol() 생성자로 만들 수 있다.

const SYMBOL0 = Symbol();
const SYMBOL1 = Symbol("SymBol1");
const SYMBOL2 = Symbol("SymBol1");

console.log(SYMBOL0 === SYMBOL1); // false
console.log(SYMBOL1 === SYMBOL2); // false
console.log(SYMBOL0.description); // undefined
console.log(SYMBOL1.description); // SymBol1
console.log(SYMBOL2.description); // SymBol1

 

Symbol은 new로 생성하지 않는다.

SYMBOL1, 2의 생성자에서 같은 설명을 추가하더라도, SYMBOL1, 2는 실제로 다른 것을 알 수 있다.

즉, 생성자에 추가하는 문자열은 단순히 디버깅을 위한 용도로 사용하는 설명문이다.

 

심볼을 이용하면 객체의 프로퍼티를 유일하게 정의할 수 있다.

 

아래의 코드를 보자.

const Color = {
  RED : "RED",
  BLUE : "BLUE",
}

console.log(Color.RED);
console.log(Color["RED"]); 
console.log(Color[RED]); //error

 

Color의 프로퍼티 RED는 Color.RED나 Color["RED"]로 호출한다.

Color[RED]는 호출이 불가능하며, error를 발생한다.

 

다음과 같이 const RED, BLUE를 모두 "RED"로 선언하면 정상적으로 작동한다.

const RED = "RED";
const BLUE = "RED";

const Color = {
  RED : "RED",
  BLUE : "BLUE",
}

console.log(Color.RED);
console.log(Color["RED"]); 
console.log(Color[RED]);
console.log(Color[BLUE]);

 

문제는 BLUE 라는 키워드로도 Color의 RED에 접근하고 있다.

 

이제 RED를 Symbol로 바꿔보자.

const RED = Symbol();
const BLUE = "RED";

const Color = {
  RED : "RED",
  BLUE : "BLUE",
}

console.log(Color.RED);  // RED
console.log(Color["RED"]);  // RED
console.log(Color[RED]); // undefined
console.log(Color[BLUE]); // RED

Color[RED] = "Symbol Red";
console.log(Color[RED]); // Symbol Red

 

RED는 Symbol로 자바스크립트에서 유일한 토큰을 가진다.

따라서 Color[RED]는 Color["RED"]나 Color.RED와는 다르다.

Color[RED]에 접근하는 유일한 방법은 Symbol로 정의한 RED를 이용하는 것 뿐이다.

 

이미 있는 객체의 프로퍼티 "RED"와 별개로 Symbol의 RED가 유일한 프로퍼티를 만들고 있다.

 

이러한 특성을 이용하면, 협업을 할 때 함수명이 겹쳐서 비정상적인 작동을 할 수 있는 것을

SYMBOL을 이용하여 함수를 정의하면 충돌할 가능성을 없앨 수 있다.