javaScript에서의 Symbol이란

자바스크립트 기반의 프로젝트를 진행하면서 String, number, boolean, undefinded, null 등의 값과는 다른

Symbol이라는 타입도 있다는 것을 알게되었습니다. 심볼은 다른 타입과 달리 독특하게 동작하기 때문에  

그와 관련해서 정리를 하기 위한 글입니다.

 

심볼이란?

문서에서는 아래와 같이 정의를 하고 있습니다.

Symbol() 함수는 심볼(symbol) 형식의 값을 반환하는데, 이 심볼은 내장 객체(built-in objects)의 여러 멤버를 가리키는 정적 프로퍼티와 전역 심볼 레지스트리(global symbol registry)를 가리키는 정적 메서드를 가지며, "new Symbol()" 문법을 지원하지 않기 때문에 생성자 어떤 면에서는 불완전한 내장 객체 클래스(built-in object class)와 유사합니다.

하지만 이 내용은 심볼에 대해 무엇을 의미하고 어떻게 사용하는지 이해하기가 어렵습니다. 쉽게 말자자면 심볼은 고유 식별자를 만들기 위해 주로 쓰이며 심볼을 생성할 때 마다 고유한 값을 할당합니다. 아래의 소스코드를 확인해보겠습니다.

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');

console.log(typeof symbol1);
// expected output: "symbol"

console.log(symbol2 === 42);
// expected output: false

console.log(symbol3.toString());
// expected output: "Symbol(foo)"

console.log(Symbol('foo') === Symbol('foo'));
// expected output: false

위에 코드를 봤을 때 같은 값을 넣은 심볼을 비교 했지만 false를 출력합니다. 이와 같이 심볼은 같은 값을 넣어도 항상 고유한 심볼이라는 것을 알 수 있습니다.

전역 Symbol 사용

global symbol registry에 심볼을 할당을 할 수 있으며 Symbol.for()과 Symbol.keyFor()을 사용하여 키를 저장하고 가져올 수 있습니다. 아래의 코드를 보시면 좀 더 쉽게 이해 할 수 있습니다.

const globalSym = Symbol.for('foo);
const globalSymKey = Symbol.keyFor(globalSym);

console.log(globalSymKey); // 'foo'

const localSym = Symbol.for('foo);
const globalSymKeyForLocal = Symbol.keyFor(localSym);

console.log(globalSymKeyForLocal); // undefinded

위의 코드와 같이 Symbol.for()을 통해 global symbol registry에 등록된 값이 아니면 undefinded를 출력합니다.

Symbol 사용법

symbol과 같은 데이터 유형을 사용하는 이유는 고유 식별자로 구별을 사용한다고 앞에서 언급을 했습니다.
그래서 실제 코드에서는 어떻게 동작하는지 알아봅시다.

const ageSym = Symbol();
const nickNameSym = Symbol();

const person = {
    name: 'jone',
  [ageSymbol]:24,
};

person[nickNameSym] = 'rio';

console.log(person[ageSym]); // 24

위 코드와 같이 같은 심볼인데도 불구하고 서로 다른 고유키로 사용가능한 것을 알 수 있습니다.

 

출처

https://levelup.gitconnected.com/everything-you-need-to-know-about-javascript-symbols-24650a163038

Everything you need to know about JavaScript symbols

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