B17 : 심볼(Symbol) 타입

목차

1. 심볼형 (Symbol Type)

2. 전역 심볼

    2-1. Symbol.for(key)

    2-2. Symbol.forKey(sym)

3. 시스템 심볼

4. 어떤 상황에서 사용할까

---

1. 심볼형 (Symbol Type)

심볼은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다.

// id는 심볼
let id = Symbol();

// 심볼 id에는 "id"라는 설명이 붙음
let id = Symbol("id");

// 심볼은 유일성이 보장되기 때문에 설명이 동일해도 각 심볼값은 다르다
let id1 = Symbol("id");
let id2 = Symbol("id");
alert(id1 == id2);	// false

 

같은 block-scope 내에서 같은 이름의 심볼을 사용할 수 없다.

 

 

심볼의 특징이 몇 개 있다.

• 다른 타입으로 자동 형 변환되지 않는다. (language guard가 지켜줌)
• 객체 리터럴 {...}로 객체를 만든 경우, 대괄호를 사용해 심볼형 키를 만들어야 한다.
  let user = { name: "John", [id]: 123 };
• 키가 심볼인 프로퍼티는 for...in 반복문에서 배제된다.
• Object.keys(user)에서도 키가 심볼인 프로퍼티는 배제된다
• 하지만 Object.assign은 객체 내 모든 프로퍼티를 복사한다.

---

2. 전역 심볼

심볼은 이름이 같아도 모두 별개로 취급되지만,

이름이 같은 심볼이 같은 개체를 가리키길 원하는 경우도 있다.

이런 경우에 전역 심볼 레지스트리(global symbol registry)를 사용한다.

전역 심볼 레지스트리 안에 심볼을 만들고 해당 심볼에 접근하면, 아름이 같은 경우 항상 동일한 심볼을 반환해준다.

 

1. Symbol.for(key)

레지스트리 안에 있는 심볼을 읽거나, 새로운 심볼을 생성하려면 Symbol.for(key)를 사용한다.

이 메서드를 호출하면 이름이 key인 심볼을 반환하며,

조건에 맞는 심볼이 레지스트리에 없으면 새로운 심볼 Symbol(key)를 만들어 저장한다.

// 심볼 읽기
let id = Symbol.for("id");

// 존재하는 심볼 읽기
let idAgain = Symbol.for("id");

// 두 심볼이 같음
alert( id === idAgain );	// true

 

 

2. Symbol.keyFor(sym)

Symbol.keyFor(sym)을 사용하면 심볼을 이용해 이름을 얻을 수 있다.

let Bob = Symbol.for("name");
let _1324 = Symbol.for("id");

alert( Symbol.keyFor(Bob) );
alert( Symbol.keyFor(_1324) );

전역 심볼 레지스트리에서 해당 심볼의 이름을 검색해서 얻어낸다.

전역 심볼이 아닌 인자가 넘어오면 undefined를 반환한다.

 

 

전역 심볼이 아닌 모든 심볼은 description 프로퍼티가 있으므로, 일반 심볼의 이름을 알고 싶다면 그걸 사용하면 된다.

let globalSymbol = Symbol.for("name");
let localSymboe = Symbol("name");

alert( Symbol.keyFor(globalSymbol) );	//name, 전역 심볼
alert( Symbol.keyFor(localSymbol) );	// undefined, 전역 심볼 아님

alert( localSymbol.description );	// name

 

 

---

3. 시스템 심볼

시스템 심볼(system symbol)은 자바스크립트 내부에서 사용되는 심볼이다.

시스템 심볼을 활용해서 객체를 미세 조정할 수 있다.

명세서에서 well-know symbols를 표로 볼 수 있다.

 

 

---

4. 어떤 상황에서 사용할까

사실 일반 프론트엔드 실무에서는 많이 사용하지 않는다.

string, number, object 등 기본 자료형과 구조체로도 충분하기 때문이다.

 

(아래의 경우에서도 Symbol은 잘 안쓰지만)예시가 있다.

 

1. notification 기능 구현 시

무언가 삭제 했을 때 알림을 띄워주는 경우,

빠르게 여러 개를 삭제한다면 새로운 알림창이 뜰 때 기존의 알림창을 닫아야 한다는 요구사항이 추가될 것이다.

이 때 notification 하나하나를 식별할 수 있는 값 (Symbol)을 사용할 수 있다.

 

2. api 상태 관련 변수 값 지정 시

api 상태를 IDLE, PENDING, SUCCESS, ERROR의 4가지 경우로 나눈다고 할 때,

각 상태를 string으로 저장하면 오타 등의 문제가 발생할 확률이 커 심볼을 사용할 수 있다.

export const apiStatus = {
  IDLE: Symbol('IDLE'),
  PENDING: Symbol('PENDING');
  SUCCESS: Symbol('SUCCESS');
  ERROR: Symbol('ERROR');
}

// or
export const IDLE = 'IDLE'
export const PENDING = 'PENDING'
export const SUCCESS = 'SUCCESS'
export const ERROR = 'ERROR'

 

 

3. 객체 내에서 숨기고 싶은 프로퍼티가 있을 때

키가 Symbol형인 프로퍼티는 for...in문이나 Object.keys(obj)에서 제외되기 때문에 비밀스럽게 사용할 수 있다.

단, Object.assign으로 복사하면 전부 복사된다.

    let password = Symbol("password");

    let obj = {
        name: "John",
        age: 30,
        id: "abcd123",
        [password]: "a1b2c3!"
    }
    
    for(let key in obj){
        console.log(obj[key]);
    }
    
    console.log(Object.assign(obj));

 

for...in문으로 obj 본문 출력(Symbol 안보임)

 

 

Object.assign(obj)로 복사 (Symbol 보임)

 

 

 

 

 

 

참고

https://ko.javascript.info/symbol

심볼형