Symbol

📌 자료형 Symbol

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

const key = Object.keys(obj);
console.log(keys); // { “1”: “1입니다.“, ”false”: “거짓”}
console.log(obj[“1”]);
console.log(obj[“false”]);

• 객체의 프로퍼티키는 문자형
• 위 예제에서 객체의 프로퍼티 키는 숫자와 불린형
• 하지만 콘솔로 찍어보면 모두 문자형으로 반환된다
• 맨 아래 두 줄 처럼 문자형으로 접근해도 올바른 값을 반환한다

객체의 키로 문자형 외에 사용 가능한 자료형이 심볼(Symbol)
심볼은 유일한 식별자를 만들때 사용한다.

const a = Symbol(); // new를 붙이지 않는다
const b = Symbol();
console.log(a); // Symbol()
console.log(b); // Symbol()

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

• 콘솔로 찍어보면 같은 값으로 보인다
• 하지만 비교 연산자로 대조해보면 false가 찍힌다.

💡 심볼은 유일성을 보장한다.

const id = Symbol(‘id’); // 이와 같이 문자열을 붙여주면 디버깅 시 편하다.
console.log(id);  // Symbol(id)

const id1 = Symbol(‘id’);
const id2 = Symbol(‘id’);
console.log(id1 === id2); // false
console.log(id1 == id2);  // false

• 파라미터 값으로 받는 문자열이 동일해도 다른 값이다.
• 문자열을 전달하는 것은 심볼 생성에 어떠한 영향도 주지 않는다.

const identify = Symbol(‘아이디‘);
const user = {
   name: ‘Mike’,
   age: 30,
   [identify]: ‘myid’
}

console.log(user); // { name: ‘Mike’, age: 30, Symbol(아이디): ’myid’ }
console.log(Object.keys(user)); // [ ‘name’, ‘age’ ]
console.log(Object.values(user)); // [ ‘Mike’, ‘30’ ]
console.log(Object.entries(user)); // [ [‘name’: ‘Mike’], [‘age’: 30] ]

• 심볼형은 Object 메서드를 사용해도 건너뛴다.

const identify = Symbol(‘아이디‘);
const user = {
   name: ‘Mike’,
   age: 30,
   [identify]: ‘myid’
}

for (let key in user) {
   console.log(key);   // name, age
}

• for in문으로 키를 순회해도 Symbol형은 건너 뛴다.

📌 Symbol의 특징

1. 특정 객체에 원본 데이터(키 프로퍼티)를 건드리지 않고 프로퍼티를 추가 할 수 있다.
2. Symbol은 이름이 같더라도 모두 다른 존재이다.
3. 가끔은 전역 변수 처럼 이름이 같으면 같은 객체의 프로퍼티를 바라봐야 할 때가 있다 이 때는 전역 심볼을 사용한다.

📌 Symbol.for() : 전역 심볼

const id1 = Symbol.for(‘id‘);
const id2 = Symbol.for(‘id’);
console.log(`${id1 === id2} 입니다.`); // ’true 입니다.‘

• Symbol.for()는 하나의 심볼을 보장 받는다.
• 없으면 만들고, 있으면 가져오기 때문이다.
• Symbol 함수는 매번 다른 Symbol 값을 생성한다.
• 하지만 Symbol.for() 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유한다.
• Symbol 함수와 다르게 for 메소드를 사용하면 비교연산자로 비교시 동일한 값으로 true를 반환한다.
• 이것을 전역 심볼 이라고 부르며 코드 어디서든 사용가능하다.

📌 Symbol.keyFor() : 전역 심볼의 이름을 알려줌

const id = Symbol.for(‘id’);
console.log(Symbol.keyfor(id));  // ‘id’

• 이름을 얻고 싶다면 Symbol.keyFor() 메서드를 사용
• 파라미터 값으로 변수를 넣어주면 생성할 때 적어뒀던 문자열 이름을 알려줌

📌 description : 일반 심볼의 이름을 알려줌

const name = Symbol(‘Tom’);
console.log(name.description); // ‘Tom’

• 전역심볼이 아닌 심볼은 keyFor()를 사용할 수 없다.
• 대신 위 예제 처럼 description을 사용한다.

📌 숨겨진 Symbol key를 보는법

const id = Symbol(‘id’);
const user = {
    name : ‘Jane’,
    [id]: 1
}

Object.getOwnPropertySymbols(user); // Symbol(id)
Reflect.ownKeys(user); // 심볼형을 포함한 객체의 모든 key를 반환

📌 심볼형을 객체의 키로 추가하기

const hobby = Symbol(‘취미’);

const person = {
   name: ‘Brown’,
   age: 28
}

person[hobby] = ‘축구’;

console.log(person);

📌 Symbol에 메서드 추가하기

const sayName = Symbol(‘sayName’);

const human = {
   name: ‘김한국’,
   age: 30
}

human[sayName] = function() {
  console.log(this.name);
};

human[sayName]();

• 대괄호로 선언하고 대괄호로 호출 해야한다.
• 이렇게 심볼형으로 객체에 키를 추가하는 방식은 다른사람이 작성한 for in문에 영향을 주지 않는다.

💡 심볼은 자료형이다 그냥 문자형이라고 생각하면 쉽다.
객체 원본에 키를 추가 하고 싶을때 이미 모듈화된 기능들에 영향을 미치지 않고 싶을때 사용한다.