[JS 톺아보기] 심볼형

2024년 12월 12일

5분

심볼형

자바스크립트에서는 객체의 속성으로 문자열 뿐만 아니라 심볼형이라는 것도 지정할 수가 있다. 숫자, 불린 모두 안되고 문자형과 심볼형만 가능하다. 심볼값이란 무엇이고 이점이 무엇이 있을지 알아봅시다.

심볼

심볼(symbol)은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. Symbol() 을 사용하면 만들 수 있다.

let id = Symbol();

심볼을 만들 때 심볼 설명을 붙일 수 있다. 디버깅 시 유용하다.

let id = Symbol("id 입니다.");

description으로 설명을 확인할 수 있다.

let id = Symbol("id 입니다.");
id.description // "id 입니다."

💡 유일성 보장

심볼은 유일성이 보장되는 자료형이다. 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다르다. 심볼의 설명은 어떤 것에도 영향을 주지 않는 이름표 역할만을 한다.

let id1 = Symbol("id");
let id2 = Symbol("id");
 
id1 == id2; // false
id1 === id2 // false

심볼 사용 예시

우선 심볼을 만들고 객체 속성으로 지정해보자.

const id = Symbol('id')
const user = {
    name: 'Mike',
    age: 30,
    [id]: 'myid'
}
 
console.log(user) //{name: "Mike", age: 30, Symbol(id): "myid"}
console.log(user[id]) // "myid"

여기까지만 봤을 때 문자열로 지정하는 것과 아무런 차이가 없어보이지만 Object.keys(user) 를 사용하면 결과가 조금 달라진다.

Object.keys(user); // ["name", "age"]

id라는 속성이 보이지 않는 것을 확인할 수 있다. 이 외에도 Object.values(), Object.entries() 이런 메서드들은 key가 심볼형인 것들은 건너 뛴다. (이 외에도 for let a in user 와 같은 문법도 건너뛰게 된다.)
숨겨진 심볼 속성을 보려면 Object.getOwnPropertySymbols() 를 사용할 수 있다.

const id = Symbol("id");
const user = {
    name: 'Mike',
    age: 30,
    [id]: 'myid'
}
 
Object.getOwnPropertySymbols(user); // [Symbol(id)]

문자형, 심볼형 모두를 확인하려면 Reflect.ownKeys() 를 사용할 수 있다.

Reflect.ownKeys(user) // ["name", "age", Symbol(id)]

💡 왜 쓸까?

심볼형으로 객체를 만들면 꽁꽁 숨겨지게 된다. 그럼 심볼의 이점이 무엇일까? 특정 객체의 원본 데이터는 건드리지 않고 속성을 추가할 수 있다. 코드로 예시를 살펴보자.

심볼을 사용하지 않은 경우

// 다른 개발자가 만든 객체
const user = {
    name: "Mike",
    age: 30,
}
 
// 내가 작업한 코드
user.showName = function(){}
 
// 사용자가 접속하면 보는 메시지
for(let key in user){
    console.log(`His ${key} is ${user[key]}.`);
}
 
// 콘솔
His name is Mike
His age is 30.
His showName is function () {}. // 원치 않는 정보까지 출력하게 된다.

사용자가 로그인하면 name과 age만 보여주고 싶지만 showName() 까지 출력된다.

심볼을 사용한 경우

// 다른 개발자가 만든 객체
const user = {
    name: "Mike",
    age: 30,
}
 
// 내가 작업한 코드
// user.showName = function(){}
user[showName] = function(){
    console.log(this.name);
}
 
// 사용자가 접속하면 보는 메시지
for(let key in user){
    console.log(`His ${key} is ${user[key]}.`);
}
 
// 콘솔
His name is Mike
His age is 30.

다른 개발자가 만든 코드에도 영향을 미치지 않고 메서드를 추가했다. 이렇게 하면 원래 user의 어떤 메서드가 있는지, 덮어쓰게 되는지 고민할 필요도 없게 된다.

javascript info