Map은 Object를 변형한 것이고, Set은 Array를 변형한 것인데요. 특정 상황에서 유용하도록 메소드가 추가된 거라고 생각하시면 됩니다. Map부터 알아보죠.
Map
Map 객체는 Object와 상당히 유사합니다. 그리고 Map이 없었던 시절에는 Object가 Map 대신에 쓰였습니다. ES2015에 이르러 드디어 Map이 생겼는데요. Object와 달리 넣은 순서가 기억되고, 키가 문자열이 아니어도 됩니다. 다음과 같이 만들 수 있습니다.
var map = new Map([['zero', 'ZeroCho']]);
map.set('hero', 'Hero');
map.get('zero'); // 'ZeroCho'
map.size; // 2
map.has('hero'); // true
map.has('nero'); // false
map.entries(); // {['zero', 'ZeroCho'], ['hero', 'Hero']}
map.keys(); // {'zero', 'hero'}
map.values(); // {'ZeroCho', 'Hero'}
map.delete('hero');
map.clear();Map에는 기본적으로 제공하는 속성과 메소드들이 있습니다. 위의 예에서 확인할 수 있습니다.
set으로 설정하고, get으로 가져옵니다. has로 해당 키가 있는지 확인할 수 있죠. delete로 기존 키를 지울 수 있고요. clear로 초기화할 수 있습니다. forEach로 내용물 반복도 가능합니다. 가장 편한 게 size 속성입니다. 기존 Object는 내용물의 크기를 직접 확인해야했지만, Map은 배열처럼 속성이 있어 바로확인할 수 있습니다.
entries, keys, values가 좀 새로울 수 있는데요. entries를 보면 Map 안의 키:값 쌍을 돌려주네요. keys는 키만, values는 값만을 돌려줍니다. 한가지 특징적인 것은 이 반환값이 다 반복기라는 객체입니다. 반복기라는 객체는 나중에 다루겠습니다!
요약하면 Object에 비해 Map은
- 넣은 순서대로 반복
- 키가 문자열 뿐만 아니라 어떤 값이어도 상관없음(객체도 가능)
- size를 항상 체크 가능
- 편리한 메소드 제공
WeakMap
WeakMap은 키가 객체인 Map입니다.
var weakMapObj = { example: 'any' };
var weakMap = new WeakMap();
weakMap.set(weakMapObj, 'zero');
weakMap.get(weakMapObj); // 'zero'굳이 WeakMap을 쓰는 이유는 WeakMap의 키는 기존 객체를 약한 참조해서 가비지컬렉션을 방해하지 않기 때문이라고 하네요. 대신에 entries, keys, values 메소드를 사용할 수 없습니다.
어디다 쓰는지 잘 모르고 있었는데 객체에 정보를 저장하고 싶을 때 사용하면 좋습니다. 객체 안에 속성을 추가하기 싫을 때 씁니다. 예를 들어 서버에서 유저 정보를 불러오고, 프론트에서는 유저 정보에 프론트에만 쓸 추가 정보를 넣고 싶다면
weakMap.set(서버유저, 프론트추가값);이런 식으로 저장하면 됩니다. 나중에 혹시 서버유저 객체가 가비지컬렉션된다면 프론트값도 같이 가비지컬렉션 됩니다. 기존 Map에서는 객체를 키로 사용한 경우에는 그 객체가 가비지컬렉션되지 않는 문제가 있었습니다.
Set
Set은 Array와 비슷합니다. 역시 Set이 없었을 때는 Array가 Set처럼 쓰였고요. Set은 Array와는 달리 값이 중복될 수 없습니다.
var set = new Set(['zero']);
set.add('hero');
set.has('zero'); // true
set.has('nero'); // false
set.size; // 2
set.entries(); // {['zero', 'zero'], ['hero', 'hero']}
set.keys(); // {'zero', 'hero'}
set.values(); // {'zero', 'hero'}
set.delete('hero');
set.clear();Map과도 비슷하죠? add로 값을 추가하고, has로 확인하고, delete로 지우고, clear로 초기화합니다. size로 크기를 확인하는 것도 같고요. entries, keys, values 함수도 사용할 수 있습니다. 대신 set[1] 이렇게 값을 하나씩 확인할 수는 없습니다. 그냥 넣어두고 전체를 반복하는 겁니다.
요약하면, Array와의 차이점은
- 중복 불가능
- 중간 값 확인 불가능
- 편리한 메소드 제공
WeakSet
WeakSet은 객체만을 값으로 받습니다.
var weakSetObj = { example: 'any' };
var weakSet = new WeakSet();
weakSet.add(weakSetObj);역시나 WeakSet을 쓰는 이유는 약한 참조를 통해서 가비지컬렉션을 방해하지 않기 위함이라네요. 그 대신 entries, keys, values를 사용할 수 없습니다. 사용하는 이유도 WeakMap과 비슷한 사용 이유라고 보시면 됩니다.
다음 시간에는 Promise에 대해 알아보겠습니다!
Jeongwon
ZeroCho