타입스크립트 심볼 타입 (Symbols)

 

💻 개요 

업무 중 심볼 타입이 객체 프로퍼티의 키로서 사용된 경우 해당 객체의 값을 추출해야 하는 부분이 있었습니다.

간단하게 Object.values로 추출하려 했으나, 의도대로 동작하지 않았고 잘몰랐던 부분이여서 해당 부분과 심볼타입에 대해 정리합니다.

Documentation - Symbols

 

💻 심볼 타입이란

• number, string과 같은 기본 데이터 타입 중 하나
• 불변하고 유일함
• 문자열처럼 객체 속성의 키로서 사용될 수 있음

 

💻 생성하는 방법

• Symbol 생성자를 호출하는 것으로 값을 생성

let sym2 = Symbol("key");
let sym3 = Symbol("key");
sym2 === sym3; // false

 

 

💻 심볼 타입을 객체의 키로 사용하는 경우

• 아래 예시와 같이 사용할 수 있다.

const sym = Symbol();
let obj = {
  [sym]: "value",
};
console.log(obj[sym]); // "value"

• 예시만보면 언제 활용할 수 있을지 와닿지 않는다.
• 시퀄라이즈에서는 Operator를 호출해서 and, or 과 같은 조건절 쿼리를 생성한다.
• 해당 명령어들이 작성되어 있는 인터페이스들의 속성들이 sybol 타입으로 작성되어 있다.
• https://github.com/sequelize/sequelize/blob/main/packages/core/src/operators.ts

 /**
   * ```js
   * [Op.and]: {a: 5}
   * ```
   * In SQL
   * ```sql
   * AND (a = 5)
   * ```
   */
  readonly and: unique symbol;

 

 

💻 Object.values를 사용한 결과

const sb = Symbol("fullth");
const obj = {
    [sb]: 777
};
console.log(Object.values(obj));

• 777이 출력되길 기대했으나, 위 결과는 []로 빈 배열이 출력된다.
• MDN에서 JavaScript의 Object.values API 명세를 확인해보면, 아래와 같이 "(열거 가능한) 속성의 값들로 이루어진 배열을 리턴" 한다고 명시되어 있다.
• 그리고, ECMAScript의 Symbol 명세를 확인해보면 아래와 같이 작성되어 있다.
• This property has the attributes { [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false }.
• Enumerable이 false 즉, 열거 가능하지 않은 속성이다.
• 그렇기에 Object.values로 추출하지 못한다.

The Object.values() static method returns an array of a given object's own enumerable string-keyed property values.
Object.values()

메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배열은 for...in 구문과 동일한 순서를 가집니다. (for in 반복문은 프로토타입 체인 또한 열거한다는 점에서 차이가 있습니다.)

Object.values() - JavaScript | MDN

ECMAScript® 2025 Language Specification

 

 

💻  key 모르는 경우 값을 추출하는 방법

• key 값을 아는 경우에는 다음과 같이 간단하게 추출할 수 있다.

const sb = Symbol("fullth");
const obj = {
    [sb]: 777
};

console.log(Object.values(obj)); // []
console.log(obj[sb]) // 777

• 하지만 모르는 경우는 위와 같이 Object.values로 추출할 수 없다.
• 내 경우 아래와 같이 추출하였다.

const sb = Symbol("fullth");
const obj = {
    [sb]: 777
};

const keys = Object.getOwnPropertySymbols(obj);

const key = keys[0];
const value = Reflect.get(obj, key);

console.log(value);

TS Playground - An online editor for exploring TypeScript and JavaScript

• Object에 심볼 프로퍼티를 얻는 getOwnPropertySymbols API가 존재한다.
• 키를 얻어도 일반 객체처럼 심볼은 접근할 수 없다.
• Reflect의 get() 메소드를 이용해서 값을 가져올 수 있다.

 

💻 자바스크립트 기본 데이터 타입

• null
• undefined
• boolean
• number
• bigint
• string
• symbol

원시 값 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN