Javascript Symbol 이란?

Symbol 이란?

심볼은 변경 불가능한 원시 타입의 값이며, 다른 값과 중복되지 않는 고유한 값이다.

심볼 값은 충돌 위험이 없는 오브젝트의 유일한 프로퍼티 키를 만들기 위해서 사용할 수 있다.

하위호환성을 유지하면서 표준을 확장한다든지, 고유한 상수값을 만드는 데 사용할 수 있다.

Symbol() 함수는 심볼(symbol) 형식의 값을 반환하는데, 아로부터 반환되는 모든 심볼 값은 고유하다.

 

Symbol 함수

- Symbol()

- Symbol.for()

- Symbol.keyFor()

 

Symbol은 2가지의 방법으로 만들 수 있다.

const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol.for('mySymbol');

단순 Symbol()은 고유한 값들만 만들어낸다.

const mySymbol1 = Symbol('mySymbol'); // Symbol(mySymbol)
const mySymbol2 = Symbol('mySymbol'); // Symbol(mySymbol)
const mySymbol3 = Symbol('mySymbol'); // Symbol(mySymbol)

console.log(mySymbol1 === mySymbol2); // false
console.log(mySymbol2 === mySymbol3); // false
console.log(mySymbol3 === mySymbol1); // false

전역 Symbol 레지스트리 내에서 Symbol을 공유하여 사용하는 경우가 있다. 바로 Symbol.for이다.

Symbol.for은 해당 Symbol이 Symbol 레지스트리에 없으면 새롭게 만들고, 있다면 해당 Symbol을 가져온다.

const mySymbol1 = Symbol.for('mySymbol'); // Symbol(mySymbol)
const mySymbol2 = Symbol.for('mySymbol'); // Symbol(mySymbol)
const mySymbol3 = Symbol.for('mySymbol'); // Symbol(mySymbol)

console.log(mySymbol1 === mySymbol2); // true
console.log(mySymbol2 === mySymbol3); // true
console.log(mySymbol3 === mySymbol1); // true

for을 통해 전역 Symbol 레지스트리에 생성된다고 하더라도 for을 통해 만들지 않은 것이라면 다른 Symbol이라는 것은 명심해야한다.

즉, 전역 Symbol 레지스트리에 생성된 것과 단순 Symbol로 생성된 것이 다르다는 것이다.

const mySymbol1 = Symbol.for('mySymbol'); // Symbol(mySymbol)
const mySymbol2 = Symbol.for('mySymbol'); // Symbol(mySymbol)
const mySymbol3 = Symbol('mySymbol'); // Symbol(mySymbol)

console.log(mySymbol1 === mySymbol2); // true
console.log(mySymbol2 === mySymbol3); // false
console.log(mySymbol3 === mySymbol1); // false

 

전역 Symbol 레지스트리로부터 주어진 Symbol 대한 공유 Symbol key를 추출하기 위해서는 keyFor 메서드가 있다.

const mySymbol1 = Symbol.for('mySymbol'); // Symbol(mySymbol)
console.log(Symbol.keyFor(mySymbol1)); // mySymbol

const mySymbol2 = Symbol('mySymbol'); // Symbol(mySymbol)
console.log(Symbol.keyFor(mySymbol2)); // undefined

keyFor은 위에서 나온 것 처럼 전역 Symbol 레지스트리로부터 key값을 추출하기 때문에 Symbol.for을 통해 생성된 경우에만 key값을 가져오고 Symbol함수를 통해 생성된 경우에는 어떤 key값도 가져오지 못한다.

 

Symbol 활용예제

심볼 값을 프로퍼티 키로 사용하면 for ... in이나 Object.keys, Object.getOwnPropertyNames와 같은 메서드로는 확인할 수 없다.

즉, 프로퍼티가 외부로 노출되지 않는 은닉이 되는 것이다.

const obj = {
	key1: 1,
    key2: 2,
    key3: 3,
  	[Symbol.for('mySymbol')]: 'mySymbol',
};

console.log(Object.getOwnPropertyNames(obj)); // ["key1", "key2", "key3"]
console.log(Object.keys(obj)); // ["key1", "key2", "key3"]
console.log(Object.values(obj)); // [1, 2, 3]

console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(mySymbol)]

이와 같이 활용되는 대표적인 예가 바로 Symbol.iterator, Symbol.hasInstance, Symbol.match 등과 같은 Symbol들이다.