Symbol 이란?? (숨김key 가능)
- object 자료형의 key 값으로 사용될 수 있다. (원래는 문자열만 obj의 key로 올 수 있었음.)
- object 자체를 바로 출력해버리면 symbol():value 이렇게 값이 드러난다.
- 그렇지만 반복문 안에서는 보이지 않는다.
이렇게 사용한다.
let 심볼 = Symbol('설명');
오브젝트.[심볼] = 넣을 값 입력;
좀더 자세한 예시를 살펴보자.
Symbol 설정방법 1️⃣
let cat = {name : '빌리', age : 2};
//자료 넣을때 주로 하던 방법
//cat.character = '우주최고대마왕겁쟁이';
//Symbol자료 넣기.
let character = Symbol('어떤 성격을 가졋을까요?')
cat[character] = '우주최고대마왕겁쟁이';
let color = Symbol('어떤 색상을 가졋을까요?')
cat[color]= '삼색냥';
console.log(cat);
//{name: '빌리', age: 2, character: '우주최고대마왕겁쟁이', Symbol(어떤 성격을 가졋을까요?): '우주최고대마왕겁쟁이', Symbol(어떤 색상을 가졋을까요?): '삼색냥'}
console.log(cat[character]) // 우주최고대마왕겁쟁이
for(let key in cat){
console.log(cat[key]); // 빌리 2 undefined
}
이처럼 cat[character]를 출력하면 자료가 나온다.
❓👀 숨기는거라매요??
👉직접적으로 요소를 가리키면 출력이 된다. 그렇지만 반복문에서는 보이지 않는다.
Symbol 자료가 출력이 안되는 이유는 바로 enumerable 하지 않기 때문이다. !!
(속성에 직접적으로 넣은게 아니니깐)'
Symbol 설정방법 2️⃣
let character = Symbol('냥냥이성격')
let cat = {name : '빌리', age: 2, [character] : '우주최강겁쟁이'}
console.log(cat); //{name: '빌리', age: 2, Symbol(냥냥이성격): '우주최강겁쟁이'}
변수에 Symbol(설명) 을 넣어준 뒤에,
그 변수명을 대괄호로 감싸서 object 에 키로 넣고, 값도 같이 넣어주면 아주 간단하게 완성.
Symbol 특징
- 설명이 같아도 다른 Symbol이다. Symbol 을 만들때마다 새로 유니크한 각각의 Symbol이 생긴다.
- 전역 Symbol 의 경우, 설명이 같으면 같은 Symbol 이다.
- 내장 Symbol 사실 있었다!! 우리가 보지 못했을 뿐!! 대상.[Symbol.iterator] 콘솔에 찍어보면 보임.
[Symbol.iterator]
for ~of 반복문을 사용할 수 있도록 해준다.
obj같은 경우 iterable 한 요소가 아니다. 근데 나는 for~of 반복문을 꼭 이용하고 싶다.
그러면 obj 의 prototype 에 [Symbol.iterator] 를 추가해서 for ~of 반복문을 사용할 수 있도록 해준다.
전역 Symbol
여러 객체에서 사용하고 싶을때 만듬.
let A = Symbol.for('설명');
Symbol 이 어떻게 쓰일 수 있을까?
다른 자바스크립트 파일 가져와서 사용하거나, 라이브러리 가져오거나 한 상황
근데 그 안에 obj 수정해야 하는데 기존에 있던 코드를 최대한 안건드리고 싶을때.
반복문에 잡히지 않아서 에러가 발생할 확률이 낮다.
'JS (Java Script)' 카테고리의 다른 글
Set 자료형 (0) | 2023.09.14 |
---|---|
Map 자료형 (0) | 2023.09.14 |
반복문 for ~ in , for ~ of __ enumerable 한가? iterable 한가? (0) | 2023.09.13 |
프로미스 패턴 없이 프로미스 만들기. async 와 await (0) | 2023.09.13 |
ES6 프로미스 패턴 !!("콜백지옥" 으로 부터 탈출) (0) | 2023.09.13 |