본문 바로가기
Javascript

Symbol,Map,

by jennyiscoding 2022. 10. 6.

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에 새로운거 추가