Frontend/js

[ js ] symbol

IT grow. 2023. 10. 2. 20:08
반응형

Symbol

원시 값을 반환하는 내장 객체이며 , 객체에 속성을 추가할 경우 혹은 고유한 키를 부여하여 다른 코드와 충돌하지 않게 하기 위하여 사용됩니다.


심볼 생성시 고유한 Symbol 생성

 

const sym1 = Symbol();
const sym2 = Symbol("bug");
const sym3 = Symbol("bug");

위 코드는 세개의 심볼을 생성하지만 , 심볼 호출 시 새로운 심볼을 생성합니다.

 

Symbol("bug") === Symbol("bug"); // false

그러므로 위 코드와 같이 엄격한 비교 연산자로 비교시 "false"의 결과값을 리턴하는 것을 확인할 수 있습니다.

 

const sym = new Symbol(); // TypeError

또한 , 새로운 심볼 값을 만들때 명시적으로 래퍼 객체를 생성하는 걸 방지합니다.


Symbor.keyFor

 

⁠const sym1 = Symbol.for("bug");
console.log(`${Symbol.keyFor(sym1)}`);
⁠
-- > bug 

const sym2 = Symbol("bug");
console.log(${Symbol.keyFor(sym2)});
⁠
-- > undefined 

Symbol.for() 함수로 생성된 Symbol() 은 키를 가지고 있지만 , Symbol() 함수로 생성된 Symbol()은 키가 존재하지 않습니다.


typeof Symbol

 

typeof Symbol() === "symbol";
typeof Symbol("bug") === "symbol";
typeof Symbol.iterator === "symbol";

심볼 타입 변환시 다음과 같은 유의사항이 존재합니다.

1. 심볼을 숫자 변환시 TypeError
2. ⁠엄격하지 않은 동등 연산 시 , Object(sym) == sym // true
3. Symbol("bug") + "bar" // TypeError -> 심볼을 문자열로 변환할 수 없습니다.

for ... in Symbol

 

const obj = {};

obj[Symbol("bug")] = "bug";
obj[Symbol.for("bug2")] = "bug2";
obj["bug3"] = "bug3";
obj.bug4 = "bug4";

for (const i in obj) { 
    console.log(i);
    // "bug3" "bug4"
}

심볼은 for ... in 순회에 열거되지 않습니다.


JSON.stringify(Symbol)

 

JSON.stringify({[Symbol("bug")] : "bug"});

// '{}'

JSON.stringify() 는 심볼 키 속성을 완전히 무시합니다.

 


Object.getOwnPropertySymbols()

 

const obj = {};
const sym = Symbol();
obj[sym] = "symValue";
obj.bug = "bugValue";

Object.getOwnPropertySymbols(obj);
// [Symbol()]

⁠Reflect.ownKeys(obj);
// [ "bugValue" , Symbol() ] 

객체의 Symbol 타입인 키를 추출하기 위해서는 Object.getOwnPropertySymbols() 함수를 사용합니다.

모든 객체의 키를 배열로 추출해야 할 경우에는 Reflect.ownKeys() 함수를 사용합니다.

반응형