탄탄한 기본기!

javaScript - Symbol 타입 본문

개인 공부/JS (자바스크립트)

javaScript - Symbol 타입

두영두영 2021. 6. 1. 13:52

심벌은 자바스크립트의 7가지의 타입들(문자열, 숫자, 불리언, undefined, null, 객체, 심벌) 중 하나이며, ES6에 도입되어 사용되고 있다.

 


1. Symbol 함수

심벌 값은 Symbol 함수를 호출하여 생성해야 하며 리터럴로 생성이 불가능하다. 생성된 심벌 값은 외부로 노출이 되지 않기 때문에 확인할 수 없으며 다른 어떠한 값들과도 절대로 중복되지 않는 유일한 값이다.

 

그리고 심벌을 생성할 때, 인수로 문자열을 전달할 수 있는데 이 때 문자열은 해당 심벌을 생성해서 구분하기 위한, 즉 디버깅 용도로 사용되며 심벌 값과는 상관이 없다.

const mySymbol = Symbol('hello');
console.log(mySymbol); // Symbol(hello)


const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol('mySymbol');
console.log(mySymbol1 === mySymbol2); // false

 생성자 함수와 비슷하게 생기긴 했지만, new 연산자와 함께 사용하면 에러가 난다. 그리고 '.'을 찍어 객체에 접근하듯이 접근하면 암묵적으로 래퍼 객체를 생성한다.

 

암묵적 형 변환의 경우, 문자열이나 숫자 등으로는 변환이 불가능하지만 불리언 타입으로는 형 변환이 가능하다.

const mySymbol = Symbol();

console.log(!!mySymbol); // true

2. Symbol.for / Symbol.keyFor

심벌의 for 메서드는 싱글톤 패턴과 비슷하게 동작하는 메서드이다.

 

문자열을 인수로 해서 해당 문자열로 생성된 심벌이 있는지를 검색하며, 검색에 성공한 경우(있는 경우)에는 해당 심벌 값을 반환하며 검색에 실패한 경우(없는 경우)에는 해당 인수를 키로 새로운 심벌을 만들어 반환한다.

const s = Symbol('dooyeong');
const s1 = Symbol.for('dooyeong');
const s2 = Symbol.for('dooyeong');

console.log(s === s1);	// false
console.log(s === s2);	// false
console.log(s1 === s2);	// true
console.log(s1 === s2);	// true

그냥 Symbol 함수로 만들어진 심볼 값의 경우에는 Symbol의 for메서드를 통해서 만들어진 것과 별개로 동작하여 값을 비교했을 때 false가 반환된다. 만약 하나의 심벌을 만들어서 공유하여 사용하고 싶은 경우에는 Symbol의 for메서드를 사용하면 될 것이다.

 

반면에 keyFor메서드의 경우에는 검색에 성공할 경우에는 for메서드와 동일하게 동작하지만, 검색에 실패할 경우에는 undefined를 반환한다는 차이가 있다.

3.  Symbol 프로퍼티 키

객체의 프로퍼티 키는 문자열, 그리고 심벌 값을 사용할 수 있다고 이전 포스팅(깃헙 블로그 포스팅)에서 얘기한 적이 있다.

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

obj[Symbol.for('mySymbol')]; // 1

위 경우에 심벌 값은 유일무이한 값이기 때문에 절대로 다른 값들과 충돌할 일이 없다. 따라서 이러한 특성을 이용해서 표준 빌트인 객체에 사용자 정의 메서드를 심벌 값으로 정해 후에 추가될 수도 있는 이름 중복을 피할 수도 있다.

 

그리고 Symbol로 선언된 프로퍼티는 for...in문이나 Object.getOwnPropertyNames등의 메서드로 접근할 수 없다.

const obj = {
  [Symbol('mySymbol')]: 1
};

for (const key in obj) {
  console.log(key); // 아무것도 없음
}

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

하지만 완전하게 숨길 수 있는 것은 아니고, getOwnPropertySymbols라는 메서드를 통해서 접근할 수는 있다.

'개인 공부 > JS (자바스크립트)' 카테고리의 다른 글

javaScript - Set과 Map  (0) 2021.06.03
javaScript - 이터러블과 이터레이터  (0) 2021.06.01
Node.js와 Jest 실습  (0) 2021.06.01
javaScript - String  (0) 2021.05.30
javaScript - Date  (0) 2021.05.30
Comments