[es6] Symbol 이란 ..? 자세히 알아보자

자바스크립트 es6 에서 Symbol 이라는 원시 데이터 유형을 추가하였습니다
자바스크립트에는 밑에와 같은 원시데이터를 가지고있죠

1.Boolean
2.Null
3.Undefined
4.Number
5.String
6.Symbol +new

 

Symbol()

Symbol([description])

Symbol은 고유한 데이터입니다.
여러개의 Symbol에 동일한 description을 넣어도 각 다른 존재로 인식됩니다.

const a = Symbol("id");
const b = Symbol("id");

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

같은 문자열을 넣었는데 결과 값이 false 로 나오죠?
Symbol은 고유한 존재 이기 때문에 문자열이 같아도 영향을 미치지 않습니다

 

Object key 로 사용

객체에서 Symbol로도 객체의 property를 만들 수 있습니다

let obj = { 
  name: "cy"
};

let id = Symbol("id");

obj[id] = 1;

console.log( obj[id] )

 

Symbol을 key를 사용하여 데이터에 접근할 수 있습니다
그러면 string을 사용하면 되지 왜 굳이 Symbol을 사용할까요?
만약 obj객체에 name 속성 외에 다른 속성이 무수히 있다고 칩시다.
협업을 하다가 한 팀원이 obj객체에 name 속성이 있는지 모르고
또 name 속성을 추가해서 덮어씌어버린다면 ...? 
코드가 오류가 나버리겠죠.

이 속성 값은 건들지마! 하고 싶을 경우 Symbol을 사용합니다.
같은 속성이름으로 값을 추가하더라도 Symbol은 다른 존재로 인식 하기 때문에 충돌이 없겠죠?
string 값으로 속성을 추가 하면 바로 덮어 씌어버릴테니깐요.
아것이 string 과 symbol의 차이입니다.

 

 

Object literal 안에서의 Symbol

객체 리터럴에서 Symbol을 사용하려면 [] 안에 써줘야 합니다.
그리고 상수개념으로 쓰이기 때문에 대문자를 사용합니다.

const ID = Symbol("id");

let user = {
  name: "John",
  [ID]: 123
};

 

 

Symbol은 열거되지 않는다 skip!

보통 객체를 loop돌고 싶을때 for in 문을 많이쓰죠 ?
하지만 Symbol은 for in 문과 Object.keys 에서 열거되지 않습니다.

const ID = Symbol("id");
let obj = {
  name: "cy",
  [ID]: 123
};

for(key in obj) console.log(key) // name

 

 

Object.getOwnPropertySymbols()

symbol만 열거해주는 메소드 입니다.

Object.getOwnPropertySymbols(obj).forEach(el=>console.log(el))

 

 

 

Symbol.for()

Symbol을 같은 description으로 어느 변수에 동일하게 할당하고 싶은경우 사용합니다.

const ID = Symbol.for("x1234"); 

const ID2 = Symbol.for("x1234");

console.log(ID === ID2) // true

 

위의 코드를 보면 변수 ID에서 Symbol.for를 호출 할 경우 안에 문자열 "x1234"를 전역에서 찾습니다.
ID 변수 시점에선 동일한 문자열이 없으니 새 Symbol을 만듭니다.
ID2변수는 해당 문자열을 ID 변수가 가지고 있으니 그대로 할당해서 반환하는거죠

 

 

 

Symbol.keyFor()

keyFor은 Symbol.For() 의 키값을 반환해줍니다.
그냥 Symbol은 출력이 안됩니다.

const a = Symbol.for('안녕하세요')
console.log(Symbol.keyFor(a))//'안녕하세요'