Front-end/JavaScript

[JS] Symbol

파리외 개발자 2022. 8. 8. 18:20
number, undefined, string등의 변수 타입을 원시형 타입이라 한다.
es6에서는 새로운 원시형 타입인 symbol타입이 추가되었다.
  • 심볼은 객체의 속성으로 사용됨
  • 심볼이 사용된 값은 유니크한 값을 가짐
  • 심볼값은 선언 후 변경이 불가능함

선언과 출력 형태

testSb이란 변수를 심볼형으로 만들어주었다.

괄호 속 인자에는 심볼변수에 대한 설명만이 담긴다.

변수의 출력 형태는 심볼로 그대로 나온다.

 

심볼 사용이유 - 충돌방지

배열의 길이가 3인 배열의 length값에 10을 넣어준다면

배열의 길이가 10으로 변경이 된다.

그렇다면 배열에 length라는 이름의 속성을 넣어주면서도

내장된 length와 충돌이 일어나지 않으려면 어떻게 해야 될까

length라는 변수를 심볼형으로 정의하고

arr에 인덱스 형태처럼 붙혀서 값 초기화를 해준다.

그런 후 아래 13,14라인처럼 출력을 한다면 서로 다른값으로 나옴을 보며

같은 이름의 속성이라도 충돌이 나지 않음을 볼 수 있다.

 

일반 속성과 심볼 속성의 차이

일반 속성

arr1의 일반속성 prop은 배열 출력시 마지막에 딸려서 출력이 된다.

 

심볼 속성

반면 심볼속성은 for in구문으로 배열을 출력했을 때 같이 출력되지 않는다.

37라인처럼 따로 출력을 해야 값이 나온다.

속성을 은닉화 시키고 싶다면 심볼을 사용하면 된다.