[JS ES6]-[22] Symbol 핵심만 이해하기

 

안녕하세요.

이번 글에서는 자바스크립트에서의  상속 - (Prototype) 핵심만 알려드리겠습니다.

 

1. 알아야 하는 이유

자바스크립트에서 자료형은 6개의 원시 타입(number, string, boolean, null, undefined, symbol)과 한 개의 객체 타입(object)을 가지고 있습니다.

그중에서 es6부터 추가된 symbol은,

객체에서 유일한 key값을 만들고 싶을 때 사용합니다.

 

2. 사용방법

const my_symbol = Symbol('description');

이렇게 Symbol함수 안에 설명을 적으면 사용할 수 있습니다.

그냥 설명을 저장할 수 있는 유일한 자료형입니다.

 

 

Symbol()은 사용할 때마다 유일한 Symbol이 생성됩니다.

심볼 안에 넣는 설명이 같아도, 비교해 보면 다르다고 나오는데요.

const symbol1 = Symbol('description');
const symbol2 = Symbol('description');

console.log(symbol1 === symbol2); // false

 

 

이래서 1. 유일성을 보장해서 객체의 키로 사용하기 적합합니다.

키끼리 충돌할 가능성이 없어서, 값이 덮어지거나 수정되는 일이 생기지 않기 때문이죠.

 

 

그리고 객체를 반복할 때 보통 for in을 사용하는데,

symbol자료형은 반복문에서 출력하지 않습니다.

그래서 2.비밀스런 값을 객체에 저장할 때 Symbol을 이용해서 저장하면 됩니다.

 

 

2.1 만드는 방법 - 객체에 추가하기

원래 객체는 문자로만 key값을 입력할 수 있고,

문자가 아니면 자동으로 문자로 치환됩니다.

근데 es6부턴 symbol도 key값으로 사용 가능합니다.

 

 

const sangmin = {};
sangmin.height = 185;

const height = Symbol('깔창 뺀 키');
sangmin[height] = 174;

console.log(sangmin);  //{height: 185, Symbol(내 진짜 키): 174}

특별한 이름을 가진 symbol을 객체에 추가할 수 있네요!

 

 

2.2 만드는 방법 - 객체 만들 때 추가하기

const sangmin = { [Symbol('깔창 뺀 키')] : 174 };

이렇게 대괄호 안에 심볼을 담아주시면 됩니다.

 

 

3. Symbol이 사용되는 예시

저번시간에 for of는 iterable인 객체(배열, 문자, arguments, Map, Set, NodeList)를

반복할 수 있다고 말했습니다.

그리고 iterable은 [Symbol.iterator]라는 메소드를 가지고 있는 자료형이라고 설명했습니다.

 

 

이 [Symbol.iterator]는 배열이나 객체가 생성될 때 몰래 생성되는 Symbol 중 하나입니다.

한번 출력해 볼까요?

var arr = [1, 2, 3];
console.log(arr[Symbol.iterator]);  //ƒ values() { [native code] }

 

 

이 [Symbol.iterator] 메서드가 반복기를 반환하기 때문에,

for of루프를 사용할 수 있는 건데요.

 

 

아까 심볼은 비밀스러운 값을 저장할 때 사용한다고 했죠?

그래서 반복문을 써도 출력되지 않고,

심볼을 이용해 보이지 않는 내장 기능을 만들어 낼 수 있는 겁니다.