4. JavaScript Symbol을 이해하고 사용하는 방법

JavaScript Symbol

JavaScript의 데이터 타입 중 하나인 심볼(Symbol)에 대해 알아보겠습니다. JavaScript Symbol은 유일하고 변경 불가능한 데이터 타입이며, 주로 충돌 위험이 없는 객체 속성의 키로 사용됩니다.

1. JavaScript Symbol 생성

JavaScript에서 심볼은 Symbol() 함수를 통해 생성할 수 있습니다. 심볼은 각각 유일하므로, 같은 함수로 여러 심볼을 생성하더라도 서로 다릅니다.

javascript

<code>const a = Symbol();
const b = Symbol();
console.log(a === b); // false
</code>

위의 예에서는 두 개의 심볼 ‘a’와 ‘b’를 생성하고 비교하였습니다. 두 심볼이 동일한 Symbol() 함수로 생성되었음에도 불구하고, 두 심볼은 서로 다르기 때문에 결과는 ‘false’입니다.

2. JavaScript Symbol과 속성 키

심볼은 객체 속성의 키로 사용할 수 있습니다. 이런 경우, 해당 속성은 심볼을 통해 만들어진 고유의 속성이 되며, 일반적인 방법으로는 접근할 수 없습니다.

javascript

<code>const id = Symbol('id');
const user = {
  name: 'Mike',
  age: 30,
  [id]: 'myId'
}
console.log(Object.keys(user)); // ["name", "age"]
</code>

이 예에서 Object.keys() 함수는 객체의 속성 키를 배열로 반환하지만, 심볼 키는 무시됩니다.

3. 전역 심볼과 Symbol.for()

전역 심볼 레지스트리는 특정 키와 연결된 심볼을 생성하고 재사용하는 기능을 제공합니다. Symbol.for(key) 함수는 주어진 키를 갖는 심볼을 반환합니다. 키에 해당하는 심볼이 이미 있으면 그 심볼을 반환하고, 그렇지 않으면 새로운 심볼을 생성합니다.

javascript

<code>const id1 = Symbol.for('id');
const id2 = Symbol.for('id');
console.log(id1 === id2); // true
</code>

이 예에서 Symbol.for() 함수는 ‘id’라는 키를 갖는 심볼을 두 번 요청했지만, 동일한 심볼을 반환했습니다. 따라서 두 심볼은 동일합니다.

4. JavaScript Symbol 활용 예제

심볼은 객체의 속성을 숨기는 데 유용하게 사용할 수 있습니다. 이는 심볼로 생성된 속성이 일반적인 속성 열거에서 제외되기 때문입니다.

javascript

<code>// 다른 개발자가 만들어 놓은 객체
const user = {
  name: 'Mike',
  age: 30
}

// 내가 작업
const showName = Symbol("showName");
user[showName] = function() {
  console.log(this.name);
};

// 사용자가 접속하면 보는 메세지
for (let key in user) {
  console.log(`His ${key} is ${user[key]}.`);
}

user[showName](); // Mike
</code>

이 예에서 showName 심볼을 키로 가지는 속성은 객체를 순회하는 반복문에서 무시되므로, 이 메소드를 호출하려면 명시적으로 user[showName]()와 같이 호출해야 합니다.

심볼은 JavaScript에서 강력한 도구입니다. 유일한 속성 키를 생성하여 객체를 안전하게 확장하거나, 충돌 없이 객체를 조작하는 데 사용할 수 있습니다. [공식문서]

이러한 심볼의 기능을 이해하고 잘 활용하면 JavaScript 코드를 더욱 효율적으로 작성할 수 있습니다. 다음 번에는 다른 JavaScript의 주요 기능에 대해 더 깊이 있게 살펴보도록 하겠습니다.[블러그]