자바스크립트 Symbol 정리

🔍 Symbol 이란 ?

심벌이란 문자열, 숫자, boolean, undefined, null, 객체에 이은 7번째 데이터 타입이다.

심벌은 변경 불가능한 원시 타입 값이고, 다른 값과 중복되지 않는 유일무이한 값이다.

🔍 Symbol 의 생성

const Symbol1 = Symbol();
const Symbol2 = Symbol('description');
const Symbol3 = Symbol('Symbol3');

console.log(Symbol1); // Symbol()
console.log(Symbol2); // Symbol(description)
console.log(Symbol3); // Symbol(Symbol3)

console.log(Symbol1 == Symbol1); // true
console.log(Symbol1 == Symbol2); // false

📌
1. 다른 타입의 값은 리터럴 표기법을 통해 값을 생성 할 수 있지만, Symbol값은 Symbol 함수를 통해 호출하여 생성 할 수 있다.
2. Symbol은 new 연산자를 사용하여 호출하지 않는다. new 연산자와 함께 호출한다면 객체가 생성되지만 Symbol 값은 변경 불가능한 원시타입의 값이기 때문이다.
3. Symbol은 호출할때마다 유일한 Symbol이 생기기 때문에 각각의 고유한 값을 가지게 된다.
4. Symbol() 안에 들어간 문자열은 생성된 Symbol 값에 대한 설명으로 디버깅 용도로 사용되고, 값에 어떠한 영향도 주지 않는다.

❓ 그래서 Symbol은 어디에 사용을 하는 것인가 ❓

Symbol은 유일무한 프로퍼티 키를 만들기 위해 사용한다.

const obj = {};

obj.propertyKey1 = 'value1';

obj[2]= 'value2'; // '2' 로 변환

console.log(obj); // { '2': 'value2', propertyKey1: 'value1' }

객체는 key 와 value 값으로 나누어지는데, 보통 key의 값은 숫자를 입력하더라도 내부에서 문자열로 변환된다.

하지만 문자열이 아닌 Symbol 타입을 프로퍼티의 key 값으로 사용함으로써 다른 프로퍼티와 충돌되지 않도록 할 수있다.

const obj = {};

const Symbol1 = Symbol();
const Symbol2 = Symbol('description');
const Symbol3 = Symbol('Symbol3');

obj[Symbol1] = '1';
obj[Symbol2] = '2';
obj[Symbol3] = '3';

console.log(obj); // { [Symbol()]: '1', [Symbol(description)]: '2', [Symbol(Symbol3)]: '3' }

값을 보면 알수 있듯이, 각각의 Symbol 값들이 프로퍼티의 key 값으로 들어간 것을 볼 수있다.

🔍 Well-Known Symbol

Symbol 함수를 이용해서 Symbol 값을 만들수도 있지만, 자바스크립트가 기본 제공하는 빌트인 Symbol 값이 있다. 이 빌트인 Symbol 값은 Symbol 함수의 프로퍼티 값에 할당 되어있다.

❗️ 이 자바스크립트가 기본 제공하는 빌트인 Symbol 값(Symbol 함수의 프로퍼티 값)들을 Well-Known Symbol 이라고 한다 ❗️

이 Well-Known Symbol 의 대표 예시가 Symbol.iterator 이다.

Array, String, Map, Set, TypedArray, arguments, NodeList, HTMLCollection 과 같이 for of 문으로

순회 가능한 빌트인 이터러블들은 Symbol.iterator를 key 값으로 갖는 메서드를 가진다.

Array.prototype[Symbol.iterator];

String.prototype[Symbol.iterator];

Map.prototype[Symbol.iterator];

Set.prototype[Symbol.iterator];

arguments[Symbol.iterator];

NodeList.prototype[Symbol.iterator];

HTMLCollection.prototype[Symbol.iterator];