[JS] 심볼 ( Symbol )

// property key : 문자형
const obj = {
  1: '1 입니다',
  false : '거짓',
}

Object.keys(obj); // ["1", "false"]

❗️ 숫자형, 불린형을 Object.keys로 프로퍼티 keys를 가지고 오면 1, false가 문자형으로 반환 

🖍️ 심볼 ( Symbol )

• 유일한 식별자를 만들 때 사용 (유일성 보장)

const a = Symbol();  // new를 붙이지 않음
const b = Symbol();

console.log(a);  // Symbol()
console.log(b);  // Symbol()

a == b;  // false
a === b;  // false

a 와 b console로 확인하면 생긴건 같지만 동등/일치 연산자로 확인하면 false가 나옴

-----------------------------------------------------------------

// 심볼을 만들때 설명을 붙여줄 수 있음 (디버깅시 편리함)
const id = Symbol('id');
const id2= Symbol('id');

> id
Symbol(id)

> id2
Symbol(id)

id == id2;  // false
id === id2;  // false

-----------------------------------------------------------------
  
// property key : 심볼형  
  
const id = Symbol('id');
const user = {
  name : 'Mike';
  age : '30',
  [id] : 'myid',
}
  
> user
{name: "Mike", age: 30, Symbol(id): myid}
> user[id]  // "myid"

object.keys(user);  // ["name", "age"]
object.values(user);  // ["Mike", 30]
object.entries(user);  // [Array(2), Array(2)]
for(let a in user){}

❗️ key가 Symbol형인 property는 건너뜀
❗️ for...in 도 건너뜀

-----------------------------------------------------------------

const user = {
  name : 'Mike',
  age : 30,
}  

const id = Symbol('id');
user[id] = 'myid';

user.name = 'myname';

❗️특정위치에 원본은 건드리지 않고 속성을 추가할 수 있음

💟 Symbol.for() : 전역 심볼

• 하나의 심볼만 보장받을 수 있음
• 없으면 만들고, 있으면 가져오기 때문
• Symbol 함수는 매번 다른 Symbol값을 생성하지만,
• Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

id1 === id2;  // true

// 이름을 넣고 싶다면 .keyFor 사용
// 전역 심볼이 아니면 keyFor 사용 ❌
Symbol.keyFor(id1)  // "id"

// description

const id = Symbol('id 입니다');
id.description;  // "id 입니다"

💟 숨겨진 Symbol Key 보는 법

const id = Symbol('id');
const user = {
  name : 'Mike',
  age : 30,
  [id] : 'myid',
}

Object.getOwnPropertySymbols(user);
> [Symbol(id)]

// 객체의 모든 key를 보여줌
Reflect.ownKeys(user); 
> ["name", "age", Symbol(id)]

⭐️ 대부분 라이브러리 내장 함수는 이러한 메소드는 사용하지 않으니 유일한 프로퍼티를 추가하고 싶을때 심볼 사용하기

🔥 예제

// 다른 개발자가 만들어 놓은 객체
const user = {
  name: "Mike",
  age: 30,
};

...

// 내가 작업
//user.showName = function () {}; ❌ 이렇게 작성하지 말기
// His showName is function () {}
const showName = Symbole('show name');
user[showName] = function () {
  console.log(this.name);  // Mike
}

user[showName]();

...

// 사용자가 접속하면 보는 메세지
for (let key in user) {
  console.log(`His ${key} is ${user[key]}`)
  // His name is Mike.
  // His age is 30.
}