[JavaScript] Symbol

🚨 아래 더보기는 개인적 공부를 위해 기록한 흔적입니다.

 

책을 읽기 전 예상되는 Symbol

 

Symbol은 새로운 type으로 객체 속성의 식별자로 사용될 수 있는 고유하고 변경할 수 없는 데이터 형식.

Symbol은 디버깅 목적으로만 사용됨.

Symbol()로 호출 할때마다 다른 모든 기호와 완전히 다른 새로운 고유한 기호를 얻게 됨.

Symbol()에 매개변수를 전달할 수 있고 Symbol()의 기호 설명으로 사용할 수 있다고 함.

Symbol은 객체의 key로 사용될 수 있으나, getOwnPropertynames, for in 같은 메서드로는 접근할 수 없고, getOwnPropertySymbols()를 통해서만 Symbol로 된 key에 접근할 수 있음. 

🍀 심벌이란?

• 심벌은 es6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 
• 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 
• 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다.

🍀 심벌 값의 생성

symbol 함수

• 다른 원시값과는 달리 Symbol 함수를 호출하여 생성한다.
• 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다.

  const only = Symbol();
  console.log(typeof only); // symbol
  
  //실행 값은 외부로 노출되지 않아 확인할 수 없음.
  console.log(only); //Symbol()​

• Symbol 함수에는 문자열을 인수로 전달할 수 있고,이 문자열은 생성된 심벌 값에 대한 설명으로 디버깅 용도로만 사용되며
• 심벌 값 생성에 어떠한 영향도 주지 않음.
• 인자로 들어간 문자열이 같더라도 생성된 심벌 값은 유일무이한 값임.

  const me = Symbol("daniel");
  const metoo = Symbol("daniel");
  
  console.log(me === metoo) // false​​

   
• 심벌 값도 문자열, 숫자, 불리언과 같이 객체처럼 접근하면 래퍼 객체를 생성한다. 

🌱 래퍼 객체란? 원시값인 문자열, 숫자, 불리언 값의 경우 이들 원시값에 대해 마치 객체처럼 마침표 표기법(or 대괄호 표기법)으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환해 준다. 즉, 원시값을 객체처럼 사용하면 자바스크립트 엔진은 암묵적으로 연관된 객체를 생성하여 생성된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌린다. 이와 같이 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라고한다. 

Symbol 함수의 프로토타입 객체

const me = Symbol('daniel');

console.log(me.description); // daniel
console.log(me.toString()); // Symbol(daniel)

// 위 description 프로퍼티와 toString 메서드는 Symbol.prototype의 프로퍼티다.

• 심벌 값은 암묵적으로 문자열이나 숫자 타입으로는 변환되지 않으나, 불리언 타입으로는 암묵적으로 타입 변환이되어 if문을 통해 존재 확인이 가능하다.

  const me = Symbol();
  
  if(me) console.log("me is not empty") // me is not empty

Symbol.for / Symbol.keyfor 메서드

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

    // 전역 심벌 레지스트리에 me라는 키로 저장된 심벌 값이 있는지 검색하여 없다면 새 심벌 값을 생성
    const me = Symbol.for("daniel");
    // 전역 심벌 레지스트리에 me라는 키로 저장된 심벌 값이 있으면 해당 심벌 값을 반환
    const metoo = Symbol.for("daniel");
    
    console.log(me === metoo) // true

• Symbol 함수는 호출될 때마다 유일무이한 심벌 값을 생성하지만 전역 심벌 레지스트리에서 심벌 값을 검색할 수 있는 키를 지정할 수 없으므로 전역 심벌 레지스트리에 저장되지 않음.
• Symbol.keyFor 메서드를 사용하면 전역 심벌 레지스트리에 저장된 심벌 값의 키를 추출할 수 있음.

  const me = Symbol.for('daniel');
  
  Symbol.keyFor(me); // 'daniel'
  
  const metoo = Symbol('park');
  
  Symbol.keyFor(metoo); // undefined​

🍀 심벌과 프로퍼티 키

• 심벌 값을 프로퍼티 키로 사용하려면 프로퍼티 키로 사용할 심벌 값에 대괄호를 사용해야 하고 프로퍼티에 접근할 때도 마찬가지로 대괄호를 사용해야 함.

  const obj = {
  	[Symbol.for('daniel')] : 1
  };
  
  obj[Symbol.for('daniel')]; // 1​

   

🍀 심벌과 프로퍼티 은닉

• 심벌 값을 프로퍼티 키로 사용하여 생성한 프로퍼티는 for...in 문이나 Object.keys, Object.getOwnPropertyNames 메서드로 찾을 수 없다. 이처럼 심벌 값을 프로퍼티 키로 사용하여 프로퍼티를 생성하면 외부에 노출할 필요가 없는 프로퍼티를 은닉 가능(완벽하게 숨길 수 있는 것은 아님 이유는 하기와 같음)하나 Object.getOwnPropertySymbols 메서드를 사용하면 심벌 값을 프로퍼티 키로 사용하여 생성한 프로퍼티를 찾을 수 있음.

  const obj = {
  	[Symbol('daniel')] : 1
  };
  
  console.log(Object.keys(obj)); // []
  
  console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(daniel)]
  
  const symbolKey = Object.getOwnPropertySymbols(obj)[0]; // 해당 메서드의 반환값은 배열이기 때문에 [0]
  
  console.log(obj[symbolKey]); // 1​

🍀 심벌과 표준 빌트인 객체 확장

표준 사양으로 추가될 메서드와 중복될 가능성으로 인해 표준 빌트인 객체에 사용자 정의 메서드를 직접 추가하여 확장하는 것은 권장되지 않는데, 중복될 가능성이 없는 심벌 값으로 프로퍼티 키를 생성하여 표준 빌트인 객체를 확장하면 충돌이 일어나지 않도록 방지할 수 있음.

Array.prototype[Symbol.for('sum')] = function(){
	return this.reduce((acc, cur) => acc + cur, 0);
};

[1, 2][Symbol.for('sum')](); // 3

🍀 Well-known Symbol

자바스크립트가 기본 제공하는 빌트인 심벌 값을 ECMAScript 사양에서는 Well-known Symbol이라 부르고 이는 console.dir(Symbol)을 통해 확인을 할 수 있음. Well-known Symbol은 자바스크립트 엔진의 내부 알고리즘에 사용된다.

예를들어 for...of문으로 순회 가능한 빌트인 이터러블은 Well-known Symbol인 Symbol.iterator를 키로 갖는 메서드를 가지며, Symbol.iterator 메서드를 호출하면 이터레이터를 반환하도록 ECMAScript 사양에 규정되어 있음. 빌트인 이터러블은 이터레이션 프로토콜을 준수함.

 

심벌은 중복되지 않는 상수 값을 생성하는 것은 물론 기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해, 즉 하위 호환성을 보장하기 위해 도입되었다. 

 

++ 참고로 Object.getOwnPropertySymbols()는 아래 사진에서 확인할 수 있듯이 es6에서 추가되었다. 

그리고 console.dir(Symbol)을 통해 well-known Symbol을 확인할 수 있는 이유는 함수도 객체이기에 프로퍼티를 가질 수 있기 때문이다. 이 프로퍼티는 일반 객체에는 없는 함수 객체 고유의 프로퍼티로 __proto__ 접근자 프로퍼티를 통해 상속받는 것이 아니다.

 

 

출처 : 모던 자바스크립트 딥다이브