4. 심볼 (Symbol)

const obj = {
	1: '숫자1',
    false: '거짓',
}

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

• 숫자형, 불린형도 객체의 key가 될 수 있음 --> 문자형으로 반환됨
• 접근시에도 문자형으로 취급 : obj['1']

객체의 프로퍼티 키는 문자형, 심볼형 가능

심볼

• 유일한 식별자를 만들 때 사용 -> 유일성 보장
• new 키워드 붙이지 않음
• console로 출력 시 생긴 모양은 똑같지만 a 와 b는 다른 변수임.
• 심볼 생성 시 설명을 붙여줄 수도 있음 -> 디버깅할때 편함
  • const id = Symbol('id');
  • 설명이 똑같은 심볼을 또 만들어도, 두 변수는 다르게 취급.

const a = Symbol();
const b = Symbol();
console.log(a, b)
// Symbol() Symbol()
a === b  // false
a !== b  // true
a == b  // false

//////////

// 설명이 똑같은 심볼을 또 만들어도, 두 변수는 다르게 취급.
const id = Symbol('id');
const id2 = Symbol('id');
console.log(id, id2);
// Symbol(id) Symbol(id)
id == id2  // false

심볼형 property key 생성

const id = Symbol('id');
const user = {
  name : 'Mike',
    age : 30,
    [id]: 'myId',  // computed property key
}
console.log(user);
// {name: 'Mike', age: 30, Symbol(id): 'myId'}

Object.keys(user);
// ['name', 'age']

• Object.keys(), Object.values(), Object.entries(), for ... in -> key가 심볼형이 프로퍼티는 건너뜀
• 심볼형 key 프로퍼티의 사용 : 특정 객체의 원본 데이터는 건들이지 않고, 속성을 추가할 수 있음

전역 심볼 : Symbol.for()

• 전역객체처럼 하나의 이름으로 어디서든 사용 가능
• 하나의 심볼만 보장받을 수 있음
• 없으면 만들고, 있으면 가져옴
• Symbol()은 매번 다른 Symbol값 생성
• Symbol.for()은 심볼 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

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

console.log(id1 === id2);
// true

Symbol.keyFor(id1);
// 'id'

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

• Symbol.keyFor(변수) : 전역심볼의 이름 가져옴
• Symbol.description : 전역심볼이 아닌 심볼의 이름 가져옴

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

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

Reflect.ownKeys(user)
// ['name', 'age', Symbol(id)]

• Object.getOwnPropertySymbols() : 심볼키만 볼 수 있음
• Reflect.ownKeys() : 심볼형 키를 포함한 객체의 모든 키를 볼 수 있음
• 대부분의 라이브러리, 내장함수는 위 메소드를 사용하지 않기 때문에 유일한 프로퍼티를 추가하고 싶을 때 심볼을 사용하면된다!

---

---

심볼 사용 예시

// 다른 개발자 작성 코드
const user = {
  name : "MIKE", 
  age : 30,
}

// 내가 모르고 이후에 작업함
// user.showName = function(){};
// 다른 사람이 개발한 코드에 내 작업물이 섞여 예상하지 못한 결과가 나올 수 있음.

// 심볼 이용하여 작업
const showName = Symbol('show name');
user[showName] = function(){
  console.log(this.name);
}

user[showName]();


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


/* 결과
"MIKE"
"my name is MIKE."
"my age is 30."
*/

• user객체에 새로 추가하고 싶은 이름의 메소드가 있는지 고민하지 않고 추가할 수 있음
• 원래 있던 코드와 충돌이 나지 않음