Javascript - Symbol

목차

1. Symbol형 데이터

2. 숨김 프로퍼티(속성)

3. 전역 심볼

 

1. Symbol형 데이터

 

 

심볼형 데이터란, 유일한 식별자를 만들고 싶을 경우에 사용한다.

 

심볼형을 만들기 위해서는 아래와 같은 내장 함수를 호출해야한다.

Symbol( );

 

Symbol의 리턴값은 심볼형 데이터를 만들어 낸다.

 

인자값으로 설명(description)을 넣어줄 수 있고, 내장 프로퍼티 description을 이용하여 값만 뽑을 수도 있다.

 

let user = Symbol("Char1ey")

console.log(user.description) // "Char1ey"

 

심볼형 데이터는 고유한 값이기 때문에 같은 인자값을 넣어주어도 서로 다른 값으로 표현된다.

 

let user = Symbol("Char1ey")
let name = Symbol("Char1ey")

console.log(user === name) // false

 

※ 심볼형 데이터는 다른 데이터 타입과 다르게 자동으로 형변환이 일어나지 않는다.

 

아래의 경우에는  숫자 1이 문자형 데이터로 형 변환이 되었지만,

심볼형은 형 변환을 직접해주지 않으면 형 변환이 자동으로 일어나지 않는다.

let num = 1
let str = a

let str2 = num + str

console.log(typeof str2) // string

 

 

 

2. 숨김 프로퍼티(속성)

 

 

심볼 데이터는 객체의 키값으로 사용이 가능하다.

 

만약 다양한 라이브러리를 사용해서 코드를 작성할 때,

 

라이브러리(혹은 서드파티 코드, 다른 파일)에서 가져온 데이터에 프로퍼티(속성)를 추가해야 하는 상황이 있다고 가정해보자.

 

라이브러리에서 가져온 코드에 함부로 프로퍼티를 추가하는 것은 상당히 위험하다.

 

이 때 심볼형 데이터를 키값으로 속성을 추가한다면,

 

다른 스크립트에서 함부로 심볼형 키값을 가진 데이터에 접근할 수 없다.

 

심볼형 데이터가 아닌 일반적인 문자열을 키값으로 속성을 추가했다면, 충돌이 일어날 수도 있다.

 

심볼을 이용해 속성을 만들기 위해서는 다음의 문법을 따라야한다.

 

// 객체 리터럴

let id = Symbol("id")

const user = {
    name: "Char1ey",
    [id]: "asdf1387"
}

// 객체에 직접 값을 대입하는 경우

let pw = Symbol("pw")

user[pw] = 12345678

 

이렇게 작성된 객체 user는 for in 문을 통해 순회할 경우,

 

심볼을 키값으로 갖는 속성은 출력되지 않는다.

 

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

// Char1ey
// ...나머지 속성 id, pw는 출력되지 않는다.

 

심볼형 프로퍼티(속성)는 숨기기라 불리는 원칙이 존재해 몇몇 방법으로는 접근이 불가능하다.

외부 스트립크, 라이브러리는 접근이 불가능하다.(private 속성과 조금은 비슷한 거 같다)

 

for in 문과 같은 방법으로 객체를 복사하면 심볼형 프로퍼티는 복사되지 않지만,

 

Object.assign을 사용하면 심볼형 데이터까지 복사가 된다.

 

let clone = Object.assign({}, user)

console.log(clone[id], clone[pw])
// asdf1387, 12345678

 

 

 

3. 전역 심볼

 

심볼은 이름이 같아도 다른 개체로 취급이 된다.

 

하지만, 이름이 같은 심볼이 같은 개체로 식별하길 원하는 경우가 존재한다.

 

이를 위해서 전역 심볼 레지스트리라는 것이 만들어졌다.

 

전역 심볼 레지스트리(일종의 저장소)를 이용하는 방법은 Symbol.for(key)를 이용하는 것이다.

 

// 전역 레지스트리에서 심볼을 읽는다.
let id = Symbol.for("id"); // 심볼이 존재하지 않으면 새로운 심볼을 만든다.

// 동일한 이름을 이용해 심볼을 다시 읽는다(좀 더 멀리 떨어진 코드에서도 가능하다).
let idAgain = Symbol.for("id");

// 두 심볼은 같다.
alert( id === idAgain ); // true

// 출처: https://ko.javascript.info/symbol

 

위의 메서드 Symbol.for( )를 통해서 값을 새로 생성하거나, 있는 심볼을 가져온다.

 

반대로 심볼의 이름(심볼을 만들때 넣은 인자)을 얻어오는 메서드도 존재한다.

(※ 전역 심볼이 아닌 일반 심볼에는 사용할 수 없다. 사용시 undefined 반환, 대신 description 속성 존재)

 

let userid = Symbol.for("Char1ey");
let userpw = Symbol.for(1234);

// 심볼을 이용해 이름을 얻는다.
console.log( Symbol.keyFor(userid) ); // "Char1ey"
console.log( Symbol.keyFor(userpw) ); // 1234

 

마지막으로 시스템 심볼이라는 JS 내부의 심볼이 있는데, 추후에 다른 기능을 알아보면서 같이 알아보도록 하자.