📌 property key : 문자형

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

// key 반환
Object.keys(obj) // [ '1', 'false' ]
// 값에 접근
obj['1'] // '1입니다.'

• 객체의 key는 숫자형, boolean 형 가능

  • 하지만, Object.keys() 나 값에 접근할 때

    → 문자형으로 나오거나, 접근해야 함.
    

📌 사용하는 경우

유일한 식별자 만들 때

• 예시 코드
  

    const a = Symbol() // new를 붙이지 않습니다.
    const b = Symbol()
    
    // 생긴 것은 같음
    console.log(a) // Symbol()
    console.log(b) // Symbol()
    
    // 일치 연산자를 보면 false 나옴
    console.log(a==b)  // false (동등 일치 연산자(내용만 일치 && 자료형 다른 것ok)도 불일치)
    console.log(a===b) // false

📌 유일성 보장

전체 코드 중 딱 하나

• 설명 붙여주기 가능

  • 방법: 문자열 전달(symbol 생성에 영향 x)

  • 장점

    • 디버깅 편해짐

• 예시 코드
  

    const id = Symbol('id') 
    const id2 = Symbol('id')
    
    // 생긴 것은 같음
    console.log(id)  // Symbol(id)
    console.log(id2) // Symbol(id)
    
    // 사실 다름
    console.log(id==id2)  // false
    console.log(id===id2) // false

📌 property key : 심볼형

🔹 심볼형이 잘 나오는 경우 vs 안 나오는 경우

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

// 심볼: 잘 나옴
console.log(user) // { name: 'Mike', age: 30, [Symbol(id)]: 'myid' }
console.log(user[id]) // 'myid'

// 심볼: 잘 안 나옴
Object.keys(user)    // [ 'name', 'age' ]
Object.values(user)  // [ 'Mike', 30 ]
Object.entries(user) // [ [ 'name', 'Mike' ], [ 'age', 30 ] ]
for(let a in user){
  console.log(a)     // 'name', 'age'
}

🔹 사용하는 경우

객체의 원본 데이터 변경 x + 속성 추가

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

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

// 안되는 경우
// 이유: 내가 추가한 프로퍼티가 어디서 어떻게 사용될지 모름 (이미 user를 사용할 가능성 有)
user.name = 'Tom'; // 다른 사람이 만든 속성에 덮어 씀

📌 전역 심볼(Symbol.for())

🔹 특징

• 하나의 심볼만 보장받을 수 있음

  → 없으면 만들고, 있으면 가져옴
  

• 하나를 생성한 뒤, key를 통해 같은 Symbol 공유

  ↔ Symbol 함수: 매번 다른 Symbol 값 생성
  

• 코드 어디에서든 사용 ok

---

🔹 Symbol.keyFor()

이름 확인

🔹 예시

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

// 동일
console.log(id1 === id2) // true 

// 이름을 얻고 싶다면
Symbol.keyFor(id1) // 'id'

📌 description

이름 파악

• 예시
  

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

📌 숨겨진 Symbol key 보는 법

• Symbol을 완전히 숨길 수 있는 방법은 없음

---

※ 대부분 사용하지 않는 메소드

🔹 Object.getOwnPropertySymbols()

Symbols만 볼 수 있음

🔹 Reflect.ownKeys()

객체의 모든 key 보여줌(Symbols 포함)

🔹 예시 코드

const id = Symbol('id');

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

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

📌 예시 코드

// 다른 개발자가 만든 객체
const user = {
  name: 'Mike',
  age: 30,
}

// 내가 작업
// 잘못된 코드 (사용자에게 노출됨) : user.showName = function() {}
const showName = Symbol('show name')
user[showName] = function() {
  console.log(this.name)
}
user[showName](); // 'Mike'

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

---

참고

• 코딩앙마_자바스크립트 중급