[딥다이브] 33. 7번째 데이터 타입 Symbol

33.1 심벌이란?

다른 값과 중복되지 않는 유일무이한 값(원시 타입)

이름 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용

기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해 도입(하위 호환성 보장)

 

33.2 심벌 값의 생성

1. Symbol 함수

new 연산자 없이 호출

인자로 문자열을 넘겨 설명을 추가할 수 있음. 디버깅 용도로 사용(설명이 같아도 다른 심벌 값을 생성함)

const symbol = Symbol();
console.log(symbol); // Symbol()

const coffee = Symbol('coffee');
console.log(coffee.description); // coffee
console.log(coffee.toString()); // Symbol(coffee)

const coffee2 = Symbol('coffee');
console.log(coffee === coffee2); // false;

심벌 값은 암묵적으로 문자열이나 숫자 타입으로 변환되지 않음

불리언 타입은 암묵적 변환됨

console.log(symbol + ''); // TypeError
console.log(+symbol); // TypeError

console.log(!!symbol); // true

 

2-1. Symbol.for(string)

전역 심벌 레지스트리에서 인수로 전달한 문자열인 키가 존재하는지 검색하여

존재한다면 반환

존재하지 않는다면 해당 키에 새로운 심벌 값을 생성하여 반환

const s1 = Symbol.for('newSymbol'); // newSymbol 생성 후 반환
const s2 = Symbol.for('newSymbol'); // newSymbol 반환
console.log(s1 === s2); // true

 

Symbol 함수로 생성한 심벌은 전역 심벌 레지스트리에 등록되어 관리되지 않음

Symbol.for 메서드를 전역 심벌 레지스트리를 통해 공유할 수 있음

 

2-2. Symbol.keyFor(symbol)

인수로 전달한 심벌 값으로 전역 심벌 레지스트리에 저장된 키를 추출할 수 있음

 

33.3 심벌과 상수

상수 이름만 의미가 있고 값은 의미가 없는 경우 중복될 가능성이 없는 유일무이한 심벌 값 사용

const Direction = {
  up: 1,
  down: 2,
  left: 3,
  right: 4
};

const Direction = {
  up: Symbol('up'),
  down: Symbol('down'),
  left: Symbol('left'),
  right: Symbol('right')
};

 

33.4 심벌과 프로퍼티 키

객체의 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열, 심벌 값

 

심벌 값을 대괄호를 감싸 프로퍼티 키로 사용(할당), 접근

다른 프로퍼티 키와 절대 충돌하지 않음

 

33.5 심벌과 프로퍼티 은닉

for...in문, Object.keys, object.getOwnPropertyNames 메서드로 심벌 값이 프로퍼티인 키를 찾을 수 없음

 

Object.getOwnPropertySymbols(object) 메서드(심벌 값이 프로퍼티인 키들을 배열로 반환)를 사용하면 찾을 수 있음

 

33.6 심벌과 표준 빌트인 객체 확장

표준 빌트인 객체에 사용자 정의 메서드를 직접 추가하는 것은 메서드의 이름이 중복될 수 있기 때문에 권장되지 않음

-> 심벌 값으로 프로퍼티 키를 생성하면 중복될 위험이 사라짐 

 

33.7 Well-known Symbol

= 자바스크립트가 기본 제공하는 심벌 값

 

빌트인 이터러블은 Well-known Symbol인 Symbol.iterator(호출 시 이터레이터 반환)를 키로 갖는 메서드를 가짐

 

빌트인 이터러블이 아닌 일반 객체를 이터러블처럼 구현하고 싶다면 이터러블 프로토콜을 따르면 됨

Symbol.iterator를 키로 갖는 메서드를 객체에 추가하고 이터레이터(next 메서드를 소유)를 반환하도록 구현

const iterableObject = {
  [Symbol.iterator]() {
    let cur = 1;
    const max = 5;
    
    return {
      next () {
        return { value: cur++, done: cur > max + 1 };
      }
    }
  }
}

for (const num of iterableObject) {
  console.log(num); // 1 2 3 4 5
}