본문 바로가기
개발공부 일지/자바스크립트

자바스크립트)Symbol

by Box Cat 2023. 10. 8.
728x90
반응형

JavaScript는 총 6개의 원시 타입(number, string, boolean, null, undefined, symbol)과 1개의 객체 타입(object)을 가지고 있다. 심볼(symbol) 타입도 6개의 원시 타입 중 하나로, ES6 버전의 JavaScript에서 새롭게 추가되었다. 심볼은   ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다  결론부터 얘기하자면, 일반적으로 심볼 타입은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. =>  심볼은 객체의 프로퍼티 키로 사용된다. 

 

Symbol의 생성

Symbol은 Symbol() 함수로 생성한다. Symbol() 함수는 호출될 때마다 Symbol 값을 생성한다. 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시 타입의 값이다.

let mySymbol = Symbol();

console.log(mySymbol);        // Symbol()
console.log(typeof mySymbol); // symbol

 

Symbol의 사용

Symbol 값도 객체의 프로퍼티 키로 사용할 수 있다. Symbol 값은 유일한 값이므로 Symbol 값을 키로 갖는 프로퍼티는 다른 어떠한 프로퍼티와도 충돌하지 않는다.

 

const obj = {};

const mySymbol = Symbol('mySymbol');
obj[mySymbol] = 123;

console.log(obj); // { [Symbol(mySymbol)]: 123 }
console.log(obj[mySymbol]); // 123

Symbol 객체

Symbol() 함수로 Symbol 값을 생성할 수 있었다. 이것은 Symbol이 함수 객체라는 의미이다. 브라우저 콘솔에서 Symbol을 참조하여 보자.

Symbol 객체

위 참조 결과에서 알 수 있듯이 Symbol 객체는 프로퍼티와 메소드를 가지고 있다. Symbol 객체의 프로퍼티 중에 length와 prototype을 제외한 프로퍼티를 Well-Known Symbol이라 부른다.

 

Symbol 활용 코드 예시

function range(start: number, end: number, step=1) {
  return {
    [Symbol.iterator]() {
      return this;
    },
    next() {
      if (start < end) {
        start = start+step;
        return { value: start, done: false };
      }
      return { done: true, value: end };
    }
  }
}

for (const n of range(0, 100, 5)) {
  console.log(n);  
}

 

타입스크립트에서 Symbol가 작동하지 않는다면?

Symbol은 ES6 (ECMAScript 2015) 이상에서만 작동하므로

tsconfig.json을

{ "compilerOptions": { "target": "ES2015" } }

으로 수정하거나,

 

tsc --downlevelIteration 파일명.ts으로 실행한다.

 
728x90
반응형

댓글