JavaScript DAY07 (2022.11.09)

/* JavaScript DAY07 2022.11.09 */

/* 심볼 (Symbol) --------------------------------------------------------------------- */
/* Symbol() */
const a = Symbol(); // 유일한 식별자를 만들 때 사용하고, new를 붙이지 않는다.
const b = Symbol();

// 위의 심볼로 선언한 a와 b를 출력해보면 같은 값이 출력된다.
console.log(a);
// 출력: Symbol()
console.log(b);
// 출력: Symbol()

// 하지만 일치 연산자로 비교해보면, false가 나온다.
a === b;
// 출력: false
a == b;
// 출력: false

// 심볼형은 '유일성'을 보장한다. <= (전체의 코드 중 딱 하나라는 말)
// 심볼형의 ()에는 문자열로 설명을 붙여 줄 수 있다.
const c = Symbol('id');
console.log(c);
// 출력: Symbol(id)

// 이러한 심볼형은  객체의 프로퍼티의 키로 사용이 가능하다. 
// [보기 01]--------------------------------------
const d = Symbol('name')
const object = {
  age: 0,
  // 컴퓨티드 프로퍼티를 활용하여 키에 심볼형을 주었다.
  [d]: 'Joonyoung'
};
console.log(object);
// 출력: { age: 0, [Symbol(name)]: 'Joonyoung' }

// 가장 큰 특징으로는 심볼형으로 준 키는, 객체의 메소드를 사용하면 심볼을 건너뛴 결과로 나온다는 점이다.
// 따라서 원본 객체의 데이터를 건드리지 않고, 속성을 추가 할 수 있는 장점이 있다.
Object.keys(object);
// 출력: [ 'age' ]


/* Symbol.for(): 전역 심볼 */
// 각각의 같은 이름이여도 다른 심볼형과는 다르게 '전역 심볼'을 줄 수 있는 함수이다.
// Symbol.for 메소는 하나를 생성한 뒤, 키를 통해 같은 Symbol을 공유한다.
const e = Symbol.for('id');
const f = Symbol.for('id');
console.log(e === f);
// 출력: true
console.log(e == f);
// 출력: true

// keyFor을 이용하여, 변수를 넣어주면 심볼을 만들 때, 적어 준 설명(?)을 알 수 있다.
Symbol.keyFor(e);
// 출력: 'id'

// 또한 전역 심볼이 아닌 심볼은 해당 메소드를 사용할 수 없다.
// 대신 description으로 이름을 알 수 있다. [보기 01 참고]
d.description;
// 출력: 'name'

/* 숨겨진 심볼의 키 보는 법 */
// 심볼을 완전히 숨길 수는 없다. 아래와 같은 방법으로 심볼들만 볼 수 있다. [보기 01 참고]
Object.getOwnPropertySymbols(object);
// 출력: [ Symbol(name) ]

// 또는 객체와 심볼을 동시에 볼 수도 있다. [보기 01 참고]
Reflect.ownKeys(object);
// 출력: [ 'age', Symbol(name) ]


/* 응용해보기 --------------------------------------------------------------------- */
// 다른 개발자가 만든 객체
const another = {
  name: 'Joonyoung',
  age: 30,
};

// 나의 작업
const showName = Symbol('show name');
another[showName] = function(){
  console.log('심볼로 만든 함수');
};

// 사용자가 접속하면 보이는 메세지
for(let key in another){
  console.log(`His ${key} is ${another[key]}.`);
}
// 내가 한 작업이 출력되지 않는 것을 볼 수 있다.
// 출력: 'His name is Joonyoung.' 'His age is 30.'

// 나의 작업한 내용이 잘 나오는 모습을 볼 수 있다.
another[showName]();
// 출력: '심볼로 만든 함수'