[JS🐣] Symbol 자료형

자바스크립트의 데이터 타입

문자열, 숫자, 불리언, undefined, null, 객체

Symbol 이란?

• ES6에 추가된 7번째 타입
• 변경 불가능한 원시 타입의 값
• 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용

Symbol 값의 생성과 특징

1. 심볼 값은 Symbol 함수를 호출하여 생성 가능

// 다른 타입의 값은 리터럴 표기법을 통해 값 생성 가능
const myString = 'Hello';
const mySymbol = Symbol();

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

2. 다른 데이터 타입의 경우 new 연산자를 이용해 래퍼 객체로의 변환이 가능하지만, symbol은 변경 불가능한 원시 값이기 때문에 사용 불가능

const strObj = new String('Hello');
const symObj = new Symbol(); // TypeError: Symbol is not a constructor
console.log(strObj); // [String: 'Hello']

3. Symbol 함수에는 선택적으로 문자열 인수 전달 가능

• 생성된 Symbol 값에 대한 설명일 뿐 값 생성에는 어떠한 영향도 주지 않음
• 즉, 설명이 동일한 심볼을 여러개 만들어도 각각의 심볼 값은 다르다

const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol('mySymbol');

console.log(mySymbol1.description === mySymbol2.description); // true
console.log(mySymbol1 === mySymbol2); // false

4. 심볼 값은 문자열이나 숫자 타입으로 변환되지않으나 불리언 타입으로는 변환된다

const mySymbol = Symbol();

// TypeError: Cannot convert a Symbol value to a string
console.log(mySymbol + 'Hello!');
//TypeError: Cannot convert a Symbol value to a number
console.log(mySymbol + 5);

if (mySymbol) {
  console.log('mySymbol이 존재합니다.'); // mySymbol이 존재합니다.
}

'숨김' 프로퍼티로서 사용

'숨김' 프로퍼티란?

• 외부 코드에서 접근이 불가능하고 값도 덮어쓸 수 없는 프로퍼티

상황 가정

1. target, A, B 라는 3개의 스크립트가 존재한다.
2. target이라는 스크립트가 user 객체를 가지고 있다.
3. A, B 스크립트에서는 각자 서로의 코드를 모른 채 식별자를 이용해 user를 식별해야하는 상황이다.

문자열 id를 이용해 식별자를 만든다면?

let user = {
  name: 'daseul',
};

user.id = 'A 스크립트의 id 값';
user.id = 'B 스크립트의 id 값 ';

console.log(user); // { name: 'daseul', id: 'B 스크립트의 id 값 ' }
// 스크립트 A에서 만든 식별자는 무의미해진다.

심볼을 이용해 식별자를 만든다면?

let user = {
  name: 'daseul',
};

user[Symbol('id')] = 'A 스크립트의 id';
user[Symbol('id')] = 'B 스크립트의 id';

console.log(user); 
/* {
  name: 'daseul',
  [Symbol(id)]: 'A 스크립트의 id',
  [Symbol(id)]: 'B 스크립트의 id'
} */

심볼은 for..in문, Object.keys 메서드에서 배제된다

for (let key in user) {
  console.log(key); // name
}

console.log(Object.keys(user)); // ['name']

따라서 심볼을 이용하면 target 스크립트가 모르게 user에 식별자를 부여 할 수 있으며, 같은 키를 사용하였을 때 값이 덮어씌어지는 상황도 방지할 수 있다.

전역 심볼

• 이름이 같은 심볼이 같은 개체를 가르키길 원하는 경우
• 애플리케이션 곳곳에서 심볼 "id"를 이용해 특정 프로퍼티에 접근해야하는 상황일 경우

Symbol.for / Symbol.keyFor 메서드

Symbol.for 메서드

• 인수로 전달받은 문자열을 키로 사용하여 키와 심벌 값의 쌍들이 저장되어 있는 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌 값을 검색
  • 검색에 성공하면 새로운 심벌 값을 생성하지 않고 검색된 심벌 값을 반환
  • 검색에 실패하면 새로운 심벌 값을 생성하여 해당 키로 전역 심벌 레지스트리에 저장 후 생성된 심벌 값을 반환

const globalSym = Symbol.for('id');
const sym = Symbol.for('id');
console.log(globalSym === sym); // true

const globalSym = Symbol.for('id');
const sym = Symbol('id');
console.log(globalSym === sym); // false

애플리케이션 전역에서 중복되지 않는 유일무이한 상수인 심볼 값을 단하나만 생성하여, 전역 심벌 레지스트리를 통해 공유 가능

Symbol.keyFor 메서드

• 전역 심볼 레지스트리에 저장된 심볼 값의 키를 추출 가능

const globalSym = Symbol.for('id');
const sym = Symbol('id');

const globalSymKey = Symbol.keyFor(globalSym);
console.log(globalSymKey); // id

const symKey = Symbol.keyFor(sym);
console.log(symKey); // undefined

만약 전역 심볼 레지스트리에 저장되어있지 않은 심벌 값을 찾고 싶다면?

• Object.getOwnPropertySymbols() 메서드 사용 (ES6 도입)

const obj = {
  [Symbol.for('name')]: 'daseul',
  [Symbol('id')]: 1,
};

console.log(obj[Symbol.for('name')]); // daseul
console.log(obj[Symbol('id')]); // undefined

console.log(Object.getOwnPropertySymbols(obj)); 
// [ Symbol(name), Symbol(id) ]

const symbolValue = Object.getOwnPropertySymbols(obj)[1];

console.log(obj[symbolValue]); // 1

Well-known Symbol

• 자바스크립트가 기본 제공하는 빌트인 심벌 값
• Symbol 함수 프로퍼티에 할당되어 있다
  

array, string, map, set 등과 같은 순회가능한 이터러블

• Symbol.iterator를 키로 갖는 메서드를 가지며, 이 메서드를 호출하면 이터레이터 객체를 반환하도록 규정되어있다.
• Symbol.iterator라는 Symbol 타입 값으로 접근 가능한 속성이 존재하고 그 속성의 값은 함수, 그 함수를 호출하면 이터레이터가 반환되는 것

이터레이터 객체

• Iterator는 next라는 메소드를 갖습니다.
• next 메소드는 다음 두 속성을 갖는 객체를 반환해야 합니다.
  • done - 반복이 모두 끝났는지를 나타냅니다.
  • value - 현재 순서의 값을 나타냅니다.

const iterable = {
  [Symbol.iterator]() {
    let cur = 1;
    const max = 5;
    return {
      next() {
        return { value: cur++, done: cur > max + 1 };
      },
    };
  },
};

const iter = iterable[Symbol.iterator]();
const it2 = iter.next();
const it3 = iter.next();
console.log(iter); // { next: [Function: next] }
console.log(it2); // { value: 1, done: false }
console.log(it3); // { value: 2, done: false }

이터레이션 프로토콜을 사용하기위해 일반 객체에 추가해야하는 메서드 키 Symbol.iterator는 기존 프로퍼티 키 또는 미래에 추가될 키와 절대로 중복되지 않을 것이다.

Symbol은 기존에 작성된 코드에 영향을 주지않고 새로운 프로퍼티를 추가하기 위해 도입되었다.

참고 사이트

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol
• https://includestdio.tistory.com/26
• https://ko.javascript.info/symbol
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
• https://ko.javascript.info/iterable#ref-298
• 모던 자바스크립트 딥다이브 33장 7번째 데이터 타입 Symbol