자바스크립트에 7번째 원시형 타입이 있다던데(Symbol)

TLDR;

심볼은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 다른 값과 중복되지 않는 유일무이한 값으로, 이름 충돌이 없는 유일한 프로퍼티 키를 만들기 위해심볼은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 다른 값과 중복되지 않는 유일무이한 값으로, 이름 충돌이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다.

심볼 사용법

Symbol 생성

• Symbol 함수를 호출하여 생성
• ( )괄호 안의 문자열은 디버깅 용도로만 사용되는 심벌값에 대한 설명임
• 아무리 같은 이름으로 많이 만들어도 절대 같은게 만들어지지 않음(심벌은 유일무이한 값)

const mySymbol = Symbol();      //  Symbol 함수 호출하면 된다.
const mySymbol2 = Symbol('mySymbol2'); // 디버깅 용도로 사용되는 심벌값에 대한 설명
const mySymbol3 = Symbol('mySymbol2');
const mySymbol4 = Symbol(); 

console.log(mySymbol == mySymbol4); // false

전역 Symbol 생성

심볼은 모두 이름이 같더라도 모두 별개로 취급된다. 그러면, 이름이 같은 심볼이 같은 개체를 가리키도록 하고 앂을 때에는 어떻게 해야하나? 예를 들어, 애플리케이션 곳곳에 심볼 "id"를 이용해 특정 프로퍼티에 접근해야한다면?

 

이럴 때를 위해 만들어진 것이 전역 심벌 레지스트리인데, 전역 심벌 레지스트리 안에 심볼을 만들고 해당 심볼에 접근하면, 이름이 같은 경우 항상 동일한 심볼을 반환해준다.

 

Symbol.for
인수로 전달받은 문자열을 키로 사용하여 키와 심벌 값의 쌍들이 저장되어 있는 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌 값을 검색 없으면 새로 등록, 있으면 기존 값을 읽어옴

const s1 = Symbol.for('id');     // 기존에 전역 심벌 레지스트리에 'id'란 키로 저장된 애 없으면 새로 생성

const s2 = Symbol.for('id');     // 기존에 만들어져 있는 'id'란 키로 된 심벌 값 반환

// 확인!
console.log(s1 === s2);  //true

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

const s1 = Symbol.for('id');  

Symbol.keyFor(s1);     // 'id'

심벌 프로퍼티 객체 키로 사용하기

• 대괄호를 이용하여 생성 및 사용한다.

  const obj = {
    [Symbol.for('mySymbol')] : 1,  // 대괄호 사용하여 생성
  }
  
  obj[Symbol.for('mySymbol')]; // 마찬가지로 대괄호로 생성. 동적으로 생성
  
  const id = Symbol('id');
  obj[id] = 123;
  console.log(obj); // { Symbol(mySymbol) : 1, Symbol(id) : 123 }

 

프로퍼티를 완전히 숨길 수 있는 것은 아니고, Object.getOwnPropertySymbols메소드를 사용하면 심벌 값을 프로퍼티 키로 사용하여 생성한 프로퍼티를 찾을 수 있다.

const obj = 1 {
    // 심벌 값으로 프로퍼티 키를 생성
    [Symbol('mySymbol')] : 1
};

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

const symbolKey = Object.getOwnPropertySymbols(obj)[0];
console.log(obj[symbolKey]);  // 1

Well-known Symbol

자바스크립트가 기본 제공하는 빌트인 심벌 값이 있다.

• Symbol.hasInstance
• Symbol.isConcatSpreadable
• Symbol.iterator
• Symbol.toPrimitive
• 기타 등등

 

참고

• https://ko.javascript.info/symbol
• 자바스크립트 딥다이브 사용된다.