객체의 Property 키는 문자형으로 이루어져있다!

Property Key : 문자형

숫자형이나 boolean형으로 만들어도 Object.keys(obj)를 통해서 ["1", "false"]문자형으로 반환되는 것을 알 수 있다.
실제로 접근할 때에도 문자 '1'이나 'false'로 접근할 수 있다.
이렇게 객체의 프로퍼티 키는 문자형으로 가능하지만 또 다른 하나는 심볼형이 있다!

Property Key : 심볼형

Symbol

심볼은 const a = Symbol()로 만들어진다. 이 때 new는 붙이지 않는다. 심볼은 유일한 식별자를 만들 때 사용한다. 예를 들어 a와 b를 symbol로 만들어서 console.log로 찍어보면 생긴건 Symbol()의 형태로 동일하다. 하지만 일치 연산자로 확인해보면 a === b가 false로 나오게 된다!! 자료형은 달라도 내용만 일치하는 동등연산자(a == b)도 false가 나오게 된다.

Symbol : 유일성 보장

심볼은 유일성이 보장된다. 즉, 전체 코드 중에 하나라는 의미이다. 심볼을 만들 때 'id'라는 설명을 붙여줄 수 있다. 설명을 붙여주면 디버깅할 때 편리하다. 문자열을 전달해주면 되는데 이 문자열은 심볼 생성에 어떠한 영향을 미치지 않는다!
만약 설명이 똑같은 걸 또 만들게 되면 어떻게 될까?
생긴 건은 똑같지만 다르다는 것을 알 수 있다.

이제 심볼을 객체의 키로 사용해보자!

id로 심볼을 만든 후에 객체를 사용해본다. 이 때 computed Property 키로 넣어준 후 해당 값을 출력해보면 심볼로 만든 키를 가진 프로퍼티가 존재하는 것을 확인할 수 있다. user[id]도 'myid'로 해당 값이 출력되는 것도 알 수 있다.

그런데 여기서 Object.keys(user)을 하게 되면 ["name", "age"] name이랑 age만 나오게 된다. 즉, Object의 메소드들은 심볼형인 형태는 건너뛰게 된다. 마찬가지로 for in을 사용해도 건너뛰게 된다.

그러면 이 심볼형은 도대체 언제 쓰일 수 있을까?

특정 객체의 원본 데이터는 건드리지 않고, 속성을 추가하고 싶을 때 사용하면 된다! 다른 사람이 만들어놓은 객체에 자신만의 속성을 추가해서 덮어씌우면 안된다. 그렇다고 해서 엄청 길고 이상한 네이밍을 쓰는 것도 좋지 않다. 원본 객체가 어디에선가 Object.keys나 for in으로 사용될 수 있기 때문이다.

Symbol.for() : 전역 심볼

심볼은 이름이 같더라도 다 다른 존재이다. 그런데 가끔 전역변수처럼 이름이 같으면 같은 객체를 가르켜야 할 때가 있다. 이럴 때 사용할 수 있는 것이 Symbol.for()이다!

• Symbol.for()을 사용하면 하나의 심볼만 보장받을 수 있다.
• 없으면 만들고 있으면 가져오기 때문이다.
• Symbol함수는 매번 다른 Symbol 값을 생성하는 데에 비해
• Symbol.for()메소드는 하나의 심볼을 생성해서 키를 통해 같은 Symbol을 공유할 수 있다.

예를 들어, id1과 id2를 만들고 비교해보면 동일하다고 알려준다. for없이 생성한 것과 다르다. 이것을 전역심볼이라고 부르고, 코드 어디에서든 사용이 가능하다!!!
이름을 얻고 싶다면 Symbol.keyFor()를 사용하면 된다. keyFor를 이용해서 id1변수를 넣어주면 생성할 때 적어주었던 이름(id)을 알려준다.

전역 심볼이 아닌 심볼은 keyFor을 사용할 수 없다. 대신 description으로 알 수 있다.

그렇다면 이 심볼은 어떻게 볼 수 있을까?

Object.getOwnPropertySymbols()를 사용하면 심볼들만 볼 수 있다.
또한 Reflect.ownKeys()는 심볼을 포함한 객체의 모든 키를 보여준다.

즉, 심볼을 완전히 숨길 수 있는 방법은 없다. 그런데 사실 대부분의 라이브러리 내장함수 등은 이러한 메소드들을 사용하지 않는다. 그렇기 때문에 유일한 프로퍼티를 추가하고 싶을 때 심볼을 사용하면 된다.

위의 사진처럼 다른 개발자가 만들어 놓은 객체를 활용해서 나만의 프로퍼티를 만들 때 사용하면 된다.
이 때 user[showName]의 출력 값을 보고 싶다면 아래 해당 줄에 user[ShowName]()을 작성해주면 Mike가 출력되는 것을 볼 수 있다!

---

출처)