ES6 javascript : Symbol(심볼)

https://www.scaler.com/topics/javascript-symbol/

Symbol은 *원시형 타입이고 객체의 속성으로 사용된다. 

(* 원시형 :  Number, String , Null, Undefined, Boolean, +Symbol(ES6) /  참조형 : Object)

Symbol을 번역하면, '상징' 인데 이처럼 유일무이한 값, 고유한 값을 가진다.

-> 객체 속성(like length)도 덮어쓸 수 있다. 그렇기때문에 내장 속성과 구분 할 수 있도록 Symbol을 사용한다.

또한 Symbol은 변경이 불가능한 불변값! 이다.

 

예를 들어 배열 객체를 "arr.length"가 같은 이름의 length로 덮어쓰면 덮어써지는 문제가 발생!
이때 배열의 길이 값은 그대로 유지하면서, 같은 이름의 length 속성을 추가하고자 할때
-->Symbol을 사용한다.

let ar =[1,2,3,4,5];
console.log(ar.length); //5

ar.length=50 //ar배열 length속성을 정의하고 50을 할당(덮어쓰기)
console.log(ar.length); // 50
console.log(ar) // (50) [1, 2, 3, 4, 5, empty × 45]


// Symbol 사용
let ar2=[1,2,3,4,5];
const length=Symbol('length');

ar2[length]=50; //ar2 배열의 length속성에 50을 할당
console.log(ar2.length) //5
console.log(ar2[length]) //50
console.log(ar2) //(5) [1, 2, 3, 4, 5, Symbol(length): 50]

Symbol은 매번 심볼함수 호출시 새로운 심볼 값을 생성합니다.

// Symbol('___') : '___' 아무의미를 갖지 않는다. 그래서 Symbol() 빈칸으로 선언해도 무관하다.
let s1=Symbol('jane')
let s2=Symbol('jane')

console.log(s1==s2) // false - s1,s2는 같은 값('jane')을 사용했지만 완전히 다르다.

 

또한 Symbol은 for ..in 구문으로 반복시 출력되지 않습니다. (은닉이 가능합니다.)

let ar6=[1,2,3,4]
ar6.someProperty=10
console.log(ar6)
//  [1, 2, 3, 4, Symbol(someProperty): 10]
console.log(ar6) //4
for(let i in ar6){
    console.log(i)
}
/*
0
1
2
3	
*/