[JavaScript] Symbol을 알아보자
Front-End/JavaScript

[JavaScript] Symbol을 알아보자

 

 

 

 

Symbol이란?🤔

 

 

심볼(Symbol) 은 ES6에서부터 추가된 7번째 타입의 값이다.
심볼(Symbol)은 프로그램이 이름 충돌의 위험 없이 속성(property)의 키(key)로 쓰기 위해 생성하고 사용할 수 있는 값이다.

 

 

let newSymbol = Symbol();


Symbol()을 호출하면 새로운 심볼 값이 생성된다. 이 값은 고유하다. 즉, 다른 어떤 값과도 다르다. 심볼을 키값으로 사용하게 된다면 다른 어떤 속성과도 충돌하지 않는다.

 

 

 

 

 

 

Symbol의 특징

 


심볼은 이런 식으로 사용할 수 있다.

let isOpen = Symbol('isOpen');
...
element[isOpen] = true;

 

  1. 위 코드에서 isOpen문자열은 주석일 뿐이다. 심볼 값을 console.log()로 찍거나, .toString()을 써서 심볼 값을 문자열로 바꾸거나, 에러 메시지에서 참조할 경우 이 문자열이 출력된다. 
  2. 심볼을 key로 갖는 속성은 obj.name같이 .을 사용해서 접근할 수 없다.
  3. 위와 같이 element[isOpen] 식으로 접근이 가능하며, 이러한 모든 접근은 isOpen심볼 값이 실행 스코프 안에 있을 때만 가능하다.
  4. 심볼 key는 충돌을 피하기 위해 만들어진 것이기 때문에, JavaScript의 일반적인 객체 조사 (for-in, Object.keys 등) 기능들은 심볼 key를 무시한다.
    • object.getOwnPropertySymbols(obj)를 사용하면 객체 안에 존재하는 심볼 key목록을 조회하는 것이 가능하다.
    • Reflect.ownKeys(obj)는 문자열 key와 심볼 key를 모두 리턴한다.

 

 

 

 

정리✔


symbol은 원시타입으로 생성되면 변경되지 않고 속성을 부여할 수 없다.

가장 큰 특징은 고유함이다. 주석이 같더라도 다른 심볼이다.

 

 

 

 

 

다른 요소들과 달리, 심볼은 문자열로 자동 변환되지 않는다. 따라서 String(symbol) 또는 symbol.toString()을 써서 심볼을 명시적으로 문자열로 변환해야한다.

 

 

 

 

📌

https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/
(번역본 ➡ http://hacks.mozilla.or.kr/2015/09/es6-in-depth-symbols/)

 

ES6 In Depth: 심볼 (Symbol) ★ Mozilla 웹 기술 블로그

ES6 In Depth는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. ES6 심볼(symbol)은 무엇일까요? 심볼은 로고가 아닙니다. 심볼은 당신이 코드

hacks.mozilla.or.kr