Symbol

<aside> 💡

다른 값과 중복되지 않는 유일무이한 값

문자열, 숫자, 불리언, 객체, null, undefined, Symbol

원래 6개만 데이터 타입이었는데 ES6부터 Symbol 타입이 추가되어 데이터 타입은 총 7개다.

</aside>

1. 심볼 매서드

심볼 생성 Symbol(str)

// 심볼 생성하기
let id1 = Symbol();
let id2 = Symbol();
// 심볼 각각은 유일하기에 다음 수식은 false로 평가된다
console.log(id1 == id2);
 
// 이렇게 new를 쓰면 TypeError 발생
let newSymbol = new Symbol();

Symbol() 함수를 통해 생성 가능하다.

new Symbol()은 허용하지 않는다.

let id1 = Symbol("id");
console.log(id1); // Symbol(id)

Symbol에 String 값을 전달하여 생성할 수 있다. 이를 설명 인자라 부른다.

전역 심볼 레지스트리 Symbol.for(str), Symbol.keyFor(sym)

위와 같이 심볼을 생성하면 되지만, 접근하기 어려운 구조이다. 객체의 키로 Symbol을 지정하면 어떻게 접근할 수 있을까?

// 전역 심볼 레지스트리에 id 심볼 등록됨
let id = Symbol.for("id");
// 이미 등록된 심볼을 반환함
let id2 = Symbol.for("id");
console.log(id === id2); // true

Symbol.for 매서드를 통해 심볼을 생성하면, 전역 심볼 레지스트리에 등록된다. 만약 전역 심볼 레지스트리에 해당 키가 등록되어 있다면, 이미 등록된 심볼을 반환한다.

let id = Symbol.for("id");
let witch = Symbol.for("witch");
console.log(Symbol.keyFor(id)); // id
console.log(Symbol.keyFor(witch)); // witch

Symbol.keyFor() 매서드를 통해 심볼 키를 검색할 수 있다.

2. 심볼이 만들어진 목적

나는 실무에서 개발하면서 Symbol 키워드로 무언가를 만들어본 적이 단 한번도 없다. 이를 공부하면서 이게 왜 필요하지? 라는 생각이 들었지만, 크게 두 가지의 장점이 있다.

<aside> 💡

심볼의 장점: 고유성 보장, 비공개 속성 구현

</aside>

1. 고유성 보장

const Direction = Object.freeze({
  UP: "up",
  DOWN: "down",
  LEFT: "left",
  RIGHT: "right",
});

const Mood = Object.freeze({
  UP: "up",
  DOWN: "down",
  HAPPY: "happy",
});

console.log(Direction.UP === Mood.UP); // true

다음 예제에서, Direction은 방향을, Mood는 기분을 의미한다. value의 별 사용처가 없기에 적당한 값을 썼을 뿐인데 전혀 다른 객체의 값이 같은 결과를 초래한다.

const Direction = Object.freeze({
  UP: Symbol("up"),
  DOWN: Symbol("down"),
  LEFT: Symbol("left"),
  RIGHT: Symbol("right"),
});

const Mood = Object.freeze({
  UP: Symbol("up"),
  DOWN: Symbol("down"),
  HAPPY: Symbol("happy"),
});

console.log(Direction.UP === Mood.UP); // false

이를 Symbol()로 정의하면 값이 고유한 값을 가리킨다.

그런데 고유성 보장하려고 굳이 Symbol()을 추가했을까? uuid 써도 고유성은 보장된다.

const { v4: uuidv4 } = require('uuid');

const Direction = Object.freeze({
  UP: uuidv4(),
  DOWN: uuidv4(),
  LEFT: uuidv4(),
  RIGHT: uuidv4(),
});

const Mood = Object.freeze({
  UP: uuidv4(),
  DOWN: uuidv4(),
  HAPPY: uuidv4(),
});

console.log(Direction.UP === Mood.UP); // false

2. 비공개 속성 구현

만약 객체를 생성하는데 특정 값의 순회를 하지 않고 싶으면 어떻게할까?

const obj = {};

Object.defineProperties(obj, {
  name: {
    value: 'jihyup',
    enumerable: true,
  },
  age: {
    value: '31',
    enumerable: true,
  },
  year: {
    value: '1993',
    enumerable: false,
  }
});

for (let i in obj) {
  console.log(i); // name age
}

앞서 배운 Object.defineProperties() 함수를 통해 enumerable 속성을 false로 지정하여 순회하지 않게 할 수 있다.

그러나 Symbol로 객체의 키를 지정하면 enumerable 속성이 자동으로 false이기에 위 코드를 구현할 수 있다.

const obj = {
  name: 'jihyup',
  age: '31',
  [Symbol('year')]: '1993'
}

for (let i in obj) {
  console.log(i); // name age
}

3. Well-known Symbol

브라우저에서 객체, 배열, Map()을 조회해보겠다.

배열 조회

객체 조회

Map 조회

공통적으로 Symbol(Symbol.iterator) 속성이 존재한다.

// Map 예제
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
console.log("Map iteration:");
for (const [key, value] of map) {
    console.log(key, value); // a 1 b 2 c3
}

// 배열 예제
const array = [1, 2, 3, 4, 5];
console.log("\\nArray iteration:");
for (const item of array) {
    console.log(item); // 1 2 3 4 5
}

// 객체 예제 (에러 발생)
const obj = {a: 1, b: 2, c: 3};
console.log("\\nObject iteration (will throw an error):");
try {
    for (const item of obj) {
        console.log(item);
    }
} catch (error) {
    console.log("Error:", error.message); // Error: obj is not iterable
}

Symbol(Symbol.iterator) 속성은 for … of 문을 가능하게 해준다. 여기서 Map과 객체의 차이점이 발생한다. 객체는 iterator 속성이 없고, Map은 iterator 속성이 있어 for … of 문에서 차이가 발생한다.

console.dir(Symbol)을 통해 잘 알려진 심볼을 출력할 수 있다.

잘 알려진 심볼 프로퍼티 및 Symbol 매서드

• Symbol.iterator = Symbol(Symbol.iterator) → Symbol.iterator = Symbol(Symbol(Symbol.iterator)) ?

Quiz

#1. 다음의 출력 결과는?

try {
  let newSymbol = new Symbol();
  console.log("정상적으로 생성됨");
} catch {
  console.log("에러 발생");
}

#2. 다음의 출력 결과는?

let id = Symbol.for("id");
let id2 = Symbol.for("id");
console.log(id === id2);

참고 문헌

<aside> 📎

https://witch.work/posts/javascript-symbol-usage#12-심볼의-설명-인자

</aside>