Symbol

Symbol

1997년 자바스크립트가 ECMAScript로 처음 표준화횐 이래로 JS는 6개의 타입(자료형)을 가지고 있다.

● 기본 자료형 : Boolean, null, undefined, Number, String

● 객체형 : Object

Symbol은 ES6에서 새롭게 추가된 7번째 타입이라고 할 수 있다.

Symbol은 애플리케이션 전체에서 유일하며 변경 불가능한 기본 자료형 값이며 주로 객체의 프로퍼티 키로 사용한다.

---

#1 Symbol 생성

Symbol은 Symbol() 함수로 생성한다.

이때 생성된 Symbol은 객체가 아니라 값이다.

let mySymbol = Symbol();

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

Symbol() 함수는 String(), Number(), Boolean()과 같이 래퍼 객체를 생성하는 생성자 함수와는 달리 new 키워드를 사용하지 않는다.

new Symbol(); // TypeError: Symbol is not constructor

또한 Symbol은 위에서 말했듯이 변경 불가능한 기본 자료형이다.

let mySymbol = Symbol();

console.log(mySymbol + 's'); // TypeError: Cannot convert a Symbol value to a string

Symbol() 함수는 인자로 문자열을 전달할 수 있으며 이 문자열은 Symbol 생성에 어떠한 영향도 주지 않는다.

다만, 생성된 Symbol에 대한 설명(description)으로 디버깅 용도로만 사용된다.

let symbolWithDesc = Symbol('world');

console.log(symbolWithDesc); // Symbol(world)
console.log(typeof symbolWithDesc); // symbol

Symbol() 함수가 생성한 Symbol 값은 애플리케이션 전체에서 유일하다.

let mySymbol = Symbol('world');

console.log(mySymbol === Symbol('world')); // false

---

#2 Symbol 사용

이제 Symbol의 사용에 대해서 알아봅시다.

Symbol은 객체의 프로퍼티 키는 빈 문자열을 포함하는 문자열과 숫자로 만들 수 있다.

const obj = {};
obj.prop = 'myProp';
obj[123] = 123; // N6 : obj.123 = 123;
obj['prop' + 123] = false;
console.log(obj); // { '123': 123, prop: 'myProp', prop123: false }

Symbol 값도 객체의 프로퍼티로 사용할 수 있다고 언급 했다.

Symbol 값은 애플리케이션 전체에서 유일한 값이므로 Symbol 값을 키로 갖는 프로퍼티는 다른 어떠한 프로퍼티와도 충돌하지 않는다.

const obj = {};
const mySymbol = Symbol('mySymbol');
obj[mySymbol] = 123;

console.log(obj); // { [Symbol(mySymbol)]: 123 }
console.log(obj[mySymbol]); // 123

---

#3 Symbol 객체

Symbol() 함수로 Symbol 값을 생성할 수 있었는데 이것은 Symbol이 함수 객체라는 의미다.

브라우저 콘솔에서 Symbol을 참조해보자.

위 참조 결과에서 알 수 있듯이 Symbol 객체는 프로퍼티와 메소드를 갖고 있다.

Symbol 객체의 프로퍼티 중 length와 prototype을 제외한 프로퍼티를 'Well-Known Symbol'이라 부른다.

[ Symbol.iterator ]

앞에서 언급한 Well-Known Symbol은 자바스크립트 엔진에 상수로 존재하며 자바스크립트 엔진은 이를 참조하여 일정한 처리를 한다.

예를 들어 어떤 객체가 Symbol.iterator를 프로퍼티 키로 사용한 메소드를 갖고 있으면 자바스크립트 엔진은 이 객체가 이터레이션 프로토콜을 따르는 것으로 간주하고 이터레이터로 동작하게 한다.

Symbol.iterator를 프로퍼티 키로 사용해 메소드를 구현하고 있는 빌트인 객체는 아래와 같다.

아래 객체들은 이터레이션 프로토콜을 준수하고 있으며 이러테이터를 반환한다.

< Symbol.iterator를 프로퍼티 키로 사용하여 메소드를 구현하고 있는 빌트인 객체(이터러블) >
* Array : Array.prototype[Symbol.iterator]

* String : String,prototype[Symbol.iterator]

* Map : Map.prototype[Symbol.iterator]

* Set : Set.prototype[Symbol.iterator]

* DOM data structures : NodeList.prototype[Symbol.iterator]
                        HTMLCollection.prototype[Symbol.iterator]

* arguments : arguments[Symbol.iterator]

[ Symbol.for ]

Symbol.for 메소드는 인자로 전달받은 프로퍼티 키를 통해 Symbol 레지스트리(Symbol 들의 리스트)에 존재하는 Symbol을 검색한다.

검색에 성공하면 Symbol을 반환하고, 실패하면 새로운 Symbol을 생성한다.

// 새로운 전역 Symbol 생성
const s1 = Symbol.for('lee');

// Symbol 레지스트리에서 이미 만들어진 Symbol 검색
const s2 = Symbol.for('lee');
console.log(s1 === s2); // true

Symbol() 함수는 매번 다른 Symbol 값을 생성하는 것에 반해, Symbol.for는 단 하나의 Symbol을 생성하여 여러 모듈이 공유한다.