[Javascript] Symbol 데이터 타입

🔎 ES6 이전의 데이터 타입

ES5까지 자바스크립트에서 가지고 있던 데이터타입은 Number, String, Boolean, undefined, null, object 정도였고 Symbol이란 데이터 타입은 존재하지 않았습니다.

 

🔎 ES6+의 데이터 타입

그러나 ES6+에서 Symbol과 BigInt라는 데이터 타입이 등장했습니다.

 

🔎 Symbol

심볼(Symbol) 데이터 타입은 원시 데이터 형의 일종으로 symbol() 함수는 심볼(symbol) 형식의 값을 반환하는데 반환되는 모든 심볼 값은 고유하다.

심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다.

 

❓ 심볼 사용하기

const symbol = Symbol();
const hello = Symbol('Hello');

Symbol을 사용하기 위해서는 무조건 Symbol() 함수를 호출을 해주어야 합니다.

그리고 그 안에 문자열을 파라미터로 전달할 수 있긴 하지만 어떤 영향을 주지는 않습니다.

 

📌 심볼로 선언하면 유일하다..유일!! 유일!! unique!!

방금 문자열을 파라미터로 받을 수는 있지만 그게 어떤 영향을 주진 않는다고 한 것처럼

즉, 문자열이 같다고 해서 같은 값으로 평가되지는 않는다는 것입니다.

console.log(Symbol() === symbol); // false
console.log(Symbol() === Symbol()); // false
console.log(Symbol('Hello') === hello); // false

 

📌 데이터 형 변환은 불가능하다

자바스크립트 데이터 타입의 가장 큰 특징 중 하나는 데이터 타입의 형 변환이 아주 유연하게 이루어진다는 점입니다.

예를 들어 개발자가 의도하지 않았다고 하더라도 적절한 형변환을 자동으로 적용합니다.

const string = 'a' + 1;
console.log(string); // "a1"

이렇듯 문자열과 숫자를 더하고자 하는 상황에서 자동으로 숫자의 데이터타입을 문자열로 변환해 더해줍니다.

그러나 Symbol은 이런 데이터 형 변환이 불가능한 데이터 타입입니다.

 

그렇기 때문에 아까 만들어둔 hello라는 Symbol 타입 변수에 ! 하나를 더 추가해주고 싶다고 한다면,

즉시 심볼 값을 스트링으로 변환할 수 없다는 타입 에러가 출력됩니다.

const hello = Symbol('Hello!');
const hello2 = hello + '!';
// TypeError: Cannot convert a Symbol value to a string

 

📌 기본적인 열거 대상에서 제외된다

Symbol 타입은 기본적인 열거 대상에서 제외됩니다.

만약 어떤 객체를 선언하고 그 객체의 프로퍼티를 Symbol로 할당할 수 있습니다.

그러나 이후, 해당 프로퍼티에 접근한다거나 for ... in을 통해 순회하고자 할 때 Symbol 타입인 경우는 접근이 불가능해 탐색에서 제외됩니다.

그렇기 때문에 프로퍼티 키를 은닉하고자 할 때 많이 사용합니다.

const TYPE = Symbol('타입');
const FALVOR = Symbol('맛');

const icecream = {
  [TYPE]: '아이스크림',
  [FALVOR]: 'Chocolate',
  price: 3500,
};

const cupcake = {
  [TYPE]: '컵케이크',
  [FALVOR]: 'Vanilla',
  price: 5700,
};

console.log(icecream[FALVOR], cupcake[FALVOR]); // Chocolate Vanilla

물론 위와 같이 이미 TYPE와 FALVOR로 선언해준 값을 바로 접근하여 출력하고자 하면 가능하지만,

아래의 예시를 보면 탐색에 전혀 포함되어 있지 않음을 알 수 있습니다.

for (let i in icecream) {
    console.log(`${i} : ${icecream[i]}`); 
}

for(let c in cupcake) {
    console.log(`${c} : ${cupcake[c]}`);
}

출력 화면

 

📌 은닉된 프로퍼티 값을 접근하고 싶으면 : Reflect.ownKeys()

Object.keys(), Object.getOwnPropertyNames()를 통해서도 위의 예시처럼 price에만 접근이 가능합니다.

그렇기 때문에 Symbol을 통해 할당된 키값에 접근하기 위해서는 Object.getOwnPropertySymbols()를 사용해야 합니다.

Object.getOwnPropertySymbols(icecream).forEach((i) =>
  console.log(i, icecream[i])
);

출력 화면

이 경우에는 정말 딱 심볼로 선언된 키 값들만 출력이 되기 때문에 그 객체 안에 들어있는 키와 벨류를 심볼이든 아니든 상관 없이 모두 접근해 출력해 보고 싶다면 Reflect.ownKeys()를 사용해야만 모든 키에 접근이 가능합니다.

출력 화면