(ECMAScript) ES2015(ES6) Symbol

강좌20 - ECMAScript - 7년 전 등록

ES2015(ES6) Symbol

안녕하세요. 이번 시간에는 Symbol에 대해서 알아보겠습니다! Symbol도 처음 듣는 분이 대다수일 것 같습니다.

자바스크립트에는 자료형이 7가지가 있습니다. 나열해보시죠! 테스트입니다. 힌트를 드리자면 String, Boolean, Number, Undefined, Null, Object로 6개입니다. 나머지 하나는 뭘까요? Array? Function? 당연하지만 이번 강좌 주제인 Symbol입니다. (Array와 Function은 Object입니다.)

"나는 Symbol을 듣도 보도 못 했고, 써본 적도 없다고요!"라고 하시는 분이 많을 겁니다. 사실입니다. Symbol은 평소에는 거의 쓸 일이 없는 존재입니다. 하지만 자바스크립트 내부적으로는 상당히 많이 쓰이고, 알아두면 유용한 경우가 있습니다. 따라서 오늘은 Symbol이 내부적으로는 쓰이는 경우를 알려드리고, Symbol의 활용법 위주로 다루겠습니다.

Symbol은 내부적으로 반복기 강좌에서도 다뤘듯, Symbol.iterator 속성에 사용됩니다. Symbol.iterator는 for~of 문에 쓰입니다. Symbol.iterator 값의 메소드를 정의해주면 됩니다.

const obj = {
  [Symbol.iterator]() {
    let current = 0;
    return {
      next() {
        current += 1;
        return { done: current > 5, value: current };
      },
    };
  }
};

for (a of obj) {
  console.log(a); // 1, 2, 3, 4, 5
}

위 코드에 대한 설명은 반복기 강좌에서 보시면 됩니다.

나머지 Symbol의 속성들을 설명드려야 하나 고민을 많이 했습니다. 사실 저도 써본 적이 없는 것들인데요. 신기한 것들이 많습니다. 주로 객체의 설정을 바꾸는 것들이네요. 간단하게만 설명하고 넘어가겠습니다.

Symbol.hasInstance로 instanceof 연산자의 행동을 바꿀 수 있습니다. Symbol.toStringTag는, 객체에서 toString을 호출했을 때 [object Object]라고 뜨는데, Object부분을 바꿀 수 있게 해줍니다. Symbol.toPrimitive는 객체를 형변환 했을 때 어떤 값을 취할 지 정할 수 있습니다.

자 이제 잊어버리시면 됩니다! Symbol 객체를 직접 다루는 방법에 대해 알아봅시다.

먼저 Symbol은 불변값입니다. 한 번 설정하면 그 값을 바꿀 수 없습니다. 생성할 때마다 새로운 값이 생성됩니다.

Symbol('creator') === Symbol('creator'); // false (두 개는 다른 값입니다)

단 하나의 Symbol을 만들고 싶다면 Symbol의 for 메소드를 사용하면 됩니다. 전역 심볼이라고 부릅니다.

Symbol.for('creator') === Symbol.for('creator'); // true

Symbol 속성은 반복문에 걸리지 않고, 정확한 키를 사용하지 않으면 조회가 안 되는 만큼, 객체에 대한 부가정보를 위해 사용할 수 있습니다. Metadata같은 역할을 할 수 있는 겁니다. 제작자가 제로초인 객체를 만들어보겠습니다.

const sb = Symbol('creator');
const obj = {
  [sb]: 'zerocho',
  a: 1,
  b: 2,
};

obj.creator; // undefined
obj[Symbol('creator')]; // undefined
obj[sb]; // 'zerocho' (정확히 같은 Symbol 객체를 사용해야만 조회가능합니다.)
Object.keys(obj); // [a, b] (심볼은 표시되지 않습니다)

이 특성을 활용해서 라이브러리를 제작할 때 객체에 대한 부가 정보로 사용하시면 됩니다. 특히 정확한 심볼이 아니면 조회가 불가능하기 때문에 다른 사용자가 악용할 여지도 없고, 네이밍이 충돌해서 문제가 생길 여지도 없습니다.

전역 Symbol에 대한 키를 조회하는 메소드도 있습니다. 일반적인 Symbol은 조회할 수 없습니다. 왜냐면 같은 키를 같더라도 다른 값이기 때문이죠.

const sym = Symbol.for('test');
Symbol.keyFor(sym); // test

다음 시간에는 ES2018이 될 유력한 후보인 stage-3에 대해서 알아보겠습니다.

조회수:

ZeroCho Blog

게시글

ES2015(ES6) Symbol

댓글