자바스크립트 symbol은 언제 사용하면 좋을까?

의문이 든 이유

자바스크립트 symbol은 ECMAScript6(2015)에 도입된 7번째 타입이라고 들어는 봤지만, 그다지 깊게 파본적이 없었던 것 같아서 깊게 공부하는 중이다. 생각해 보니 (몰라서 그랬을 수도 있지만) 코딩을 할 때도 적극적으로 사용할만한 상황이 없던 것 같다.

 

하지만 알아두면 나중에 다 쓸 데가 있을 테니 언제 사용하면 좋은지, 사용했을 때의 장점도 한번 정리해 보자.

 

 

일단, symbol이란?

책 <모던 자바스크립트 Deep Dive>에 따르면, symbol에 대한 설명은 아래와 같다.

심볼(symbol)은 ES6에서 도입된 7번째 데이터 타입으로, 변경 불가능한 원시 타입의 값이다. 심볼 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다.

 

 

코드를 통해 알아보자

아래의 두 가지 예시 코드를 통해 symbol을 사용하지 않은 경우와, 사용한 경우를 한눈에 비교해 보자.

 

예시 1: symbol을 사용하지 않은 코드

동서남북 네 가지 방향을 나타내는 코드를 예로 들어보자.

// 동서남북을 나타내는 상수를 정의
// 이때 값 1~4에는 특별한 의미가 없고 상수 이름에 의미가 있음
const Direction = {
    EAST: 1,
    WEST: 2,
    SOUTH: 3,
    NORTH: 4
};

// 변수에 상수를 할당
const myDirection = Direction.EAST;

if (myDirection === Direction.EAST) {
    console.log('You can go there'); // You can go there
}

 

위 예제와 같이 값에는 특별한 의미가 없고, 상수 이름 자체에 의미가 있는 경우가 있다. 이때, 상수 값 1, 2, 3, 4는 변경될 수 있으며, 다른 변수 값과 중복될 수도 있다는 문제가 있다. 게다가 다른 코드에서 동일한 숫자를 사용할 경우 충돌이 발생할 수 있다.

 

음, 그렇다면 이번에는 symbol을 사용해 보완한 코드와 비교해보자.

 

예시 2: symbol을 사용한 코드

// 동서남북을 나타내는 상수를 정의
// 중복될 가능성이 없는 symbol로 상수 값을 생성
const Direction = {
    EAST: Symbol('east'),
    WEST: Symbol('west'),
    SOUTH: Symbol('south'),
    NORTH: Symbol('north')
};

// 변수에 상수를 할당
const myDirection = Direction.EAST;

if (myDirection === Direction.EAST) {
    console.log('You can go there'); // You can go there
}

 

위 코드에서는 변경 및 중복될 가능성이 있는 무의미한 상수 대신,  중복될 가능성이 없는 유일무이한 이름이 명확하게 부여되었다. 생성된 symbol 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이하기 때문에 코드 안정성이 생긴다.

 

이렇게 하면 의미가 코드의 가독성과 유지보수성을 향상시킬 수 있다. 또한 다른 코드에서 동일한 Symbol 값을 만들어도 실제로는 다른 symbol 값이므로 충돌이 발생하지 않는다.

 

 

symbol 사용 시 장점

위의 예시 코드를 미루어 보았을 때, symbol을 사용했을 때의 장점은 크게 세 가지로 볼 수 있다.

 

1. 고유성 보장

Symbol은 항상 고유하며 중복될 가능성이 없는 값을 나타내므로, 실수로 값이 충돌하는 것을 방지한다. 따라서 객체 속성의 키 또는 다른 상황에서 고유한 식별자를 만들 때 유용하다.

 

2. 이름 충돌 방지

Symbol은 이름 충돌을 방지할 수 있으므로 다른 라이브러리나 코드와의 상호작용 시 충돌 가능성이 감소한다.

 

3. 의미 부여

Symbol에 이름을 붙일 수 있으므로 코드를 읽을 때 어떤 역할을 하는지 더 명확하게 표현할 수 있다.

 

 

 

📎 내용 참조

- 책 <모던 자바스크립트 Deep Dive>