[JavaScript] Symbol 이용하기

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

이번 시간엔 ES6에서 새로 추가된 Type인 Symbol에 대해 알아보자.

 

Symbol?

Symbol은 객체의 고유한 멤버를 생성하는 방법을 고안하기 위해 만들어졌다.

for in 반복문이나 Object.keys와 같은 기존 메서드를 변경 과정 없이 새로이 객체에 멤버를 추가하는 작업이 필요했다.

ES6부터 Symbol이 추가되면서 기존 객체에 변동이 없이 객체가 Priavete Key and Value를 가질 수 있게 되었다.

 

특성

Symbol은 다음가 같은 특성을 가진다.

 

1. Symbol은 항상 고유한 값을 가진다.
2. Symbol은 new를 통해 생성할 수 없다.
3. Symbol은 Description을 가진다.
4. Symbol이 객체의 키로 사용되면 for-in 루프를 통해 키를 가져올 수 없다.

Symbol 생성

Symbol은 다음과 같이 생성을 할 수 있다.

 

const symbol1 = Symbol();
const symbol2 = Symbol('symbol');

 

Symbol을 호출할 때 인자를 통해 Description을 지정할 수 있다.

 

Symbol의 고유값 확인

Symbol의 특성중 고유하다는 것을 위에서 서술했다.

다음의 예시를 통해 확인을 할 수 있다.

 

console.log(Symbol('symbol') === Symbol('symbol')); //false
console.log(Symbol() === Symbol()); //false

 

서로 똑같은 Symbol을 만드나, Description이 같으나 반환되는 값은 false이다.

Java로 치면 같은 클래스를 각각의 독립된 객체로 생성해서 비교하면, 메모리가 다르다는 것과 비슷하다 생각하면 된다.

 

Symbol 활용하기

이번엔 Symbol과 객체를 같이 이용해보도록 하자.

 

다음과 같은 객체와 Symbol을 생성하자.

 

const age = Symbol('User Age.');
const user = {
    name : 'DHL'
};

 

age의 Description은 "User Age." 로 설정했다.

이번엔 user에 age 키를 추가해서 보도록 하자.

 

user[age] = 27;
console.log(user[age]); // 27

 

객체에 새로운 키가 추가된 듯 Log를 찍으면 27이 출력된다.

그러나 for in을 통해 user 객체의 Key를 조회해보도록 하자.

 

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

 

출력은 Name만 나온다. 그 이유는 위에서 특성을 서술했듯이, Private 한 특성을 가지고 있어 단순히 호출하면 값을 가져올 수 없다.

 

값을 가져오기 위해선 Object.getOwnPropertySymbols()를 이용해야한다.

 

const symbolProperties = Object.getOwnPropertySymbols(user);
console.log(symbolProperties); // [ Symbol(User Age.) ]
console.log(user[symbolProperties[0]]); // 27

 

user 객체를 인자로 설정하여 symbolProperties를 호출하면, 위에서 정의한 Symbol의 Description이 나온다.

이후 user객체에 symbolProperties [0]을 호출하면 Symbol로 지정한 값을 가져올 수 있게 된다.