모던 자바스크립트 Deep Dive - 33장

심볼(Symbol)이란 ? 

자바스크립트에는 6개의 타입 즉, 문자열, 숫자, 불리언, undefined, null, 객체 타입이 있었다. 
ES6에서 도입된 데이터 타입으로 변경 불가능한 원시 타입 값이다. 유일한 프로퍼티 키를 만들기 위해 사용한다.

 

심벌 값의 생성 

다른 원시값의 값은 리터럴 표기법을 통해 값을 생성할 수 있지만, Symbol은 함수 자체를 호출하여 생성한다. 

이 때 생성되는 심볼 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. 

// Symbol 함수를 호출하여 심벌 값을 생성
const testSymbol = Symbol('심볼');
console.log(typeof testSymbol); // symbol
console.log(testSymbol);        // Symbol(심볼)

const testSymbol1 = Symbol('심볼');
const testSymbol2 = Symbol('심볼');
console.log(testSymbol1 === testSymbol2); // false

// 심볼도 레퍼 객체를 생성한다
console.log(testSymbol.description); // testSymbol
console.log(testSymbol.toString());  // testSymbol(심볼)

const numSymbol = Symbol();

// 심벌 값은 암묵적으로 문자열이나 숫자 타입으로 변환되지 않는다.
console.log(numSymbol + ''); // TypeError: Cannot convert a Symbol value to a string
console.log(+numSymbol);     // TypeError: Cannot convert a Symbol value to a number

1. Symbol 함수를 통한 생성 

2. 심볼은 유일무이한 값이기 때문에 설명이 같더라도 false가 나온다.

3. 심볼도 래퍼 객체를 생성한다. 

4. 래퍼 객체를 생성하지만, 타입이 변환되지는 않는다. 

 

---

.for Method()

- 검색에 성공하면 검색된 심벌 값을 반환

- 검색에 실패하면 인수로 전달된 키로 전역 심벌 레지스트리에 저장한 후, 생성된 심벌 값을 반환한다. 

const s1 = Symbol.for('testSymbol');
const s2 = Symbol.for('testSymbol');

console.log(s1 === s2);

 

Symbol.keyFor Method() 

-  전역 심벌 레지스트리에 저장된 심벌 값의 키를 추출할 수 있다. 

const s1 = Symbol.for('testSymbol');
console.log(Symbol.keyFor(s1)); // testSymbol

const s2 = Symbol('foo');
console.log(Symbol.keyFor(s2)); // -> undefined

---

enum

명명된 숫자 상수의 집합으로 열거형이라고 부르는데, 자바스크립트에서는 enum을 지원하지 않지만 자바스크립트에서 흉내내서 사용하려면 Object.freeze메소드와 심볼 값을 사용한다고 한다. 

const Direction = Object.freeze({
  UP: Symbol('up'),
  DOWN: Symbol('down'),
  LEFT: Symbol('left'),
  RIGHT: Symbol('right')
});

const myDirection = Direction.UP;

if (myDirection === Direction.UP) {
  console.log('You are going UP.');
}

---

심볼과 프로퍼티 키 

심벌 값을 프로퍼티 키로 사용하려면 프로퍼티 키로 사용할 심벌 값에 대괄호를 사용해야 한다. 프로퍼티에 접근할 때도 마찬가지로 대괄호를 사용해야 한다. 심벌 값으로 프로퍼티를 만들면 다른 프로퍼티 키와 충돌하지 않기 때문에 좋다.

const obj = {
  [Symbol.for('mySymbol')]: 1
};

obj[Symbol.for('mySymbol')]; // -> 1

 

 

Well-known Symbol 

자바스크립트가 기본 제공하는 빌트인 심벌 값이 있는데 ECMAScript 사양에서는 Well-known Symbol이라 부른다. Well-known symbol은 자바스크립트 엔진의 내부 알고리즘에 사용된다. for... of문으로 순회 가능한 빌트인 이터러블은 Well-known Symbol인 Symbol.iterator를 키로 갖는 메소드를 가지며, Symbol.iterator 메소드를 호출하면 이터레이터를 반환하도록 ECMAScript 사양에 규정되어 있다. 빌트인 이터러블은 이 규정 즉, 이터레이션 프로토콜을 준수한다.  심볼은 중복되지 않는 상수 값을 생성하는 것은 물론 기존 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해, 즉 하위 호환성을 보장하기 위해 도입되었습니다.

 

 

후기 

 

- 아직까지 코딩을 하면서 써본적이 없는 데이터 타입이다. 

- 책에서는 Symbol에서 메소드를 for(), keyFor()밖에 다루지 않아 몇개 없는줄 알았는데, 꽤 있었다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Symbol - JavaScript | MDN

- enum같이 다른 언어에서 되지만 안되는걸 억지로 되게끔 이것저것 사용하는거 보니 마음이 아팠다. 자바스크립트야.. 일하자

- 확실히 Symbol이 왜 생기게됬는지 알게 되어서 좋은지 알게 되었다.