[JS] 심볼(symbol)은 무엇이고 하는 역할은?

2033 단어 JavaScriptJavaScript

심볼

ES6에서 '심볼(symbol)'이라는 원시 자료형이 추가되었습니다. 심볼은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용할 수 있습니다.

Symbol()을 사용하여 심볼값을 만들 수 있습니다.

const person = Symbol('철수');
console.log(person);
// Symbol(철수)

심볼의 고유성

앞서 말했듯이 심볼은 고유,유일하다고 했는데, 같은 값을 가진 심볼을 만들면 어떻게 되는지 코드를 통해 살펴 봅시다.

const me = Symbol('철수');
const clone = Symbol('철수');

console.log(me == clone);
// 출력 : false

심볼 값은 동일하지만, 각 심볼은 고유하기때문에 동일 연사자(==)로 비교 시 false가 반환되는 것을 확인할 수 있습니다.

심볼이 객체 속성일때

심볼을 사용해서 객체 속성에 대한 식별자를 만들 수 있습니다.

const people = {
	"철수" : "friend",
    "영미" : "friend",
    "철수" : "brother",
};

for (person in people) {
	console.log(person)
}
// 출력 : 철수
		 영미

people 객체에서 이름이 같은. 즉, 속성이 같을때 겹치는 것을 피하기 위해서 심볼을 사용할 수 있습니다.

const people = {
	[Symbol("철수")] : "friend",
    [Symbol("영미")] : "friend",
    [Symbol("철수")] : "brother",
};

for (person in people) {
	console.log(person)
}
// 출력 : undefined

예상과 다르게 출력이 undefined 입니다. 그 이유는 심볼은 for...in에서 배제되게 됩니다. 열거 가능하지 않기때문에 심볼에 대해서 반복을 할 수 없습니다.

그래서 객체의 속성들의 배열을 얻는 방법이 존재합니다.
Object.getOwnPropertySymbols()

const people = {
	[Symbol("철수")] : "friend",
    [Symbol("영미")] : "friend",
    [Symbol("철수")] : "brother",
};

const symbols = Object.getOwnPropertySymbols(people);
console.log(symbols);
// 출력 : (3) [Symbol(철수), Symbol(영미), Symbol(철수)]

배열이기때문에 속성에 접근을하기 위해서는 map을 사용하면 됩니다.

const symbols = Object.getOwnPropertySymbols(people);
const value = symbols.map(symbol => people[symbol]);
console.log(value);
// 출력 : 
        (3) ['friend', 'friend', 'brother']
          0: "friend"
          1: "friend"
          2: "brother"
          length: 3

좋은 웹페이지 즐겨찾기