[JS] 심볼 Symbol

 

 

객체 프로퍼티 키 => 문자형

숫자형이나, 불리언으로 만들어도 문자형으로 반환된다.

const obj = {
  1: "1입니다.",
  false: "거짓",
};

Object.keys(obj); // ["1", "false"] 문자형으로 반환된다.

console.log(obj["1"]); // "1입니다."
console.log(obj["false"]); // "거짓"
// 접근할 때도 문자형으로 작성해야 함

 

💡 심볼 Symbol

유일한 식별자를 만들 때 사용

const a = Symbol();
const b = Symbol();

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

 

유일성을 보장한다! => 전체 코드 중 하나라는 것.

const id = Symbol("id"); // 괄호 안은 설명이라고 보면 된다. 디버깅할 때 편하다.
const id2 = Symbol("id"); // 설명은 같지만 id !== id2

 

프로퍼티 키를 심볼형으로 만들어보자.

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

console.log(user); // {name: 'aoto', age: 30, Symbol(id): 'myid'}
console.log(user[id]); //myidd

console.log(Object.keys(user)); // ['name', 'age']
// Object.values()
// Object.entries()
// for(let a in user){} 위 애들은 심볼형 값을 건너뛴다.

이는 나중에 객체에 프로퍼티를 추가할 때 사용한다. key 를 유일하게 만들기 위해!

 

💡 Symbol.for() : 전역 심볼

Symbol 함수는 매번 다른 Symbol 값을 생성하지만,

Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유한다.

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

// id1 === id2 >> true

// 심볼 이름을 알고싶다면
Symbol.keyFor(id1); // "id"

// 전역이 아닌 그냥 심볼의 이름을 알고싶다면
id.description; // "id"

 

숨겨진 Symbole key 보는 법

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

// 심볼형 포함 모든 키를 보고싶다면
Reflect.ownKeys(user); // ["name", "age", Symbol(id)]

 

활용!

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

// 내가 작업
// user.showName = function () {}; // her showName is function () {}.
// 이럴 때 심볼을 만든다.
const showName = Symbol("show name");
user[showName] = function () {
  console.log(this.name);
};

user[showName](); // aoto

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

>> 원래 user에 showName이라는 메서드가 있었는지 고민할 필요가 없어진다.

>> 프로퍼티를 덮어쓸 일도 없다.

 

 

 

🔗 https://youtu.be/E9uCNn6BaGQ?si=DdmOzsPWhb04J5PF