이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌9 - EcmaScript - 2년 전 등록 / 일 년 전 수정

ES2015(ES6) Map, Set, WeakMap, WeakSet

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

 안녕하세요. 이번 시간에는 새로 추가된 객체인 Map, Set, WeakMap, WeakSet에 대해 알아보겠습니다. 

MapObject를 변형한 것이고, SetArray를 변형한 것인데요. 특정 상황에서 유용하도록 메소드가 추가된 거라고 생각하시면 됩니다. 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 메소드를 사용할 수 없습니다.

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를 사용할 수 없습니다.

다음 시간에는 Promise에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

2개의 댓글이 있습니다.
2일 전
Set 은 굉장히 불편해 보이는데 자주 쓰나요?
2일 전
그렇게 불편하진 않습니다! 자주 쓰입니다
2일 전
그렇군요 감사합니다 ㅎㅎ
3달 전
안녕하세요 zerocho님 튜토리얼 너무 잘 보고 있습다. 하나 궁금한점이 있어서 리플을 남깁니다. weakmap, weakset에 대한 설명이 이해가 가지 않는데 좀 더 설명해주실 수 없을까요.
3달 전
저도 사실 거의 써본 적이 없습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections 여기에 설명이 나와 있습니다.