[Javascript] Symbol

SungWoo·2024년 11월 6일

자바스크립트 공부

목록 보기
25/42
post-thumbnail

자바스크립트의 Symbol은 ES6에 도입된 7번째 원시 데이터 타입으로 다른 값과 중복되지 않는 유일무이한 값을 생성할 수 있다. 이번 포스팅에서는 Symbol에 대해 자세히 정리하고 넘어가보자.

1. Symbol 생성

  • 심벌 값은 Symbol() 함수를 호출하여 생성한다. (리터럴 표기법 X)
  • 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다.
  • new 연산자와 함께 호출하지 않는다. (심벌 값은 변경 불가능한 원시 값이다.)
const mySymbol = Symbol();
console.log(typeof mySymbol); // Symbol

// 심벌 값은 외부로 노출되지 않아 확인할 수 없다.
console.log(mySymbol); // Symbol()
  • Symbol 함수에는 선택적으로 문자열을 인수로 전달할 수 있다.
  • 이 문자열은 생성된 심벌 값에 대한 설명(description)으로 디버깅이나 로깅 용도로 사용되며, 심벌 값 생성에 어떠한 영향도 주지 않는다.
  • 심벌 값에 대한 설명이 같더라도 서로 다른 Symbol로 인식된다.
const sym1 = Symbol('id');
const sym2 = Symbol('id');
console.log(sym1 === sym2); // false
  • 심벌 값은 암묵적으로 문자열이나 숫자 타입으로 변환되지 않는다.
  • 단, 불리언 타입으로는 암묵적으로 타입 변환 된다.
const mySymbol = Symbol();

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

2. Symbol 검색

  • Symbol.for()Symbol.keyFor()를 사용하면 전역 심벌 레지스트리에서 Symbol을 검색하거나 생성할 수 있다.
  • 이를 통해 어플리케이션 전체에서 동일한 Symbol을 공유할 수 있다.

Symbol.for

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

Symbol.keyfor

  • Symbol.keyFor 메서드를 사용하면 전역 심벌 레지스트리에 저장된 심벌 값의 키를 추출할 수 있다.
const globalSym1 = Symbol.for('app.uniqueId');
const globalSym2 = Symbol.for('app.uniqueId');
console.log(globalSym1 === globalSym2); // true

console.log(Symbol.keyFor(globalSym1)); // 'app.uniqueId'

3. Symbol과 프로퍼티 키

  • 심벌 값은 유일무이한 값이므로 심벌 값으로 프로퍼티 키를 만들면 다른 프로퍼티 키와 절대 충돌하지 않는다.
const uniqueId = Symbol('myUniqueId');

const user = {
    name: "Sean",
    [uniqueId]: 123 // Symbol을 키로 사용
};
console.log(user[uniqueId]); // 123

4. Symbol과 프로퍼티 은닉

  • 심벌 값을 프로퍼티 키로 사용하여 생성한 프로퍼티는 for...in 문이나 Object.keys, Object.getOwnPropertyNames 메서드로 찾을 수 없다.
    (심벌 값을 프로퍼티 키로 사용하여 프로퍼티를 생성하면 외부에 노출할 필요가 없는 프로퍼티를 은닉할 수 있다.)
  • ES6에서 도입된 Object.getOwnPropertySymbols 메서드를 사용하면 심벌 값을 프로퍼티 키로 사용하여 생성한 프로퍼티를 찾을 수 있다.
const uniqueId = Symbol('myUniqueId');

const user = {
    name: "Sean",
    [uniqueId]: 123 // Symbol을 키로 사용
};
console.log(user[uniqueId]); // 123

for (const key in user) {
	console.log(key); // 아무것도 출력되지 않는다.
}

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

console.log(Object.getOwnPropertySymbols(user)); // [ Symbol(myUniqueId) ]

5. Well-known Symbols

  • 자바스크립트가 기본 제공하는 빌트인 심벌 값을 Well-known Symbol이라 부른다.
  • Well-known Symbol은 자바스크립트 엔진의 내부 알고리즘에 사용된다.
  • 반복 가능한 객체를 정의하거나, 객체가 원시값으로 변환되는 방식을 지정할 수 있다.

Symbol.iterator

  • 객체가 반복 가능한지(iterable) 여부를 정의한다.
  • for...of 루프에서 객체를 순회할 수 있도록 객체의 반복 동작을 설정할 때 사용한다.
const iterableObj = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    const data = this.data;
    return {
      next() {
        return index < data.length 
          ? { value: data[index++], done: false } 
          : { done: true };
      }
    };
  }
};

for (const value of iterableObj) {
  console.log(value); // 1, 2, 3
}
profile
어제보다 더 나은

0개의 댓글