코딩앙마 자바스크립트 중급 강의 4. 심볼

객체 프로퍼티의 키는 문자형

---

심볼(Symbol)

유일성 보장

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

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

console.log(a); // Symbol()
console.log(b); // Symbol() 콘솔로 찍어보면 똑같은 값이 나옴

// 그러나
// a === b; false
// a == b; false 임

 

const id = Symbol('id'); // 'id'와 같은 설명을 붙여줄 수도 있음

문자형으로 설명을 붙여줄 수도 있음 > 디버깅할 때 편함

설명은 Symbol 생성에 영향을 미치지 않음

---

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

// {name: "Mike", age: 30, Symbol(id): "myid"}

심볼을 키에 계산된 프로퍼티로 넣고 콘솔을 찍어보면 잘 나옴

 

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

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

keys메소드처럼 메소드들을 사용하면 심볼을 넣은 프로퍼티를 건너 뜀

> 원본 데이터는 건드리지 않고 속성을 추가할 수 있음

 

남이 쓴 데이터를 덮어쓰면 안됨

>만약 원본 데이터가 어떤 메소드로 순회하면서 데이터를 사용하고 있다면 내가 덮어 쓴 프로퍼티가 어디서 튀어 나올지 모르기 때문

 

Symbol.for() 전역 심볼

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

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

Symbol 함수는 매번 다른 Symbol 값을 생성하지만 Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

코드 어디에서든 사용할 수 있음

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

id1 === id2; // true

---

Symbol.keyFor()

변수를 넣으면 심볼을 만들 때 생성할 때 적어두었던 이름을 알 수 있음

Symbol.keyFor(id1) // "id"

 

전역심볼이 아닌 심볼은 keyFor()을 사용할 수 없음

대신 description 사용

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

id.description; // "id 입니다."

---

사실 심볼을 완전히 숨길 수 있는 방법은 없음

 

Object.getOwnPropertySymbols()

심볼들만 볼 수 있음

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

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

 

Reflect.ownKeys()

심볼형 키를 포함한 객체의 모든 키를 보여줌

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

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

 

대부분 라이브러리들은 이런 메소드를 사용하지 않음

유일한 프로퍼티를 추가하고 싶을 때 심볼 사용 추천

---

원본 데이터를 건드리지 않고 속성을 추가

 

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

// 많은 코드

// 내가 작업
const showName = Symbol('show name');
const [showName] = function () {
  console.log(this.name);
};

user[showName](); // Mike

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

// 출력
// Mike
// His name is Mike.
// His age is 30.