1. Symbol : 변경 불가능한 원시 타입의 값.
- 다른 값과 중복되지 않는 유일무이한 값.
=> 이름 충돌 위험이 없는 프로퍼티 키 값을 만들기 위해 주로 사용한다.
- 리터럴 표기법이 없다
- 심벌은 외부로 노출되지 않는다.
- 무조건 Symbol() 를 호출해서 생성한다.
const symbol = Symbol('jenny');
console.log(typeof symbol); //타입은 심볼
console.log(symbol); //Symbol객체인데 디스크립터는 제니야!
결과
symbol
Symbol(jenny)
2. 안의 description이 같아도 다른 객체로 인식된다.
const key1 = 'key';
const key2 = 'key';
const key3 = Symbol('key');
const key4 = Symbol('key');
console.log(key1 === key2); //true
console.log(key3 === key4); //false
console.log(key3.description === key4.description); //true
하지만 .description으로 비교하면 같은 것을 알수있다.
3. Map객체 : Object랑 똑같다. key랑 value로 값을 받아올 수 있다.
set으로 값을 추가한다. set(키값, value값)
const map = new Map();
map.set(key1, 'hi');
map.set(key3, 'Hello');
3.1 값을 가져오는 방법 : get
const key1 = 'key';
const key2 = 'key';
const key3 = Symbol('key');
const key4 = Symbol('key');
const key5 = 'Hello';
const map = new Map();
map.set(key1, 'hi');
map.set(key3, 'Hello');
map.set(key5,'nice to meet you')
console.log(map.get(key2)); //key2에 할당된게 없지만 key라는 des가 key1과 같으므로 hi
console.log(map.get('key')); //hi
console.log(map.get('Hello')); //nice to meet you
console.log(map.get(key5)) //할당된 값인 nice to meet you가 나온다.
console.log('=============');
결과 : console.log(map.get(key2)) 는 hi가 나온다. 왜냐하면 key1과 key2의 desciprtion이 같기 때문이다. 아래줄도 마찬가지. console.log(map.get(key4)) 는 undefined가 나온다.
4. Symbol.for
외부에 있는 전역심벌 레지스트리에 값을 저장한다.
// 전역 심벌 레지스트리 (Global Symbol Registry) :
const k1 = Symbol.for('key'); //.for를 사용해서 전역에 key값을 만들어줌. 전역 key가 없으면 생성
const k2 = Symbol.for('key'); //전역 key가 존재하면 값 가져옴.
console.log(k1 === k2);
console.log('Symbol =', Symbol.keyFor(k1));
key라는 값을 가진 k1이 만들어졌고 key라는 값이 이미 있으므로 k2에도 같은 것을 넣었다. 그래서 console(k1 === k2) 라고 하면 true가 나오게 된다.
keyFor라는 메서드를 가지고 값의 description을 가져올 수 있다. 두번째는 Symbol = key가 나온다.
5. symbol로 접근하기
const obj = {};
const sym = Symbol();
obj[sym] = '심볼키의 값 ';
obj.propKey = '일반 키의 값 ';
console.log(obj); //{ propKey: '일반 키의 값 ', [Symbol()]: '심볼키의 값 ' }
console.log(obj['propKey']); //결과 : 일반 키의 값
console.log(obj[sym]); //결과 : 심볼키의 값
console.log(obj['sym']); //undefined. 이렇게 못가져옴.
console.log(obj.sym); //결과 : []형태로만 접근할 수 있다. undefined 이렇게 접근 불가.
console.log(obj[Symbol()]); //결과 : undefined 이렇게 접근 불가.
console.log(sym in obj); //결과 : true
console.log(Object.keys(obj)); //결과 : propKey. 심볼로 만든 키는 나오지 않는다.
console.log(Object.getOwnPropertySymbols(obj)); //[Symbol()] 심볼값의 키를 찾을 때
console.log(Reflect.ownKeys(obj)); //결과: [ 'propKey', Symbol() ]. 일반적인키값, 심볼로 만든키값 둘다 나옴
6. Symbol을 적용해보기
//객체의 id를 0으로 초기화해주는 함수
function idFunc1(obj) {
obj.id = 0;
}
const libId = Symbol('id');
function idFunc2(obj) {
obj[libId] = 0;
}
let obj1 = { id: 1234 };
let obj2 = { id: 1111 };
idFunc1(obj1);
idFunc2(obj2);
console.log(obj1); //{ id: 0 } 기존에 있던 값을 덮음
console.log(obj2); //{ id: 1111, [Symbol(id)]: 0 } 기존에 있던거는 그대로 두고 Symbol에 새로운거 추가
'Javascript' 카테고리의 다른 글
JSON데이터와 객체의 차이(javascript) (0) | 2022.10.07 |
---|---|
이터러블과 이터레이터(Iterable, Iterator protocol) (0) | 2022.10.06 |
제너레이터 (0) | 2022.10.06 |
타이머, Throttle(쓰로틀), 디바운스(debounce) (0) | 2022.10.04 |
오답노트) 3,2,1,끝이 1초에 한번 출력 (2) | 2022.10.04 |